ES12 for-in 和 Object.entries 遍历新加强的语法

随着前端技术的不断发展，新的语法和功能不断加入。ES12中，for-in 和 Object.entries 遍历新加强的语法，可以使我们更方便地遍历对象和数组，在实际开发中也能发挥很大的作用。

for-in 遍历对象

for-in 是遍历对象的语法，ES12中，它增加了对更多类型数据的支持。我们先来看一个简单的例子：

const obj = {
  name: 'Tom',
  age: 18,
  gender: 'male'
};

for (let prop in obj) {
  console.log(prop + ': ' + obj[prop])
}

输出结果为：

name: Tom
age: 18
gender: male

ES12 for-in 遍历对象的新加强语法，允许我们通过 Object.prototype 上的方法来防止遍历对象实例上的属性：

const obj = {
  name: 'Tom',
  age: 18,
  gender: 'male'
};

for (let prop in Object.getPrototypeOf(obj)) {
  console.log(prop + ': ' + Object.getPrototypeOf(obj)[prop]);
}

输出结果为：

constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()

通过这种方式，我们可以更加方便地遍历对象的属性，并且可以防止遍历到不期望的属性。

Object.entries 遍历对象和数组

Object.entries 是遍历对象和数组的语法，它返回一个由键值对组成的数组，其键值对的顺序与遍历顺序相同。我们可以通过 Object.entries 来遍历一个对象：

const person = { name: 'Tom', age: 18 };

for (let [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

输出结果为：

name: Tom
age: 18

同样的，我们可以通过 Object.entries 来遍历一个数组：

const arr = ['Tom', 18, 'male'];

for (let [index, value] of Object.entries(arr)) {
  console.log(`${index}: ${value}`);
}

输出结果为：

0: Tom
1: 18
2: male

通过使用 Object.entries，我们可以更加方便地遍历对象和数组，尤其是在需要遍历键值对时，使用 Object.entries 可以简化代码。

总结

ES12 for-in 和 Object.entries 遍历新加强的语法可以让我们更加方便地遍历对象和数组，并且增强了对更多类型数据的支持。在实际开发中，这些语法都可以发挥很大的作用。

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