1、ES6新增的数据结构

1.1 Set

它类似于数组,但是成员的值都是唯一的,没有重复的值。

  1. const s = new Set();
  2. [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
  3. for (let i of s) {
  4. console.log(i);
  5. }
  6. // 2 3 5 4

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.prototype.keys():返回键名的遍历器
  • Set.prototype.values():返回键值的遍历器
  • Set.prototype.entries():返回键值对的遍历器
  • Set.prototype.forEach():使用回调函数遍历每个成员 ```javascript let set = new Set([‘red’, ‘green’, ‘blue’]);

for (let item of set.keys()) { console.log(item); } // red // green // blue

for (let item of set.values()) { console.log(item); } // red // green // blue

for (let item of set.entries()) { console.log(item); } // [“red”, “red”] // [“green”, “green”] // [“blue”, “blue”]

set.forEach((value, key) => console.log(key + ‘ : ‘ + value))

  1. <a name="QyFJP"></a>
  2. ### 1.2 Map
  3. 它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
  4. ```javascript
  5. const map = new Map([
  6. ['name', '张三'],
  7. ['title', 'Author']
  8. ]);
  9. map.size // 2
  10. map.has('name') // true
  11. map.get('name') // "张三"

Map结构的实例有以下属性:

  • Map.prototype.constructor:构造函数,默认就是Map函数。
  • Map.prototype.size:返回Map实例的成员总数。

Map 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。
一、操作方法:

  • Map.prototype.set(key,value)set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。
  • Map.prototype.get(key):读取key对应的键值,如果找不到key,返回undefined
  • Map.prototype.has(key):返回一个布尔值,表示某个键是否在当前 Map 对象之中。
  • Map.prototype.delete(key):删除某个键,返回true。如果删除失败,返回false
  • Map.prototype.clear():清除所有成员,没有返回值。

二、遍历方法

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

需要特别注意的是,Map 的遍历顺序就是插入顺序。

  1. const map = new Map([
  2. ['F', 'no'],
  3. ['T', 'yes'],
  4. ]);
  5. for (let key of map.keys()) {
  6. console.log(key);
  7. }
  8. // "F"
  9. // "T"
  10. for (let value of map.values()) {
  11. console.log(value);
  12. }
  13. // "no"
  14. // "yes"
  15. for (let item of map.entries()) {
  16. console.log(item[0], item[1]);
  17. }
  18. // "F" "no"
  19. // "T" "yes"
  20. // 或者
  21. for (let [key, value] of map.entries()) {
  22. console.log(key, value);
  23. }
  24. // "F" "no"
  25. // "T" "yes"
  26. // 等同于使用map.entries()
  27. for (let [key, value] of map) {
  28. console.log(key, value);
  29. }
  30. // "F" "no"
  31. // "T" "yes"
  32. map.forEach(function(value, key, map) {
  33. console.log("Key: %s, Value: %s", key, value);
  34. });

在实际工作中可能经常需要将Map转为数组,比较快速的方法是使用扩展运算符(…)

  1. const map = new Map([
  2. [1, 'one'],
  3. [2, 'two'],
  4. [3, 'three'],
  5. ]);
  6. [...map.keys()]
  7. // [1, 2, 3]
  8. [...map.values()]
  9. // ['one', 'two', 'three']
  10. [...map.entries()]
  11. // [[1,'one'], [2, 'two'], [3, 'three']]
  12. [...map]
  13. // [[1,'one'], [2, 'two'], [3, 'three']]

2、Array.from和Array.of区别

Array.from是将类似数组的对象和可遍历的对象转换为数组。

  1. let arrayLike = {
  2. '0': 'a',
  3. '1': 'b',
  4. '2': 'c',
  5. length: 3
  6. };
  7. // ES5的写法
  8. var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
  9. // ES6的写法
  10. let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.of方法用于将一组值,转换为数组。(可替代Array构造函数,这个方法的主要目的,是弥补数组构造函数Array()的不足)

  1. Array.of() // []
  2. Array.of(undefined) // [undefined]
  3. Array.of(1) // [1]
  4. Array.of(1, 2) // [1, 2]

3、Iterator(遍历器)

Iterator 的作用有三个:
一是为各种数据结构,提供一个统一的、简便的访问接口;
二是使得数据结构的成员能够按某种次序排列;
三是 ES6 创造了一种新的遍历命令for…of循环,Iterator 接口主要供for…of消费。

原生具备 Iterator 接口的数据结构如下:
- Array
- Map
- Set
- String
- TypedArray
- 函数的 arguments 对象
- NodeList 对象

4、for…of 和for…in的区别

JavaScript 原有的for…in循环,只能获得对象的键名,不能直接获取键值。ES6 提供for…of循环,允许遍历获得键值。

  1. var arr = ['a', 'b', 'c', 'd'];
  2. for (let a in arr) {
  3. console.log(a); // 0 1 2 3
  4. }
  5. for (let a of arr) {
  6. console.log(a); // a b c d
  7. }

for…of循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的属性。这一点跟for…in循环也不一样。

  1. let arr = [3, 5, 7];
  2. arr.foo = 'hello';
  3. for (let i in arr) {
  4. console.log(i); // "0", "1", "2", "foo"
  5. }
  6. for (let i of arr) {
  7. console.log(i); // "3", "5", "7"
  8. }

5、Promise对象

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

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

  1. promise.then(function(value) {
  2. // success
  3. }, function(error) {
  4. // failure
  5. });

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值(即resolve回调函数的参数)作为参数。

5.1 Promise.prototype.then()

Promise 实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过,then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。

  1. promise.then(function(value) {
  2. // success
  3. }, function(error) {
  4. // failure
  5. });

then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。
采用链式的then,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用。

5.2 Promise.prototype.catch()

catch()方法是.then(null, rejection).then(undefined, rejection)的别名,用于指定发生错误时的回调函数。

5.3 Promise.prototype.finally()

finally()方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。

5.4 Promise.all()

Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。此方法可以异步调用多个http请求并处理结果。

  1. const p = Promise.all([p1, p2, p3]);

上面代码中,Promise.all()方法接受一个数组作为参数,p1p2p3都是 Promise 实例,如果不是,就会先调用Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。另外,Promise.all()方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。
p的状态由p1p2p3决定,分成两种情况。
(1)只有p1p2p3的状态都变成fulfilledp的状态才会变成fulfilled,此时p1p2p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1p2p3之中有一个被rejectedp的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。