深入理解 ES8 中的 Object.entries() 方法-JavaScript中文网-JavaScript教程资源分享门户

在 ES8 中，新增了一个 Object.entries() 方法，用于返回一个给定对象自身可枚举属性的键值对数组。该方法的使用场景非常广泛，可以用于对象的遍历、过滤、排序等操作，本文将深入探讨 Object.entries() 方法的使用、特点以及实际应用。

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

Object.entries() 方法接收一个对象作为参数，返回一个由键值对组成的数组。具体来说，每个键值对都是一个长度为 2 的数组，第一个元素是属性名，第二个元素是属性值。示例如下：

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

需要注意的是，Object.entries() 方法只返回自身可枚举属性的键值对，不包括继承的属性和不可枚举属性。如果需要获取所有属性的键值对，可以使用 Object.getOwnPropertyNames() 方法获取所有属性名，再结合 Object.getOwnPropertyDescriptor() 方法获取属性描述符，从而得到属性的键值对。

Object.entries() 方法的特点

Object.entries() 方法具有以下特点：

返回的数组元素顺序与对象属性的遍历顺序一致。即使属性名是数字类型，也会按照数字大小排序。

const obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(obj)); // [['2', 'b'], ['7', 'c'], ['100', 'a']]

返回的数组元素是由键值对组成的数组，而不是对象。

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

返回的数组元素是可迭代的，可以使用 for...of 循环遍历。

const obj = { foo: 'bar', baz: 42 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// foo: bar
// baz: 42

Object.entries() 方法的实际应用

Object.entries() 方法在实际开发中有很多应用场景，这里介绍几个常见的应用。

对象的遍历

使用 for...of 循环配合 Object.entries() 方法可以方便地遍历对象的属性。

const obj = { foo: 'bar', baz: 42 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// foo: bar
// baz: 42

对象的过滤

可以使用 Array.prototype.filter() 方法对 Object.entries() 方法返回的数组进行过滤，从而得到符合条件的属性。

const obj = { foo: 'bar', baz: 42, qux: 'quux' };
const filteredEntries = Object.entries(obj).filter(([key, value]) => typeof value === 'string');
const filteredObj = Object.fromEntries(filteredEntries);
console.log(filteredObj); // { foo: 'bar', qux: 'quux' }

对象的排序

可以使用 Array.prototype.sort() 方法对 Object.entries() 方法返回的数组进行排序，从而得到按照属性名或属性值排序的对象。

// javascriptcn.com 代码示例
const obj = { 100: 'a', 2: 'b', 7: 'c' };

// 按照属性名排序
const sortedEntriesByKey = Object.entries(obj).sort(([keyA], [keyB]) => keyA - keyB);
const sortedObjByKey = Object.fromEntries(sortedEntriesByKey);
console.log(sortedObjByKey); // { '2': 'b', '7': 'c', '100': 'a' }

// 按照属性值排序
const sortedEntriesByValue = Object.entries(obj).sort(([, valueA], [, valueB]) => valueA.localeCompare(valueB));
const sortedObjByValue = Object.fromEntries(sortedEntriesByValue);
console.log(sortedObjByValue); // { '100': 'a', '2': 'b', '7': 'c' }

总结

Object.entries() 方法是 ES8 中新增的一个方法，用于返回一个给定对象自身可枚举属性的键值对数组。该方法具有返回数组元素顺序与对象属性的遍历顺序一致、返回的数组元素是由键值对组成的数组、返回的数组元素是可迭代的等特点，可以用于对象的遍历、过滤、排序等操作。在实际开发中，Object.entries() 方法有很多应用场景，可以大大提高开发效率。

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