ES6 for...of 循环的用法及实例教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

ES6 for...of 循环是 JavaScript 的新特性，它可以用来遍历可迭代（iterable）对象的元素。可迭代对象包括数组、字符串、Set 和 Map 等，但不包括普通的对象。在这篇文章中，我们将深入探讨 for...of 循环的用法及示例，以帮助你更好地理解并使用这一重要的新特性。

在介绍 for...of 循环之前，让我们先来了解一下 for...in 循环，它也是 JavaScript 的另一种循环类型。for...in 循环用于遍历对象的属性，但它不适用于遍历数组或字符串等可迭代对象。举个例子：

let obj = { a: 1, b: 2, c: 3 };
for (let prop in obj) {
  console.log(prop); // a, b, c
}

上面的代码将输出对象 obj 的所有属性。但如果我们想要遍历一个数组或字符串，就需要使用 for...of 循环了。

for...of 循环实际上是基于可迭代对象的迭代器（iterator）实现的。这个迭代器是一个对象，它定义了如何遍历可迭代对象中的元素。迭代器对象必须有名为 Symbol.iterator 的属性方法，该方法返回一个迭代器对象。

for...of 循环的语法如下所示：

for (let element of iterable) {
  // 循环体
}

其中，iterable 是一个可迭代对象，element 则是该对象中的元素。在循环过程中，element 逐个取出 iteratable 中的元素，直到所有元素都被遍历完毕。下面是一个使用 for...of 遍历数组的例子：

let arr = [1, 2, 3];
for (let element of arr) {
  console.log(element); // 1, 2, 3
}

现在让我们来看几个实例，以便更好地理解 for...of 循环。

我们可以使用 for...of 循环来遍历字符串中的每个字符。例如：

let str = 'Hello, world!';
for (let char of str) {
  console.log(char); // H, e, l, l, o, ,,  , w, o, r, l, d, !
}

for...of 循环也可以用于遍历数组。例如：

let arr = [1, 2, 3];
for (let element of arr) {
  console.log(element); // 1, 2, 3
}

适用于数组和字符串等可迭代对象的类型都是内置的。

ES6 中新引入了 Set 类型，它是一种集合类型，可以用来存储唯一的值，Set 类型也支持 for...of 循环。例如：

let set = new Set([1, 2, 3]);
for (let element of set) {
  console.log(element); // 1, 2, 3
}

ES6 中的 Map 类型是一种键值对的集合类型。使用 for...of 循环也可以遍历 Map 中的元素。例子如下：

let map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (let [key, value] of map) {
  console.log(`${key} -> ${value}`); // a -> 1, b -> 2, c -> 3
}

我们已经提到了，for...of 循环不适用于遍历对象的属性。但是，我们可以使用 Object.values() 方法来获取一个对象的所有属性值，并使用 for...of 循环来遍历这些属性值。例如：

let obj = { a: 1, b: 2, c: 3 };
for (let value of Object.values(obj)) {
  console.log(value); // 1, 2, 3
}

在本文中，我们深入学习了 for...of 循环的语法、用法及实例。for...of 循环是一个强大的特性，可以用来遍历各种类型的可迭代对象，包括字符串、数组、Set 和 Map 等。它让我们更加方便地处理数据，提高了编码效率和代码质量，值得开发者们深入学习和熟练掌握。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653213747d4982a6eb444050