合理使用 ES7 中的 for...of 和 for...in 循环-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，循环是一个基础且重要的部分。ES7 中引入的 for...of 和 for...in 循环提供了新的遍历方式，可以让我们更加高效和灵活地处理数据结构。但如果不理解其使用方式，就会导致代码出现错误，影响代码的可读性和性能。因此，在本文中，我们将详细介绍如何合理使用 ES7 中的 for...of 和 for...in 循环。

for...of 循环

for...of 循环提供了一种新的遍历方式，可以让我们更加简单和高效地遍历数组、类数组对象、字符串、集合和映射等数据结构。

数组的遍历

在传统的循环中，我们可以使用 for 循环和数组下标的方式遍历数组元素，代码如下：

const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

但使用 for...of 循环可以更加简单和高效，代码如下：

const arr = [1, 2, 3, 4, 5];

for (const item of arr) {
  console.log(item);
}

类数组对象的遍历

类数组对象是指拥有 length 属性和索引元素的对象，如 arguments 对象、NodeList 对象等。在传统的循环中，我们需要将类数组对象转换为数组对象，然后使用 for 循环和数组下标的方式遍历元素，代码如下：

// javascriptcn.com 代码示例
function sum() {
  let total = 0;
  const args = Array.prototype.slice.call(arguments);

  for (let i = 0; i < args.length; i++) {
    total += args[i];
  }
  
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 15

但使用 for...of 循环可以直接遍历类数组对象中的元素，代码如下：

// javascriptcn.com 代码示例
function sum() {
  let total = 0;

  for (const arg of arguments) {
    total += arg;
  }

  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 15

字符串的遍历

在传统的循环中，我们可以使用 for 循环和字符串下标的方式遍历字符串的字符，代码如下：

const str = 'hello world';

for (let i = 0; i < str.length; i++) {
  console.log(str[i]);
}

但使用 for...of 循环可以更加简单和高效，代码如下：

const str = 'hello world';

for (const char of str) {
  console.log(char);
}

集合和映射的遍历

集合和映射是 ES6 新增的数据结构，它们都具有迭代器（Iterator）接口。在 ES7 中，可以使用 for...of 循环遍历集合和映射中的元素，代码如下：

// javascriptcn.com 代码示例
const set = new Set([1, 2, 3, 4, 5]);

for (const item of set) {
  console.log(item);
}

const map = new Map([['name', 'Tom'], ['age', 18]]);

for (const [key, value] of map) {
  console.log(key, value);
}

for...in 循环

for...in 循环也是一种遍历方式，可以用来遍历对象的属性。但与 for...of 循环不同的是，for...in 循环遍历的是对象的可枚举属性，包括对象自身的属性和继承的属性。

遍历对象属性

在传统的循环中，我们可以使用 for...in 循环遍历对象的属性，代码如下：

// javascriptcn.com 代码示例
const person = {
  name: 'Tom',
  age: 18,
  gender: 'male'
};

for (const key in person) {
  console.log(key + ': ' + person[key]);
}

但需要注意的是，for...in 循环也会遍历对象继承的属性，例如 Object.prototype 上的 toString 方法，代码如下：

// javascriptcn.com 代码示例
const person = {
  name: 'Tom',
  age: 18,
  gender: 'male'
};

for (const key in person) {
  console.log(key + ': ' + person[key]);
}

如果只想遍历对象自身的属性，可以使用 Object.keys 方法获取对象的所有可枚举属性，然后使用 for...of 循环遍历属性，代码如下：

// javascriptcn.com 代码示例
const person = {
  name: 'Tom',
  age: 18,
  gender: 'male'
};

for (const key of Object.keys(person)) {
  console.log(key + ': ' + person[key]);
}

总结

在合理使用 ES7 中的 for...of 和 for...in 循环的过程中，需要注意以下几点：

for...of 循环只能遍历具有 Iterator 接口的数据结构；
for...in 循环遍历的是对象的可枚举属性，包括对象自身的属性和继承的属性；
在使用 for...in 循环遍历对象的同时要注意避免遍历对象原型上的属性；
在使用 for...of 循环遍历元素时，避免在循环体内修改被遍历的数据结构。

正确使用 for...of 和 for...in 循环将会大大提高代码效率和可读性，降低出错的概率。

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