为什么说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 框架

10.AureliaAurelia是一个开源的现代JavaScript模块工具箱,其有助于Web和移动应用程序的发展。它也被称为“下一代框架”。该框架自推出以来一直受到广泛认可。Fileee、Fres

什么是LiveScript?

LiveScript的创造者是BrendanEich,首次在NetScape2中实现。它的目的是创建一门足够简单的语言让开发者能容易地为网页增加交互,只要把代码拷贝过来调整一下就可以。很多LiveSc

如何在 JS 循环中正确使用 async 与 await

asyncawaitawait在本文中,分享一些在如果循环中使用await值得注意的问题。准备一个例子对于这篇文章,假设你想从水果篮中获取水果的数量。constfruitBasket={ apple:

JavaScript中的NaN(非数字)

JavaScript中的number(数字)类型包含整数和浮点数:constinteger=4; constfloat=1.5; typeofinteger;//=>'number' typeoff

javascript怎么读取文本文件?

JavaScript读取文本文件的方法:第一步:创建一个可以将文件翻译成文件流的对象。Varfso=newActiveXObject(Scripting.FileSystemObject);第二步:用

理解setTimeout和setInterval

setTimeout()setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行。它返回一个整数,表示定时器的编号,这个值可以传递给clearTimeout()用于取消这个函数的执行

JavaScript如何添加注释?

JavaScript注释的优点JavaScript注释主要有两个优点。● 使代码易于理解:它可用于详细说明代码,以便最终用户可以轻松理解代码。● 避免不必要的代码:它也可以用来避免代码被执行。有时,我

WebView与JavaScript交互的方法

如何实现实现Java和js交互十分便捷。通常只需要以下几步:WebView开启JavaScript脚本执行WebView设置供JavaScript调用的交互接口。客户端和网页端编写调用对方的代码。示例

函数调用的三种方式是什么?

函数的三种调用方式第一种:函数立即调用执行模式。这里面的this指向window;functionadd(a,b){ console.log(this); returna+b; } add();//t

javascript是用来干什么的?

JavaScript的一些用途:1、JavaScript为HTML设计师提供了一种编程工具,HTML创作者往往都不是程序员,但是JavaScript却是一种只拥有极其简单的语法的脚本语言!几乎每个人都

select发展史 超强第1/2页

select,option{background-color:lime} 1 2 不是一样的嘛 select,option{background-color:lime;font

JavaScript 中常见设计模式整理

JavaScript中常见设计模式单例模式策略模式代理模式迭代器模式发布-订阅模式命令模式组合模式模板方法模式享元模式职责链模式中介者模式装饰者模式状态模式适配者模式观察者模式各设计模式关键词看完了上

JavaScript中null代表什么?

在JavaScript中null表示"什么都没有"。null是一个只有一个值的特殊类型。表示一个空对象引用。null值表示一个指向不存在或无效的对象或地址引用。即使它指向不存在的东西,也没什么,它是一

ES6中module的几种使用方法(备忘单)

这是一份备忘单,展示了不同的导出方式和相应的导入方式。它实际上可分为3种类型:名称,默认值和列表。//命名导入/导出 exportconstname='value' import{name}from'

JavaScript错误处理方法介绍

1、try-catchECMA-262第3版引入了try-catch语句,基本的语法如下所示:try{ } catch(error){ }如果try块中的任何代码发生错误,就会立即执行catch块。此

ES10 特性的完整指南

Object.fromEntries在新的语言特性方面,ES10不如ES6重要,但它确实添加了一些有趣的特性(其中一些功能目前还无法在浏览器中工作:2019/02/21)在ES6中,箭头函数无疑是最受

JavaScript中缩短箭头函数的小诀窍

使用箭头语法,你可以定义比函数表达式短的函数。在某些情况下,你可以完全省略:参数括号(param1,param2)return关键字甚至大括号{}。下面就让我们来探讨一下如何使箭头函数简洁明了、易于阅

如何使用Anime.js创建Web动画

Anime.js唯一能阻止您立即使用anime.js的是它最小的、类似于禅的文档。我喜欢简洁、结构化、优雅的方法,但我认为更详细的解释会有帮助。我将在本教程中尝试解决此问题。Anime.js入门首先,

原生javascript是什么意思?

原生JavaScript:原生JS是指遵循ECMAscript标准的javascript,不同于微软的jscript也不依赖于任何框架,依托于浏览器标准引擎的脚本语言。原生JavaScript的意义:

JavaScript有哪些输出方式?

javascript没有任何打印或输出的函数,可以通过不同的方式输出数据。使用window.alert()弹出警告框使用document.write()方法将内容写到html文档中使用document