网站首页 > 技术文章正文

通过几个事例，就可以说明 for...of 循环在 JS 是不可或缺

hmc789 2024-11-27 14:50:55 技术文章 2 ℃

请教大家一个问题：什么特性让该编程语言更加优秀?

个人见解：当该特性可以组合多个其他语言特性时。

JavaScript 中的for...of语句就是这种情况，可从ES2015开始使用。

for...of可以迭代数组，类似数组的对象以及通常所有可迭代的对象（map，set，DOM集合）。

接下我们通过事例来看看 for...of 一些有用的地方。

1. 数组的迭代

for...of的最常见应用是对数组项进行迭代。该循环可以很好且短暂地完成它，而无需其他变量来保持索引。

例如：

for...of循环遍历products，迭代的每项值分配给变量product。

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

const products = ['橘子', '苹果']

for (const [index, product] of products.entries()) {
  console.log(index, product)
}
// 0 "橘子"
// 1 "苹果"

在每次迭代中，products.entries()返回一对索引和值，它们由const [index，product]表达式解构。

1.1 就地解构

首先，让我们看一下 for...of 循环的语法：

for (LeftHandSideExpression of Expression) {
  // statements
}

LeftHandSideExpression表达式可以替换为赋值表达式左侧的任何内容。

在上面的例子中，LeftHandSideExpression是一个变量声明 const products，也可以是一个解构表达式 const [index, product]。

接着，我们遍历一系列对象，提取每个对象的属性name ：

const persons = [
  { name: '前端小智' },
  { name: '王大冶' }
]

for (const { name } of persons) {
  console.log(name)
}

// 前端小智
// 王大冶

循环for (const { name } of persons) 遍历person数组的对象，同时也就地解构( {name}) person对象的 name 属性值。

2. 类似数组遍历

for...of 除了可以遍历对象外，还可以遍历类似数组的对象。

arguments是函数体内的特殊变量，表示包含函数的所有参数，arguments也是一个类似数组对象。例如：

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

  return sum
}

sum(1, 2, 3) // 6

3.可迭代的简要概述

JavaScript中的可迭代对象是什么? 它是一个支持迭代协议的对象。

要检查数据类型是否可迭代，可以配合Symbol.iterator方法。例如，下面的演示显示了数组是可迭代的：

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

for...of接受可迭代,这很棒，因为这样，我们就可以遍历字符和数据结构（数组，类型化数组，集合，映射）等。

4. 字符串字符的遍历

JavaScript 中的原始类型字符串是可迭代的。因此，我们可以轻松地遍历字符串的字符。

const message = 'hello';

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

message包含一个字符串值。由于message也是可迭代的，因此for...of循环遍历message的字符。

5. Map 与 Set 迭代

Map是一个特殊的对象，它将一个键关联到一个值。键可以是任何基本类型(通常是字符串，但也可以是数字等)

幸运的是，Map也是可迭代的（在键/值对上进行迭代），所以使用for...of可以轻松地在所有键/值对上循环遍历。

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

for (const [numbe, name] of names) {
  console.log(number, name)
}

// 1 "one"
// 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()来遍历键数组：

const person = {
  name: '前端小智',
  job: '前端分享者'
}

Object.keys(person).forEach(prop => {
  console.log(prop, person[prop])
})

// name 前端小智
// job 前端分享者

幸运的是，新的Object.entries()函数与for...of组合提供了一个不错的选择：

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

7.遍历 DOM 集合

你可能知道在 DOM 中使用HTMLCollection是多么令人沮丧。因为HTMLCollection是一个类似数组的对象(而不是一个常规数组)，所以我们不能使用常规数组方法。

例如，每个 DOM 元素的children属性都是HTMLCollection。因此，由于for...of可以在类似数组的对象上进行迭代，因此我们可以轻松地迭代子代：

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的速度可能比 for 要慢：

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

在每次迭代中调用迭代器比通过增加索引访问该项目的开销更大。但是，这种细微差别在使用大型阵列的应用程序中以及性能至关重要的应用程序中非常重要，这种情况很少发生。

作者：Dmitri Pavlutin 译者：前端小智来源：Dmitri Pavlutin原文：https://dmitripavlutin.com/javascript-for-of/

上一篇：年近半百自学Python之流程控制break和continue
下一篇：三菱plc编程，FOR循环指令详解

网站首页 > 技术文章 正文