ECMAScript 2019：使用 ES6+ 中的 For…Of 循环遍历 JavaScript 数组和 Map

在 JavaScript 中，遍历数组和 Map 是非常常见的操作，而在 ES6+ 中，For…Of 循环成为了一种更加简洁高效的遍历方式。本文将介绍如何使用 For…Of 循环遍历 JavaScript 数组和 Map。

遍历数组

在 ES5 中，我们通常使用 For 循环或者 Array.forEach() 方法来遍历数组，但是这些方法在处理数组时存在一些限制。在 ES6 中，我们可以使用 For…Of 循环来遍历数组，它更加简洁高效。

下面是使用 For 循环遍历数组的示例：

var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

下面是使用 For…Of 循环遍历数组的示例：

var arr = [1, 2, 3, 4, 5];
for (var item of arr) {
  console.log(item);
}

可以看到，使用 For…Of 循环遍历数组的语法更加简洁明了，而且在处理一些复杂的数据结构时也更加方便。

遍历 Map

在 ES6 中，Map 是一种新的数据结构，它提供了一种更加灵活的键值对存储方式。在处理 Map 时，我们同样可以使用 For…Of 循环来遍历 Map 中的键值对。

下面是使用 For…Of 循环遍历 Map 的示例：

var map = new Map();
map.set('name', 'John');
map.set('age', 30);
map.set('gender', 'male');

for (var [key, value] of map) {
  console.log(key + ' = ' + value);
}

在遍历 Map 时，我们需要使用解构赋值来获取键值对中的键和值。

总结

在 ES6 中，For…Of 循环成为了一种更加简洁高效的遍历方式，它可以用来遍历数组和 Map。在处理一些复杂的数据结构时，使用 For…Of 循环可以让代码更加简洁明了，同时也提高了代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6510029695b1f8cacd8aa49c