一丶Set 和 Map 数据结构

1.Set

基本用法

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 实例的属性和方法

Set 结构的实例有以下属性。

  • Set.prototype.constructor：构造函数，默认就是Set函数。
  • Set.prototype.size：返回Set实例的成员总数。

Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。

  • Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
  • Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
  • Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。

  • Set.prototype.clear()：清除所有成员，没有返回值。

    遍历操作

    Set 结构的实例有四个遍历方法，可以用于遍历成员。

  • Set.prototype.keys()：返回键名的遍历器

  • Set.prototype.values()：返回键值的遍历器
  • Set.prototype.entries()：返回键值对的遍历器
  • Set.prototype.forEach()：使用回调函数遍历每个成员

需要特别指出的是，Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用 Set 保存一个回调函数列表，调用时就能保证按照添加顺序调用。
（1）keys()，values()，entries()
keys方法、values方法、entries方法返回的都是遍历器对象（详见《Iterator 对象》一章）。由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。
（2）forEach()
Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

  1. let set = new Set([1, 4, 9]);
  2. set.forEach((value, key) => console.log(key + ' : ' + value))
  3. // 1 : 1
  4. // 4 : 4
  5. // 9 : 9

上面代码说明，forEach方法的参数就是一个处理函数。该函数的参数与数组的forEach一致，依次为键值、键名、集合本身（上例省略了该参数）。这里需要注意，Set 结构的键名就是键值（两者是同一个值），因此第一个参数与第二个参数的值永远都是一样的。
另外，forEach方法还可以有第二个参数，表示绑定处理函数内部的this对象。
（3）遍历的应用
扩展运算符（...）内部使用for...of循环，所以也可以用于 Set 结构。

  1. let set = new Set(['red', 'green', 'blue']);
  2. let arr = [...set];
  3. // ['red', 'green', 'blue']

扩展运算符和 Set 结构相结合，就可以去除数组的重复成员。

  1. let arr = [3, 5, 2, 2, 5, 5];
  2. let unique = [...new Set(arr)];
  3. // [3, 5, 2]

而且，数组的map和filter方法也可以间接用于 Set 了。

  1. let set = new Set([1, 2, 3]);
  2. set = new Set([...set].map(x => x * 2));
  3. // 返回Set结构：{2, 4, 6}
  4. let set = new Set([1, 2, 3, 4, 5]);
  5. set = new Set([...set].filter(x => (x % 2) == 0));
  6. // 返回Set结构：{2, 4}

因此使用 Set 可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference）。

  1. let a = new Set([1, 2, 3]);
  2. let b = new Set([4, 3, 2]);
  3. // 并集
  4. let union = new Set([...a, ...b]);
  5. // Set {1, 2, 3, 4}
  6. // 交集
  7. let intersect = new Set([...a].filter(x => b.has(x)));
  8. // set {2, 3}
  9. // 差集
  10. let difference = new Set([...a].filter(x => !b.has(x)));
  11. // Set {1}

如果想在遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构；另一种是利用Array.from方法。

  1. // 方法一
  2. let set = new Set([1, 2, 3]);
  3. set = new Set([...set].map(val => val * 2));
  4. // set的值是2, 4, 6
  5. // 方法二
  6. let set = new Set([1, 2, 3]);
  7. set = new Set(Array.from(set, val => val * 2));
  8. // set的值是2, 4, 6

上面代码提供了两种方法，直接在遍历操作中改变原来的 Set 结构。

2.WeakSet

含义

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。
首先，WeakSet 的成员只能是对象，而不能是其他类型的值。
WeakSet 结构有以下三个方法。

  • WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。
  • WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。
  • WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。

WeakSet 没有size属性，没有办法遍历它的成员。WeakSet 不能遍历，是因为成员都是弱引用，随时可能消失，遍历机制无法保证成员的存在，很可能刚刚遍历结束，成员就取不到了。WeakSet 的一个用处，是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏。

3.Map

含义和基本用法

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

实例的属性和操作方法

Map 结构的实例有以下属性和操作方法。
（1）size 属性
size属性返回 Map 结构的成员总数。

  1. const map = new Map();
  2. map.set('foo', true);
  3. map.set('bar', false);
  4. map.size // 2

（2）Map.prototype.set(key, value)
set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。

  1. const m = new Map();
  2. m.set('edition', 6)        // 键是字符串
  3. m.set(262, 'standard')     // 键是数值
  4. m.set(undefined, 'nah')    // 键是 undefined

set方法返回的是当前的Map对象，因此可以采用链式写法。

  1. let map = new Map()
  2.   .set(1, 'a')
  3.   .set(2, 'b')
  4.   .set(3, 'c');

（3）Map.prototype.get(key)
get方法读取key对应的键值，如果找不到key，返回undefined。

  1. const m = new Map();
  2. const hello = function() {console.log('hello');};
  3. m.set(hello, 'Hello ES6!') // 键是函数
  4. m.get(hello)  // Hello ES6!

（4）Map.prototype.has(key)
has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。

  1. const m = new Map();
  2. m.set('edition', 6);
  3. m.set(262, 'standard');
  4. m.set(undefined, 'nah');
  5. m.has('edition')     // true
  6. m.has('years')       // false
  7. m.has(262)           // true
  8. m.has(undefined)     // true

（5）Map.prototype.delete(key)
delete方法删除某个键，返回true。如果删除失败，返回false。

  1. const m = new Map();
  2. m.set(undefined, 'nah');
  3. m.has(undefined)     // true
  4. m.delete(undefined)
  5. m.has(undefined)       // false

（6）Map.prototype.clear()
clear方法清除所有成员，没有返回值。

  1. let map = new Map();
  2. map.set('foo', true);
  3. map.set('bar', false);
  4. map.size // 2
  5. map.clear()
  6. map.size // 0

遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

  • Map.prototype.keys()：返回键名的遍历器。
  • Map.prototype.values()：返回键值的遍历器。
  • Map.prototype.entries()：返回所有成员的遍历器。

  • Map.prototype.forEach()：遍历 Map 的所有成员。

    4.WeakMap

    含义

    WeakMap结构与Map结构类似，也是用于生成键值对的集合。WeakMap与Map的区别有两点。
    首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。

    二丶Proxy

    1.概述

    Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。
    Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
    ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

    1. var proxy = new Proxy(target, handler);

    Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。
    下面是 Proxy 支持的拦截操作一览，一共 13 种。

  • get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。

  • set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
  • has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
  • deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
  • ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
  • getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
  • defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
  • preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
  • getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
  • isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
  • setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
  • apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

  • construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。

    2.Proxy 实例的方法

    下面是上面这些拦截方法的详细介绍。

    1.get()

    get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。

    2.set()

    set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。

    3.apply()

    apply方法拦截函数的调用、call和apply操作。
    apply方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。

    4.has()

    has方法用来拦截HasProperty操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符。
    has方法可以接受两个参数，分别是目标对象、需查询的属性名。

    5.construct()

    construct方法用于拦截new命令，下面是拦截对象的写法。

    1. var handler = {
    2. construct (target, args, newTarget) {
    3.   return new target(...args);
    4. }
    5. };

    construct方法可以接受两个参数。

  • target：目标对象

  • args：构造函数的参数对象

  • newTarget：创造实例对象时，new命令作用的构造函数（下面例子的p）

    6.deleteProperty()

    deleteProperty方法用于拦截delete操作，如果这个方法抛出错误或者返回false，当前属性就无法被delete命令删除。

    7.defineProperty()

    defineProperty方法拦截了Object.defineProperty操作。

    8.getOwnPropertyDescriptor()

    getOwnPropertyDescriptor方法拦截Object.getOwnPropertyDescriptor()，返回一个属性描述对象或者undefined。

    9.getPrototypeOf()

    getPrototypeOf方法主要用来拦截获取对象原型。具体来说，拦截下面这些操作。

  • Object.prototype.__proto__

  • Object.prototype.isPrototypeOf()
  • Object.getPrototypeOf()
  • Reflect.getPrototypeOf()

  • instanceof

    10.isExtensible()

    isExtensible方法拦截Object.isExtensible操作。

    11.ownKeys()

    ownKeys方法用来拦截对象自身属性的读取操作。具体来说，拦截以下操作。

  • Object.getOwnPropertyNames()

  • Object.getOwnPropertySymbols()
  • Object.keys()
  • for...in循环

    12.preventExtensions()

    preventExtensions方法拦截Object.preventExtensions()。该方法必须返回一个布尔值，否则会被自动转为布尔值。

    13.setPrototypeOf()

    setPrototypeOf方法主要用来拦截Object.setPrototypeOf方法。

    3.this 问题

    虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。

    三丶Reflect

    1.概述

    Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。
    （1） 将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。
    （2） 修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。
    （3） 让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
    1. // 老写法
    2. 'assign' in Object // true
    3. // 新写法
    4. Reflect.has(Object, 'assign') // true
    （4）Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。
    1. Proxy(target, {
    2. set: function(target, name, value, receiver) {
    3.   var success = Reflect.set(target, name, value, receiver);
    4.   if (success) {
    5.     console.log('property ' + name + ' on ' + target + ' set to ' + value);
    6.   }
    7.   return success;
    8. }
    9. });
    上面代码中，Proxy方法拦截target对象的属性赋值行为。它采用Reflect.set方法将值赋值给对象的属性，确保完成原有的行为，然后再部署额外的功能。

    四丶Promise 对象

    1.Promise 的含义

    所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
    Promise对象有以下两个特点。
    （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
    （2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

    2.基本用法

    ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。
    下面代码创造了一个Promise实例。
    1. const promise = new Promise(function(resolve, reject) {
    2. // ... some code
    3. if (/* 异步操作成功 */){
    4.   resolve(value);
    5. } else {
    6.   reject(error);
    7. }
    8. });

    3.Promise.prototype.then()

    Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。
    1. getJSON("/posts.json").then(function(json) {
    2. return json.post;
    3. }).then(function(post) {
    4. // ...
    5. });

    4.Promise.prototype.catch()

    Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。
    1. getJSON('/posts.json').then(function(posts) {
    2. // ...
    3. }).catch(function(error) {
    4. // 处理 getJSON 和 前一个回调函数运行时发生的错误
    5. console.log('发生错误！', error);
    6. });

    5.Promise.prototype.finally()

    finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。
    1. promise
    2. .then(result => {···})
    3. .catch(error => {···})
    4. .finally(() => {···});
    上面代码中，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。

    6.Promise.all()

    Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
    1. const p = Promise.all([p1, p2, p3]);
    上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。（Promise.all方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。）
    p的状态由p1、p2、p3决定，分成两种情况。
    （1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
    （2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

    7.Promise.race()

    Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。
    1. const p = Promise.race([p1, p2, p3]);
    上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
    Promise.race方法的参数与Promise.all方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。

    8.Promise.resolve()

    有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。
    1. Promise.resolve('foo')
    2. // 等价于
    3. new Promise(resolve => resolve('foo'))

    9.Promise.reject()

    Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。
    1. const p = Promise.reject('出错了');
    2. // 等同于
    3. const p = new Promise((resolve, reject) => reject('出错了'))
    4. p.then(null, function (s) {
    5. console.log(s)
    6. });
    7. // 出错了