在 ES8 中,JavaScript 新增了 Object.values()
和 Object.entries()
方法。这两个方法可以使我们更方便地操作对象和数组,提高了开发效率和代码的可读性。
Object.values()
Object.values()
方法返回一个给定对象所有可枚举属性值的数组。简单来说,就是将对象的属性值转化成一个数组。这个方法返回的属性值数组的顺序是和对象属性枚举的顺序一样。
const obj = { foo: "bar", baz: 42 }; console.log(Object.values(obj)); // ["bar", 42]
如果给定的对象是 null 或 undefined,则会抛出 TypeError 异常。
console.log(Object.values(null)); // TypeError: Object.values called on non-object
虽然值的顺序与对象属性的枚举顺序一致,但这并不意味着它们具有相同的顺序。对象的属性是无序的,这意味着您不能信赖它们枚举的顺序。请不要使用枚举顺序做出基于数组顺序的计算和判断。
const obj = { 100: "a", 2: "b", 7: "c" }; console.log(Object.values(obj)); // ["b", "c", "a"],顺序不一定与属性的顺序相同
Object.entries()
Object.entries()
方法返回一个给定对象自身可枚举属性的键值对数组,这个数组的顺序与 for...in
循环遍历该对象时返回的顺序一致。
const obj = { foo: "bar", baz: 42 }; console.log(Object.entries(obj)); // [["foo", "bar"], ["baz", 42]]
该方法返回的数组中的每个元素都是一个长度为 2 的数组,数组的第一个元素是属性的键名,第二个元素是对应的属性值。如果给定的对象是 null 或 undefined,则会抛出 TypeError 异常。
console.log(Object.entries(null)); // TypeError: Object.entries called on non-object
注意,这个方法返回的属性值数组的顺序是和对象属性枚举的顺序一样,这并不意味着它们具有相同的顺序。
const obj = { 100: "a", 2: "b", 7: "c" }; console.log(Object.entries(obj)); // [["2", "b"], ["7", "c"], ["100", "a"]]
应用场景
这两个方法非常方便,在许多场景下能帮助我们提高开发效率。以下是一些常见的应用场景:
转化对象为数组
我们经常需要将一个对象转化为数组来进行后续操作。例如,我们需要使用 map()
和 filter()
等方法对对象进行操作,但这些方法只能用在数组上。此时,Object.values()
方法可以帮助我们将对象转化为数组。
const obj = { a: 1, b: 2, c: 3 }; const arr = Object.values(obj); console.log(arr); // [1, 2, 3]
循环遍历对象
在循环遍历对象时,我们经常需要同时获取键名和键值。使用 Object.entries()
方法,我们可以很方便地实现这一点。
const obj = { foo: "bar", baz: 42 }; for (const [key, value] of Object.entries(obj)) { console.log(`${key}: ${value}`); } // "foo: bar" // "baz: 42"
查找键名或键值
在查找对象时,我们需要知道对象的某个属性的键名或键值。使用 Object.entries()
方法,我们可以很方便地实现这一点。
const obj = { foo: "bar", baz: 42 }; const result = Object.entries(obj).find(([key, value]) => key === "foo"); console.log(result); // ["foo", "bar"]
总结
Object.values()
和 Object.entries()
是 ES8 中新增的两个非常有用的方法,它们可以让我们在开发过程中更便捷地操作对象和数组。借助这两个方法,我们可以快速地将一个对象转化为数组、循环遍历对象,并进行查找键名或键值等操作。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/645b4354968c7c53b0d9caee