解析 ES8 中新增的 Object.entries() 方法

在 ES8 中，新增了一种遍历对象的方法——Object.entries()。该方法的出现让开发者在处理对象时变得更加方便快捷。本文将详细介绍 Object.entries() 方法的使用方法以及其深入解析，希望对前端开发者们有所帮助。

什么是 Object.entries() 方法？

Object.entries() 方法用于返回一个给定对象的键值对数组。这个返回的数组中的元素是相对于该对象的可枚举属性，属性值的[[key，value]]三元组。返回的数组中值的顺序与使用 for...in 循环遍历该对象属性时的顺序相同。

Object.entries() 方法的使用方法

Object.entries() 方法可用于以下四个方面：

1. 获得对象属性的键值对数组

获得对象属性的键值对数组，其具体格式为[[key1，value1]，[key2，value2]，[key3，value3]......]

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj));  // [['foo', 'bar'], ['baz', 42]]

2. 遍历对象属性并返回相关数据

遍历对象属性并返回相关数据，例如获取所有年龄大于 20 岁的人的信息：

const people = { Tom: { age: 23, gender: 'male' }, Lucy: { age: 19, gender: 'female' }, Jack: { age: 30, gender: 'male' } };
const overTwenty = Object.entries(people).filter(([name, { age }]) => age > 20);
console.log(overTwenty); // [['Tom', { age: 23, gender: 'male' }], ['Jack', { age: 30, gender: 'male' }]]

3. 将对象属性转为 Map 类型

将对象属性转为 Map 类型：

const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
console.log(map); // Map { 'foo' => 'bar', 'baz' => 42 }

4. Object.entries() 的多层嵌套使用

直接利用 Object.entries() 进行多层嵌套：

const deepObj = {
  first: { a: 1 },
  second: { b: 2 }
};
console.log(Object.entries(deepObj)[1][1].b); // 2

Object.entries() 方法的使用指导意义

Object.entries() 方法的出现让开发者在处理对象时变得更加方便快捷。它可以帮助我们快速遍历属性，并返回数据，使我们的开发更加高效。

在使用该方法时需要注意的是，Object.entries() 方法会返回对象的每个可枚举属性，包括从属原型的属性。在遍历时还应注意该方法返回的数据结构是一个数组，需要根据实际情况进行数组的操作。

总结

Object.entries() 方法是 ES8 中的新方法，可用于获得对象属性的键值对数组、遍历对象属性并返回相关数据、将对象属性转为 Map 类型等。该方法的出现使开发者在处理对象时变得更加方便快捷，节省了开发时间。

在使用该方法时需要注意的是，Object.entries() 方法会返回对象的每个可枚举属性，包括从属原型的属性。在遍历时还应注意该方法返回的数据结构是一个数组，需要根据实际情况进行数组的操作。我们可以根据实际情况进行选择，使用 Object.entries() 方法使我们在处理对象时变得更加高效，也为我们开发提供了更多可能性。

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