为何说for...of循环是JS中的一颗宝石

时间 2020-04-09

标签为何 for...of 循环一颗宝石栏目 JavaScript 繁體版

原文原文链接

是什么使得一个编程语言的新特性很棒？那就是当这个特性能够结合多个其它特性的时候。javascript

ES2015 版本中引入的 for...of 语句就是这种状况。java

for...of 能够迭代数组、类数组以及任何能够迭代的对象(maps、sets、DOM集合)，而且，for...of 的语句还很短。编程

在这篇文章中，我将会演示 for...of 的能力。数组

1. 数组迭代

for...of 最多见的应用是对数组项进行迭代。该循环能够高效得完成迭代，而无需其余变量来保持索引。app

例如:编程语言

const products = ['oranges', 'apples'];

for (const product of products) {
  console.log(product);
}
// 'oranges'
// 'apples'

for...of 循环遍历 products 的每一项。迭代项被赋值给变量 product.ide

数组方法 entries() 能够用于访问迭代项的索引。该方法在每次迭代时返回一对 [index，item]。函数

就地解构是 for...of 的另外一个重要功能，咱们将在下一部分中对其进行详细说明。性能

1.1 就地解构

首先，咱们来看一下 for...of 循环的语法：spa

for (LeftHandSideExpression of Expression) {
  // statements
}

LeftHandSideExpression 表达式能够替换为任意赋值表达式左侧的内容。

在前面的示例中，LeftHandSideExpression 是一个变量声明 const product ，甚至是一个解构 const [index，product]。

所以，for...of 的语法支持实现迭代项的解构。

让咱们遍历一个对象数组，提取每一个对象的 name 属性：

const persons = [
  { name: 'John Smith' },
  { name: 'Jane Doe' }
];

for (const { name } of persons) {
  console.log(name);
}
// 'John Smith'
// 'Jane Doe'

const { name } of persons 循环迭代 persons 对象数组，而且就地将 person 对象进行了解构。

2. 类数组迭代

for...of 能够用于迭代类数组对象。arguments 是函数体内的特殊变量，包含函数的全部参数，这是一个经典的类数组对象。

让咱们写一个求和函数 sum(num1, num2, ..., numN)：

function sum() {
  let sum = 0;
  for (const number of arguments) {
    sum += number;
  }
  return sum;
}

sum(1, 2, 3); // => 6

在每次迭代中，for...of 循环遍历类数组 arguments 中的每个数，并计算总和。

3. 快速了解可迭代

什么是可迭代对象？它是支持可迭代协议的对象。

咱们能够经过查看 Symbol.iterator 方法来肯定某个数据是否可迭代。例如，下面的例子显示了数组是可迭代的：

const array = [1, 2, 3];
const iterator1 = array[Symbol.iterator]();
iterator1.next(); // => { value: 1, done: false }

若是你想了解更多信息，能够随时阅读我以前的文章。

for...of 接受可迭代对象。这很棒，由于如今你能够遍历string、数组、类数组、set、map，同时仍能够享受 for...of 的简洁。

4. 字符串迭代

JavaScript 的基础类型 string 是可迭代的。所以，能够轻松地遍历字符串的字符。

const message = 'hello';

for (const character of message) {
  console.log(character);
}
// 'h'
// 'e'
// 'l'
// 'l'
// 'o'

message 是一个字符串。因为字符串可迭代的，所以 for...of 循环遍历 message 。

5. Map 和 Set 迭代

Map 是一个特殊的对象，将键与值相关联。键能够是任何基本类型（一般是 string，但能够是 number 等）。

幸运的是，Map 也是可迭代的（在键/值对上进行迭代），而且 for...of 能够轻松地循环迭代全部键/值对。

一块儿看一下：

const names = new Map();
names.set(1, 'one');
names.set(2, 'two');

for (const [number, name] of names) {
  console.log(number, name);
}
// logs 1, 'one'
// logs 2, 'two'

for (const [number, name] of names) 迭代 names 的键值对。

在每一个循环中，迭代器都会返回一个数组 [key，value] ，并使用 const [number，name] 当即对这对数组进行解构。

以相同的方式能够遍历 Set 的项：

const colors = new Set(['white', 'blue', 'red', 'white']);

for (color of colors) {
  console.log(color);
}
// 'white'
// 'blue'
// 'red'

6. 迭代普通的JavaScript对象

尝试遍历普通JS对象的属性/值老是很痛苦。过去，我一般使用 Object.keys() 获取对象的键，而后使用 forEach 来迭代键数组。【译者：这不表明本人观点，我比较喜欢用 for...in 遍历对象】

const person = {
  name: 'John Smith',
  job: 'agent'
};

Object.keys(person).forEach(prop => {
  console.log(prop, person[prop]);
});
// 'name', 'John Smith'
// 'job', 'agent'

新的 Object.entries() 函数与 for...of 组合使用是个不错的选择：

const person = {
  name: 'John Smith',
  job: 'agent'
};

for (const [prop, value] of Object.entries(person)) {
  console.log(prop, value);
}
// 'name', 'John Smith'
// 'job', 'agent'

Object.entries(person) 返回一个键和值的元组数组：[[''name'，'John Smith']，['job'，'agent']]。而后，使用 for...of 循环遍历数组，并将每一个元组解构为 const [prop，value]。

7. 遍历DOM集合

你可能知道 HTMLCollection 使人沮丧。主要是由于 HTMLCollection 是一个类数组的对象（而不是常规数组），因此咱们没法使用数组的方法。

例如，每一个 DOM 元素的 children 属性都是 HTMLCollection 。好在 for...of 能够在相似数组的对象上进行迭代，所以咱们能够轻松地迭代 children：

const children = document.body.children;

for (const child of children) {
  console.log(child); // logs each child of <body>
}

此外，for...of 能够迭代 NodeList 集合（可迭代）。例如，函数 document.querySelectorAll(query) 返回一个 NodeList：

const allImages = document.querySelectorAll('img');

for (const image of allImages) {
  console.log(image); // log each image in the document
}

若是你想遍历 DOM 中的不一样种类的集合，那么 for...of 语句是一个不错的选择。

8. 性能

迭代大型数组时，for...of 的执行速度可能会比经典方法慢：

const a = [/* big array */];
for (let i = 0; i < a.length; i++) {
  console.log(a[i]);
}

在每次迭代中调用迭代器比经过增长索引访问的开销更大。可是，这种细微差异在使用大型数组的应用程序中以及性能相当重要的应用程序中很是重要，不过这种状况不多发生。

9. 总结

为何说 for...of 是一颗宝石，由于：

它简明扼要
它接受迭代器，包括数组，字符串，Set，Map，DOM集合
它接受类数组对象
迭代的项目能够在就地解构。

你首选的迭代数组项的方式是什么？

最后：

原文地址: https://dmitripavlutin.com/ja...

点评：翻译得很烂，还不如机翻。哈哈哈哈。