在 ECMAScript 2017 的新特性中,Object 对象增加了两种方法:Object.values()
和 Object.entries()
。这两个方法都会返回对象中某些属性的值或键值对组成的数组。下面将详细介绍它们的用法、注意事项以及示例代码。
Object.values()
Object.values()
方法返回对象自身可枚举属性的值,并以数组形式返回。数组元素的顺序与通过 for...in
循环遍历对象时返回的顺序相同,即首先为数字类型的属性名按升序排列,然后是字符串类型的属性名按添加顺序排列。以下是该方法的语法:
------------------
其中,obj
表示要提取值的对象。
----- --- - - -- ------ -- --- -- ----- -- -------------------------------- -- ------- --- ------
需要注意的是,Object.values()
方法只返回对象自身的属性值,不包括从原型链上继承的属性值。同时,该方法仅适用于具有可枚举属性的对象。
Object.entries()
Object.entries()
方法返回一个给定对象的所有键值对数组,该数组的顺序与遍历该对象时的顺序相同(和 Object.values()
方法一致)。每个元素都是由键和与其对应的值组成的两个元素的数组。以下是该方法的语法:
-------------------
其中,obj
表示要提取键值对的对象。
----- --- - - -- ------ -- --- -- ----- -- --------------------------------- -- ------ ------- ----- ---- ----- -------
同样需要注意的是,Object.entries()
方法只返回对象自身可枚举属性的键值对数组,并不包括继承属性。
总结
Object.values()
方法返回一个由对象属性值组成的数组。Object.entries()
方法返回一个由对象的可枚举属性键值对组成的数组。- 这两个方法都仅适用于具有可枚举属性的对象。
使用这两个方法可以方便地轻松获取对象的属性值或键值对。比如在 React 中渲染一个列表时,我们可以使用 Object.entries()
方法来将一个包含多个对象的数组转换为一个包含多个组件的数组。下面就是一个简单的例子:
----- ---- - - - --- -- ----- ---- -- - --- -- ----- ---- -- - --- -- ----- ---- - -- -------- ------------ - ------ ------------------------------- ------- -- - --------- -------------- ----------------- -- --- -
在上面的例子中,Object.entries(data)
将 data
数组转换为一个由键值对组成的数组,然后我们再使用 Array.map()
方法将其转换为一个包含多个 React 组件的数组,从而实现了列表的渲染。
除了上述用法,Object.values()
和 Object.entries()
方法还能帮助我们更加方便地实现对象的拷贝、比较和过滤等操作,应用场景非常广泛。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/659fad69add4f0e0ff8356dd