为什么说JavaScript中for...of循环是一颗宝石

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

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

for...of 可以迭代数组、类数组以及任何可以迭代的对象(mapssetsDOM集合),并且,for...of 的语句还很短。

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

1. 数组迭代

for...of 最常见的应用是对数组项进行迭代。该循环可以高效得完成迭代,而无需其他变量来保持索引。

例如:

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

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

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

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

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

1.1 就地解构

首先,我们来看一下 for...of 循环的语法:

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、数组、类数组、setmap,同时仍可以享受 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 是一颗宝石,因为:

  • 它简明扼要
  • 它接受迭代器,包括数组,字符串,SetMap,DOM集合
  • 它接受类数组对象
  • 迭代的项目可以在就地解构。

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

最后:

原文地址: https://dmitripavlutin.com/javascript-for-of/

点评:翻译得很烂,还不如机翻。哈哈哈哈。


推荐文章
10个JavaScript难点

1.立即执行函数立即执行函数,即ImmediatelyInvokedFunctionExpression(IIFE),正如它的名字,就是创建函数的同时立即执行。它没有绑定任何事件,也无需等待任何异步操

JavaScript异步函数发展历程介绍

对大部分的JavaScript开发者而言,async函数是个新鲜事物,它的发展经历了一个漫长的旅程。在不久之前,我们还只能写回调函数来实现异步,然后Promise/A+标准出来了,这之后又出现了生成器

localstorage怎么用?(用法介绍)

一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(

JAVAScript学习-序列化、转义和函数

序列化:把JS对象转换成JSON格式JSON.stringify(obj)序列化 JSON.parse(str)反序列化varls=[1,2,3,4]; varls_st=JSON.stringify

POST 请求的三种常见数据提交格式

由于HTTP/1.1协议中并没有对请求使用什么编码方式进行规定,所以理论上开发者完全可以自己决定请求的Body体使用什么格式,当然实际上大家都还是用通用的那么几种编码方式来提交数据(生态很关键)。注:

javascript如何判断数组是否有key?

JavaScript中判断数组是否有key的方法:ary.hasOwnProperty(key);或obj.hasOwnProperty(key);另外使用key-valuepair对复合数组或对象进

用原生 JavaScript 实现十大 jQuery 函数

在本文中我将把自己最常用的jQuery函数转换为原生JavaScript。有时我需要创建一个简单的静态HTML或登录页面,而且不想引入任何库或其它依赖。对这种情况,我只使用普通的JavaScript来

javascript如何判断是否为空对象?

1、将对象转为字符串,然后判断是否等于'{}'如果等于'{}'则为空对象,如果不等于'{}'则不为空对象。varobj={}; varobjStr=JSON.stringify(obj); if(ob

5个JavaScript和9个JQuery经典面试题

五个JavaScript经典面试题1、Scope作用范围(function(){ vara=b=5; })(); console.log(b);什么会被打印在控制台上?回答上面的代码会打印5。这个问题

JavaScript设计模式

对于我过去构建的一些项目,我只使用Javascript模式是因为我认为它们看起来很漂亮,而不是因为它们为体验添加了任何有意义的东西。为什么考虑在Javascript中使用设计模式?模式是一种可重用的解

2020七夕情人节表白页面,祝你表白成功!!

话不多说,先看效果(网页地址):功能一个网页输入名称,生成带参数的网址。浏览器输入该网址,即可打开带有该名字的网页,图片轮播,还带有音乐哟(简单实现,本文不是技术软文,而是小工具推荐啊啊哈哈)(ps:

浅谈JavaScript中for…in和for…of的差异

for…in和for…of的差异1、遍历数组通常用for循环ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRig

如何使用JavaScript删除DOM节点的所有子元素?

下面我们通过代码示例来看看如何实现。示例1:使用removeChild()方法removeChild()方法可以从父节点删除子节点。 GetUpinMorning Dosomeexer

javascript中怎么删除cookie?

什么是cookie?Cookie是在您的计算机上存储在小的文本文件中的数据。当web服务器向浏览器发送网页后,连接被关闭,服务器会忘记用户的一切。Cookie是为了解决“如何记住用户信息”而发明的:●

浅JS中谈箭头函数和常规函数的区别

在JavaScript中,你可以通过多种方式去定义函数。第一种常用的方法是使用关键字function://函数声明 functiongreet(who){ return`Hello,${who}!`;

javascript常用正则表达式备忘录

匹配正则使用.test()方法lettestString="Myteststring"; lettestRegex=/string/; testRegex.test(testString);匹配多个模

你可能错过的现代 JS 特性

async/awaitProxies所以在本文中,我收集了一些现代JavaScript特性,这些特性在首次发布时并没有带来太多的关注。其中一些只是编码质量的提高,而另外一些确实很方便,可以减少很多代码

20个棘手的ES6面试问题来提高JavaScript技能

20156问题1:可以解释一下ES5和ES6的区别吗?主题:JavaScript难度:⭐⭐⭐ECMAScript5(ES5):ECMAScript的第五版,于2009年标准化,该标准已在所有现代浏览器

7种 JS 创建对象的经典方式(总结)

JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。接下来介绍七种非常经典的创建对象的方式,他们也

JavaScript什么是函数柯理化?(详细介绍)

函数柯里化js函数柯里化就带着问题出发,专门去学习了一下,做了一些整理。什么是函数柯里化?什么是函数柯里化?先看看维基百科如何解释:在计算机科学中,柯里化(英语:Currying),又译为卡瑞化或加里