近年来，JavaScript 社区经历了快速发展和变革，ECMAScript 6 和 ECMAScript 7 标准推出，带来了许多功能性和语法性的改进。其中，ES8（2017 年发布）中的 Object.entries() 和 Object.values() 方法是受到很多前端开发人员关注和探讨的功能之一。这两个方法可以帮助我们更轻松地处理 JSON 对象，并提供了一种更为便捷的方式来处理现代化程序设计的数据类型。本文将详细介绍这两个方法并提供相对应的学习和指导。
Object.entries()
Object.entries() 方法用于返回一个给定对象自身可枚举属性的键值对数组，其排列顺序与使用 for...in 循环遍历的结果一致。数组中的每个子元素为 [key, value] 的形式，其 key 为对象的属性名称，而 value 则为属性对应的值。Object.entries() 提供了一种方便的方式来将对象的属性和值转换为数组，这在一些文本处理和数据分析的场景中特别有用。
示例如下：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // output: [ [ 'foo', 'bar' ], [ 'baz', 42 ] ]我们可以使用 Object.entries() 方法将对象转换成数组，然后使用数组的 filter() 或 map() 方法来处理数据。例如，我们可以使用以下代码来筛选所有 key 值为字符串的属性：
const obj = { foo: 'bar', baz: 42 };
const newObj = Object.entries(obj).filter(([key]) => typeof key === 'string')
console.log(newObj); // output: [ [ 'foo', 'bar' ] ]此外，Object.entries() 方法还可用于计算对象的属性数量：
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj).length); // output: 3Object.values()
Object.values() 方法用于返回一个给定对象自身可枚举属性值的数组。其返回数组中的每个元素，即为对象的属性对应的值。Object.values() 和 Object.entries() 的作用类似，不同点在于 Object.entries() 返回键值对数组，而 Object.values() 只返回键值数组。
示例如下：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // output: [ 'bar', 42 ]我们可以使用 Object.values() 方法来遍历对象属性的值。例如，使用 reduce() 方法，我们可以计算对象属性的总和：
const obj = { a: 1, b: 2, c: 3 };
const sum = Object.values(obj).reduce((acc, val) => acc + val, 0);
console.log(sum); // output: 6Object.values() 和 Object.entries() 方法可以用于许多 JavaScript 应用程序的场景中，以简化对应的数据处理操作。同时，为了确保浏览器兼容性，我们应该在使用前检查该方法是否被当前浏览器支持。
结尾
本文中，我们介绍了 ES8 中的 Object.entries() 和 Object.values() 方法。这两个方法为处理 JSON 数据中的属性和值提供了一种快速和可靠的方式，并可用于许多现代化的应用程序设计。我们希望本文能够帮助您更好地理解和应用这两个方法，同时提高学习和指导的效果。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6781005847ca0036c85c3df9