开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 数据结构与算法 -> ES6 运算符扩展、Iterator遍历器和for...of -> 正文阅读

[数据结构与算法]ES6 运算符扩展、Iterator遍历器和for...of

运算符扩展

指数运算符

原生具备 Iterator 接口的数据结构

类数组对象部署遍历

遍历器对象的 return()，throw()?

return方法?

throw方法?

隐性调用Symbol.iterator方法

?Set 和 Map 结构的for...of

运算符扩展

指数运算符

指数运算符（**）。

2 ** 3 // 8
let b = 4;
b **= 3;
// 等同于 b = b * b * b;

链判断运算符

引入了“链判断运算符”（optional chaining operator）?.，简化下面的写法。直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。

const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';
//链判断运算符写法
const firstName = message?.body?.user?.firstName || 'default';

链判断运算符`?.`写法。

obj?.prop?// 对象属性是否存在
obj?.[expr]?// 同上
func?.(...args)?// 函数或对象方法是否存在

链判断运算符`?`注意点

.?.运算符相当于一种短路机制，只要不满足条件，就不再往下执行。例如下面，如果a是undefined或null，那么x不会进行递增运算。也就是说，链判断运算符一旦为真，右侧的表达式就不再求值。

a?.[++x]
// 等同于
a == null ? undefined : a[++x]

?报错场合

以下写法是禁止的，会报错。

// 构造函数
new a?.()
new a?.b()
// 链判断运算符的右侧有模板字符串
a?.`{b}`
a?.b`{c}`
// 链判断运算符的左侧是 super
super?.()
super?.foo
// 链运算符用于赋值运算符左侧
a?.b = c

Null 判断运算符

ES2020?引入了一个新的 Null 判断运算符??。它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值。?

?逻辑赋值运算符?

运算符||=、&&=、??=相当于先进行逻辑运算，然后根据运算结果，再视情况进行赋值运算。

// 或赋值运算符
x ||= y
// 等同于
x || (x = y)
// 与赋值运算符
x &&= y
// 等同于
x && (x = y)
// Null 赋值运算符
x ??= y
// 等同于
x ?? (x = y)

多个运算符使用注意点

多个逻辑运算符一起使用，必须用括号表明优先级，否则会报错。

// 报错
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs

Iterator遍历器

概念

它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。有以下作用：

1.为各种数据结构，提供一个统一的、简便的访问接口；

2.使得数据结构的成员能够按某种次序排列；?

3.ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。

原理过程

1.创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

2.第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

3.第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

4.不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

下面是一个模拟next方法返回值的例子。

var it = makeIterator(['a', 'b']);
it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }
function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}

?Iterator遍历器属性

一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”，当使用for...of循环遍历这种数据结构时，该循环会自动去寻找 Iterator 接口。默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，也就是说只要具有Symbol.iterator属性，就可以认为是“可遍历的”。Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。

原生具备 Iterator 接口的数据结构

Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象、Generator 函数?。

Array：

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();
iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

String ：

var someString = "hi";
typeof someString[Symbol.iterator]
// "function"
var iterator = someString[Symbol.iterator]();
iterator.next()  // { value: "h", done: false }
iterator.next()  // { value: "i", done: false }
iterator.next()  // { value: undefined, done: true }

?Generator 函数：

let myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};
[...myIterable] // [1, 2, 3]
// 或者采用下面的简洁写法
let obj = {
  * [Symbol.iterator]() {
    yield 'hello';
    yield 'world';
  }
};
for (let x of obj) {
  console.log(x);
}
// "hello"
// "world"

其它对象如果要具备可被for...of循环调用的 Iterator 接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）。

类数组对象部署遍历

对于类似数组的对象（存在数值键名和length属性），部署 Iterator 接口，有一个简便方法，就是Symbol.iterator方法直接引用数组的 Iterator 接口。下面是另一个类似数组的对象调用数组的Symbol.iterator方法的例子。注意普通对象部署数组的Symbol.iterator方法无效果。

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
// 或者
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];
[...document.querySelectorAll('div')] // 可以执行了
let iterable = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // 'a', 'b', 'c'
}

遍历器对象的 return()，throw()?

遍历器对象除了具有next()方法，还可以具有return()方法和throw()方法。自己写遍历器对象生成函数时，next()方法是必须部署的，return()方法和throw()方法是否部署是可选的。

return方法?

return()方法的使用场合是for...of循环提前退出（通常是因为出错，或者有break语句），调用return()方法。如果一个对象在完成遍历前，需要清理或释放资源，就可以部署return()方法。

function readLinesSync(file) {
  return {
    [Symbol.iterator]() {
      return {
        next() {
          return { done: false };
        },
        return() {
          file.close();
          return { done: true };
        }
      };
    },
  };
}

throw方法?

throw()方法主要是配合 Generator 函数使用，一般的遍历器对象用不到这个方法

`隐性调用Symbol.iterator`方法

除了for...of循环，还有一些场合会默认调用 Iterator 接口（即Symbol.iterator方法）

解构赋值

对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法。

let set = new Set().add('a').add('b').add('c');
let [x,y] = set;
// x='a'; y='b'
let [first, ...rest] = set;
// first='a'; rest=['b','c'];

扩展运算符

扩展运算符（...）也会调用默认的 Iterator 接口。可以将任何部署了 Iterator 接口的数据结构，转为数组。只要某个数据结构部署了 Iterator 接口，就可以对它使用扩展运算符，将其转为数组。

// 例一
var str = 'hello';
[...str] //  ['h','e','l','l','o']
// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']

yield*

yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

let generator = function* () {
  yield 1;
  yield* [2,3];
  yield 4;
};
var iterator = generator();
iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: undefined, done: true }

其他场合

由于数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口。包括以下：

for...of
Array.from()
Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
Promise.all()
Promise.race()

for...of

for...of循环内部调用的是数据结构的Symbol.iterator方法。可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、 Generator 对象，以及字符串。

比较for...in

1.for...in循环只能获得对象的键名，不能直接获取键值。且不能用于遍历Set、Map等。

2.for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。

3.for...in循环会以任意顺序遍历键名。

4.数组的遍历器接口只返回具有数字索引的属性。这一点跟for...in循环也不一样。for...of循环不会返回数组arr的foo属性。

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

?Set 和 Map 结构的for...of

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
  console.log(e);
}
// Gecko
// Trident
// Webkit
var es6 = new Map();
es6.set("edition", 6);
es6.set("committee", "TC39");
es6.set("standard", "ECMA-262");
for (var [name, value] of es6) {
  console.log(name + ": " + value);
}
// edition: 6
// committee: TC39
// standard: ECMA-262