在 ES7 中，JavaScript 新增了两个方法：Object.entries 和 Object.values，这两个方法可以帮助我们更方便地操作对象。本文将详细介绍这两个方法的用法、学习和指导意义，并提供示例代码。
Object.entries 方法
Object.entries 方法返回一个给定对象自身可枚举属性的键值对数组，其排列顺序与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for...in 循环还会枚举原型链中的属性）。
语法如下：
Object.entries(obj)
参数 obj 是要返回键值对的对象。
返回值是一个数组，其中每个元素都是一个形如 [key, value] 的数组，其中 key 是对象属性名，value 是属性值。
示例代码：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 42]]上面的代码中，Object.entries 返回了一个包含两个数组的数组，每个数组都包含一个键值对。
Object.entries 方法的实际应用场景比较多，比如：
- 将对象转换为 Map 对象
const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
console.log(map); // Map { 'foo' => 'bar', 'baz' => 42 }- 遍历对象的键值对
const obj = { foo: 'bar', baz: 42 };
for (const [key, value] of Object.entries(obj)) {
console.log(`${key}: ${value}`);
}
// Output:
// foo: bar
// baz: 42- 将对象转换为数组
const obj = { foo: 'bar', baz: 42 };
const arr = Object.entries(obj).map(([key, value]) => ({ key, value }));
console.log(arr); // [{ key: 'foo', value: 'bar' }, { key: 'baz', value: 42 }]Object.values 方法
Object.values 方法返回一个给定对象自身可枚举属性的值数组，其排列顺序与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for...in 循环还会枚举原型链中的属性）。
语法如下：
Object.values(obj)
参数 obj 是要返回值数组的对象。
返回值是一个数组，其中每个元素都是对象属性的值。
示例代码：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]上面的代码中，Object.values 返回了一个包含两个值的数组，分别是 'bar' 和 42。
Object.values 方法的实际应用场景比较多，比如：
- 遍历对象的值
const obj = { foo: 'bar', baz: 42 };
for (const value of Object.values(obj)) {
console.log(value);
}
// Output:
// bar
// 42- 判断对象是否包含某个值
const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj).includes('bar')); // true
console.log(Object.values(obj).includes(43)); // false- 将对象转换为数组
const obj = { foo: 'bar', baz: 42 };
const arr = Object.values(obj);
console.log(arr); // ['bar', 42]总结
Object.entries 和 Object.values 方法是 ES7 新增的两个方法，它们可以帮助我们更方便地操作对象。Object.entries 方法返回一个给定对象自身可枚举属性的键值对数组，Object.values 方法返回一个给定对象自身可枚举属性的值数组。这两个方法的实际应用场景比较多，比如将对象转换为 Map 对象、遍历对象的键值对或值、判断对象是否包含某个值等。对于前端开发人员来说，熟练掌握这两个方法可以提高开发效率，减少代码量，提升代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e230851886fbafa4f03380