From aee9c6191821a7811a18f037b6ee3b0e093de697 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AE=80=E9=9A=90?= Date: Mon, 26 Feb 2024 11:27:02 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BF=AE=E8=AE=A2ecmascript6=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...04\347\232\204\346\211\251\345\261\225.md" | 4 +- .../12.set\345\222\214map.md" | 50 +++++++++++++------ .../13.Proxy\350\257\255\346\263\225.md" | 4 +- .../14.Reflect.md" | 19 +++---- .../15.Promise\345\257\271\350\261\241.md" | 2 +- 5 files changed, 51 insertions(+), 28 deletions(-) diff --git "a/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/08.\346\225\260\347\273\204\347\232\204\346\211\251\345\261\225.md" "b/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/08.\346\225\260\347\273\204\347\232\204\346\211\251\345\261\225.md" index 8df103b..2c91648 100644 --- "a/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/08.\346\225\260\347\273\204\347\232\204\346\211\251\345\261\225.md" +++ "b/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/08.\346\225\260\347\273\204\347\232\204\346\211\251\345\261\225.md" @@ -12,13 +12,13 @@ 2. 数组的浅复制 3. 数组的合并：`[...arr1, ...arr2....]` 4. 用于数组赋值时，尽可在结尾使用，否则报错 - 1. `const [a, ...b] = []; ` => a = undefined, b = [] + 1. `const [a, ...b] = [];` => a = undefined, b = [] 5. 将字符串转为真正的数组：`[...'hello']` => [h, e, l, l, o] 6. 任何有iterator遍历器的对象，都可以用它转为一个数组形式 ## 方法 -1. Array.from()：将类数组对象与可遍历对象（有iterator接口的数据结构）转为真的数组 +1. `Array.from(arrayLike, mapFn?, thisArg?)`：将类数组对象与可遍历对象（有iterator接口的数据结构）转为真的数组 1. 有iterator接口的数据结构：string、set等 2. 具有map功能，第二个参数将对第一个参数进行处理 2. Array.of()：将一组值转换成数组，弥补数组构造函数的不足 diff --git "a/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/12.set\345\222\214map.md" "b/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/12.set\345\222\214map.md" index 1889abf..a95bea9 100644 --- "a/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/12.set\345\222\214map.md" +++ "b/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/12.set\345\222\214map.md" @@ -12,7 +12,7 @@ 1. set.add(val)： 1. 添加某个值，返回set本身 2. 向set加入值的时候，值不会发生类型转换 - 3. set内部判断两个值是否相等，使用的算法是same-value-zero-equality，类似全等运算符，但是NaN是相等的 + 3. set内部判断两个值是否相等，使用的算法是`same-value-zero equality`，类似全等运算符`===`，区别在于set中NaN等于NaN 2. set.delete(val)：删除某个值，返回布尔值，表示是否删除成功 3. set.has(val)：返回布尔值，表示是否包含某个成员 4. set.clear()：清空set，无返回值 @@ -22,7 +22,7 @@ 6. 去除重复字符串字符：[...new Set(string)].join('') 7. set的遍历操作： 1. keys(),values()：由于set结构没有键名，所以这两者的行为是相等的，都返回set内的值，顺序为插入时的顺序 - 2. entries()：返回一个包括[键名，键值]的数组 + 2. entries()：返回一个包括[键名，键值]的数组，而由于set无键名，故键名的值等于键值 3. set结构默认可遍历，默认遍历器生成函数为values()方法，即： 1. Set.prototype[Symbol.iterator] === Set.prototype.values 4. forEach()：与数组的forEach类似 @@ -30,19 +30,26 @@ 1. 假设a: new Set([1, 2, 3]); b: new Set([2, 3, 9]) 2. 并集：new Set([...a, ...b]) // 1, 2, 3, 9 3. 交集：new Set([...a].filter(x => b.has(x))) // 2, 3 - 4. 差集：new Set([...a].filter(x => !b.has(x))) // 1 + 4. 差集：new Set([...a].filter(x => !b.has(x))) // 1 +9. 修改set的结构，应该将其转为array后，然后再次转为set ## WeakSet 定义： + - WeakSet结构和Set类似，表示不重复的值的集合 -- WeakSet的成员只能是对象，不能是其他类型的值 +- WeakSet的成员只能是`对象和Symbol值`，不能是其他类型的值 - WeakSet的对象是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用(出现内存泄漏的可能低) - 当其他对象都不再引用该对象，则垃圾回收机制会自动回收该对象占用的内存，不考虑该对象是否存在于WeakSet中 - WeakSet的引用，都不计入垃圾回收机制，适合临时存放一组对象，一级存放跟对象绑定的信息 - WeakSet内部成员的个数，取决于垃圾回收机制是否运行，运行前后可能成员个数不一样，ES6规定WeakSet是不可遍历的 +创建：`new WeakSet(iterable?)`： + +- 其中可迭代对象参数的成员会自动转为weakset的成员，从而可以是一个对象数组`[Symbol(), {}]`，而非原始值类型元素的数组`[1, false, '']` + 实例方法： + - WeakSet.prototype.add(value) - WeakSet.prototype.delete(value)：返回true、false - WeakSet.prototype.has(value) @@ -50,39 +57,47 @@ ## Map 前置： + - JavaScript对象本质是是键值对的集合 - 传统的对象只能用字符串当键，即使将对象作为对象的键，该键仍然会转成字符串形式，比如`new Object()`将转为`[object Object]` - 传统的对象是字符串-值的对应关系 定义： + - Map类似于对象，也是键值对的集合 - Map的键可以是任意类型的值 -- Map是值-值的对应关系 -- Map接收一个具有Iterator接口（比如数组、Set、Map）、且每个成员都是一个双数组的数据结构作为其构造函数的参数，其中双数组中的第一个元素作为他的键，第二个元素作为键的值 +- Map是值-值的对应关系(更完善的hash结构实现) +- Map接收一个具有Iterator接口（比如数组、Set、Map）、且每个成员都是一个双数组的数据结构作为其构造函数的参数`[['name', 'jade'], ['title', 'author']]`，其中双数组中的第一个元素作为他的键，第二个元素作为键的值 注意： + - map的set方法可以进行链式操作，返回map对象本身 - 若对同一个键（值的引用，所以此处会进行严格相等的比较）进行多次赋值，后面的值将覆盖前面的值 - 读取一个未知的键，返回undefined -- Map会将0和-0、NaN和NaN视为同一个键 +- Map会将0和-0、NaN和NaN、同一个对象的引用(内存地址相同)视为同一个键 +- map的默认遍历器是map.entries方法，故而`[...map]`和`[...map.entries()]`两者结果相同 实例属性： + - Map.prototype.size 实例方法： -- Map.prototype.set(key, value) -- Map.prototype.get(key) + +- Map.prototype.set(key, value)：返回map本身 +- Map.prototype.get(key)：返回value || undefined - Map.prototype.has(key) - Map.prototype.delete(key)：返回true、false - Map.prototype.clear()：清除所有成员，无返回值 -- Map.prototype.forEach()：遍历map +- Map.prototype.forEach()：遍历map，遍历顺序是插入顺序 遍历器生成函数，返回相应的遍历器（map iterator）： + - Map.prototype.keys() - Map.prototype.values() - Map.prototype.entries() 遍历器（具有iterator接口的数据结构）： + - String - Array - Map @@ -93,30 +108,37 @@ - generator对象 操作遍历器的方式： + - 解构赋值：`[a, b] = iteratorObj`，获取迭代器的值，map获取的内容是`[key, value]`的形式 - 扩展运算符：`[...iteratorObj]`，转为数组形式 -- `yield*`配合`function*`一起使用：` generator = fucntion* () {yeild* iteratorObj}; iteratorOtherObj = generator()`，用于遍历迭代器 +- `yield*`配合`function*`一起使用：`generator = fucntion* () {yeild* iteratorObj}; iteratorOtherObj = generator()`，用于遍历迭代器 - for...of：按添加时的先后顺序遍历迭代器 - Array.from - Map(), Set(), WeakMap(), WeakSet() - Promise.all(iteratorObj) - Promise.race(iteratorObj) - ## WeakMap 定义： + - WeakMap和Map结构类似，用于生成键值对的集合 -- WeakMap只接受对象作为键名 +- WeakMap只接受对象、symbol值作为键名 - WeakMap键名指向的对象，不计入垃圾回收机制，键名引用的对象是弱引用，只要对象的引用被清除，垃圾回收机制就会释放该对象所占用的内存 - WeakMap弱引用仅针对键名，键名的引用若重新赋值，读取时则可能获取不到预期的结果。不针对键值，即使键值所对应的内容重新赋值了，读取时依然是赋值之前的内容 实例方法： + - get() - set() - has() - delete() -用途（主要针对其对内存泄漏可能性低）： +用途（防止内存泄漏）： + - 将dom作为他的键，dom删除，键也会同时删除 - 保存类的私有属性，实例删除，该结构也随之消失 + +注意： + +- weakmap弱引用的只是键名，而非键值 diff --git "a/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/13.Proxy\350\257\255\346\263\225.md" "b/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/13.Proxy\350\257\255\346\263\225.md" index affd430..911ea53 100644 --- "a/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/13.Proxy\350\257\255\346\263\225.md" +++ "b/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/13.Proxy\350\257\255\346\263\225.md" @@ -9,7 +9,7 @@ 1. 生成 Proxy 实例：new Proxy(target, handler)，其中 target 表示要拦截的目标对象，handler 是一个定义拦截行为的配置对象 2. 要使拦截生效，必须对 Proxy 实例进行操作，而非目标对象 target 3. 若 handler 配置对象无任何拦截，等同于直接通向原对象 - 4. Proxy 实例可以作为其他对象的原型，若定制了一个 get 拦截操作，则该对象的属性访问操作在该属性不存在时，将从原型链中读取，此时读取操作将被拦截 + 4. Proxy 实例可以作为其他对象的原型（例如`Object.create(proxy)`），若定制了一个 get 拦截操作，则该对象的属性访问操作在该属性不存在时，将从原型链中读取，此时读取操作将被拦截 5. 一个配置对象中，可以设置多个不同的拦截操作 ## proxy 实例方法（配置对象 handler 中） @@ -293,4 +293,4 @@ service.employees().then(json => { const employees = JSON.parse(json); // ··· }); -``` \ No newline at end of file +``` diff --git "a/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/14.Reflect.md" "b/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/14.Reflect.md" index 4fe48b9..7fd7797 100644 --- "a/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/14.Reflect.md" +++ "b/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/14.Reflect.md" @@ -39,8 +39,8 @@ 1. 该方法对应于Object.preventExtensions，返回布尔值，表示是否操作成功，用于让一个对象变得不可扩展 2. 若参数不是对象，该方法会报错，而Object.xxx在ES5环境中会报错，在ES6环境中返回传入的参数 9. Reflect.ownKeys(target) - 1. 该方法对应于Object.getOwnPropertyNames + Object.getOwnPropertySymbols，返回对象自身的所有属性 - 2. 若第一个参数不是对象，该方法会报错 + 1. 该方法对应于Object.getOwnPropertyNames + Object.getOwnPropertySymbols，返回对象自身的所有属性 + 2. 若第一个参数不是对象，该方法会报错 10. Reflect.construct(Target, args) 1. 该方法对应于new Target(...args) 2. 提供了一种不使用new来调用构造函数的方法 @@ -49,19 +49,20 @@ 1. 该方法对应于`obj.__proto__`，对应于Object.getPrototypeOf(obj) 2. 第一个参数必须是一个对象，而Object.getPrototypeOf第一个参数不是对象会转为一个对象形式，然后再运行 12. Reflect.setPrototypeOf(obj, newProto) - 1. 该方法对应于Object.setPrototypeOf(obj, newProto) - 2. 该方法返回一个布尔值，表示原型是否设置成功 - 3. 若无法设置目标对象的原型（比如对象禁止扩展），将会返回false - 4. 若第一个参数不是对象，该方法会报错，而Object.setPrototypeOf返回第一个参数本身 - 5. 若第一个参数为null/undefined，两者都会报错 + 1. 该方法对应于Object.setPrototypeOf(obj, newProto) + 2. 该方法返回一个布尔值，表示原型是否设置成功 + 3. 若无法设置目标对象的原型（比如对象禁止扩展），将会返回false + 4. 若第一个参数不是对象，该方法会报错，而Object.setPrototypeOf返回第一个参数本身 + 5. 若第一个参数为null/undefined，两者都会报错 13. Reflect.apply(func, thisArg, args) - 1. 该方法对应于Function.prototype.apply.call(func, thisArg, args)，用于绑定this后执行函数func + 1. 该方法对应于Function.prototype.apply.call(func, thisArg, args)，用于绑定this后执行函数func ## 应用：实现观察者模式 观察者模式：函数自动观察数据对象，一旦对象有变化，函数就会自动执行 案例： + ```javascript const queuedObservers = new Set() @@ -88,4 +89,4 @@ newPerson = observable(person) person.name = 'jadeqiu' // 输出：name jadeqiu -``` \ No newline at end of file +``` diff --git "a/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/15.Promise\345\257\271\350\261\241.md" "b/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/15.Promise\345\257\271\350\261\241.md" index 1e00951..d942234 100644 --- "a/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/15.Promise\345\257\271\350\261\241.md" +++ "b/docs/usage-books/\347\254\224\350\256\260/ECMAScript\345\205\245\351\227\250/15.Promise\345\257\271\350\261\241.md" @@ -12,7 +12,7 @@ 4. promise 对象无法取消，一旦创建就立即执行 5. 若不设置回调函数，promise 对象内部抛出的错误，不会反映到外部 6. 当处于 pending 状态时，无法得知目前进展到何种阶段 -7. 当某些事件不断的反复发生，使用 stream 模式比部署 promise 更好 +7. 当某些事件不断的反复发生，使用 stream 模式比部署 promise 更好 ## 基本用法