在 ECMAScript 2017 中，新增了 Object.entries() 和 Object.values() 这两个方法，这两个方法极大地简化了我们在工程上的代码编写，让我们更加容易地优化代码。本文将详细介绍 Object.entries() 和 Object.values() 这两个方法的使用，以及如何利用这两个方法进行代码优化。
Object.entries()
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。该数组的元素是数组，其中第一个元素表示属性名，第二个元素表示对应属性的值。
Object.entries() 的使用方式如下：
Object.entries(obj)
其中，obj 为需要将其转化为数组的对象。
以下是示例代码，演示 Object.entries() 的基本用法：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 42]]在上面的代码中，我们将 obj 转化为数组，其中 foo 和 baz 这两个属性被转化为了键值对数组中的元素。
Object.entries() 最常见的使用场景之一是遍历对象属性。以下是示例代码：
const obj = { foo: 'bar', baz: 42 };
for (const [key, value] of Object.entries(obj)) {
console.log(`${key}: ${value}`);
}
// Output:
// "foo: bar"
// "baz: 42"在上面的代码中，我们遍历了 obj 的属性，并在控制台中打印了每个属性名和属性值。
Object.values()
Object.values() 方法和 Object.entries() 类似，它也是返回一个给定对象自身的可枚举属性的值的数组。
Object.values() 的使用方式如下：
Object.values(obj)
其中，obj 为需要将其转化为数组的对象。
以下是示例代码，演示 Object.values() 的基本用法：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]在上面的代码中，我们将 obj 转化为数组，其中的属性值被转化为了数组中的元素。
Object.values() 最常见的使用场景之一是遍历对象属性的值。以下是示例代码：
const obj = { foo: 'bar', baz: 42 };
for (const value of Object.values(obj)) {
console.log(value);
}
// Output:
// "bar"
// 42在上面的代码中，我们遍历了 obj 的属性值，并在控制台中打印了每个属性值。
利用 Object.entries() 和 Object.values() 进行代码优化
利用 Object.entries() 和 Object.values() 可以简化代码，并提高代码的可读性。以下是一个示例，展示如何使用 Object.entries() 和 Object.values() 简化代码：
优化前的代码
-- -------------------- ---- ------- ----- --- - - ---- ------ ---- -- -- ----- ---- - ----------------- ----- ------ - --- -------------------------- - ---------------------- --- -------------------- -- ------- ---
在这个示例中，我们需要将对象中的属性值转化为数组，并使用 forEach() 方法遍历每个属性。这种方式的代码行数较多，可读性也不是很高。
优化后的代码
const obj = { foo: 'bar', baz: 42 };
const values = Object.values(obj);
console.log(values); // ['bar', 42]在这个示例中，我们使用 Object.values() 直接将对象中的属性值转化为数组。这种方式的代码行数更少，可读性也更高。
结论
利用 ECMAScript 2017 中的 Object.entries() 和 Object.values() 方法，我们可以简化代码，并提高代码的可读性。请在实际的开发工作中尽量使用这两个方法，以获得更加高效和简洁的代码。
欢迎访问我的博客 https://juejin.cn/user/2858894285907256/posts，了解更多前端技术知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67527f498bd460d3ad94e2f6