ES6循环遍历对象 - JavaScript

在ES6之前，我们遍历对象时通常使用for-in循环。但是，for-in循环有一个缺陷就是它遍历对象的原型链上所有的属性，而且属性的返回顺序并不是按照定义时的顺序。

从ES6开始，我们可以使用更方便的方法来遍历对象，这就是for-of循环和Object.keys()方法。下面我们将详细讲解如何使用这些方法。

for-of循环

for-of循环是一个全新的循环语句，它可以用来遍历可迭代对象，如数组、字符串、Map、Set等。另外，for-of循环也可以遍历新的迭代器接口，如Generator等。

以下是一个使用for-of循环遍历数组的例子：

const arr = [1, 2, 3];

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

//输出:
//1
//2
//3

for-of循环语法与for-in循环语法相似，但是for-of循环遍历的是属性值而不是属性名。在上述的例子中，item变量存储的是数组中的每个元素值。

我们同样可以使用for-of循环来遍历ES6的Map和Set对象：

const map = new Map();
map.set('name', '张三');
map.set('age', 18);

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

//输出:
//name 张三
//age 18

const set = new Set(['a', 'b', 'c']);

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

//输出:
//a
//b
//c

当然，我们也可以使用for-of来遍历普通的属性值：

const obj = {
  name: '张三',
  age: 18
}

for (const value of Object.values(obj)) {
  console.log(value);
}

//输出:
//张三
//18

Object.keys()方法

Object.keys()方法可以用来获取一个对象的所有可枚举属性。该方法返回一个数组，数组中的元素是一个个属性名。

以下是一个使用Object.keys()方法来遍历对象的例子：

const obj = {
  name: '张三',
  age: 18
}

for (const key of Object.keys(obj)) {
  console.log(key, obj[key]);
}

//输出:
//name 张三
//age 18

在上述的例子中，我们通过Object.keys()方法获取了obj对象的所有属性名，然后使用for-of循环来遍历属性名，并通过属性名访问了对应的属性值。

需要注意的是，Object.keys()方法只会获取对象自身的可枚举属性，而不会遍历原型链上的属性。

总结

ES6为我们提供了两种方便的遍历对象的方法：for-of循环和Object.keys()方法。for-of循环适用于遍历可迭代对象和新的迭代器接口，而Object.keys()方法适用于遍历普通的对象属性。

在实际开发中，我们可以根据实际情况选择使用哪种遍历对象的方法。