Skip to content

Commit

Permalink
docs: 修订ecmascript6文档
Browse files Browse the repository at this point in the history
  • Loading branch information
simply-none committed Feb 26, 2024
1 parent 44b3721 commit aee9c61
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 28 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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():将一组值转换成数组,弥补数组构造函数的不足
Expand Down
50 changes: 36 additions & 14 deletions docs/usage-books/笔记/ECMAScript入门/12.set和map.md
Original file line number Diff line number Diff line change
Expand Up @@ -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,无返回值
Expand All @@ -22,67 +22,82 @@
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类似
8. set实现并集、交集、差集:
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)

## 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
Expand All @@ -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弱引用的只是键名,而非键值
4 changes: 2 additions & 2 deletions docs/usage-books/笔记/ECMAScript入门/13.Proxy语法.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 中)
Expand Down Expand Up @@ -293,4 +293,4 @@ service.employees().then(json => {
const employees = JSON.parse(json);
// ···
});
```
```
19 changes: 10 additions & 9 deletions docs/usage-books/笔记/ECMAScript入门/14.Reflect.md
Original file line number Diff line number Diff line change
Expand Up @@ -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来调用构造函数的方法
Expand All @@ -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()

Expand All @@ -88,4 +89,4 @@ newPerson = observable(person)
person.name = 'jadeqiu'

// 输出:name jadeqiu
```
```
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
4. promise 对象无法取消,一旦创建就立即执行
5. 若不设置回调函数,promise 对象内部抛出的错误,不会反映到外部
6. 当处于 pending 状态时,无法得知目前进展到何种阶段
7. 当某些事件不断的反复发生,使用 stream 模式比部署 promise 更好
7. 当某些事件不断的反复发生,使用 stream 模式比部署 promise 更好

## 基本用法

Expand Down

0 comments on commit aee9c61

Please sign in to comment.