在 JavaScript 的开发中,我们经常需要遍历对象的属性和值,以实现各种功能和逻辑。在 ES9 中,新增了 Object.values() 和 Object.entries() 两个方法,可以更方便地获取对象的属性值和键值对,提高了开发效率。
Object.values() 方法
Object.values() 方法返回一个数组,其中包含对象的所有属性值,顺序与对象的属性顺序一致。例如:
const obj = { a: "apple", b: "banana", c: "cat" }; const values = Object.values(obj); console.log(values); // ["apple", "banana", "cat"]
这个方法不仅适用于普通对象,也适用于数组和类数组对象。例如:
const arr = ["apple", "banana", "cat"]; const values = Object.values(arr); console.log(values); // ["apple", "banana", "cat"] const nodeList = document.querySelectorAll("p"); const values = Object.values(nodeList); console.log(values); // [p, p, p, p]
需要注意的是,如果传入的参数为 null 或 undefined,会抛出 TypeError 错误。另外,该方法不会遍历对象上的原型链。如果要获取到原型链上的属性值,需要自己手动实现遍历。
Object.entries() 方法
Object.entries() 方法返回一个数组,其中包含对象的所有键值对,每个键值对都是一个数组,第一个元素是键名,第二个元素是键值。例如:
const obj = { a: "apple", b: "banana", c: "cat" }; const entries = Object.entries(obj); console.log(entries); // [["a", "apple"], ["b", "banana"], ["c", "cat"]]
这个方法同样适用于普通对象、数组和类数组对象。例如:
const arr = ["apple", "banana", "cat"]; const entries = Object.entries(arr); console.log(entries); // [["0", "apple"], ["1", "banana"], ["2", "cat"]] const nodeList = document.querySelectorAll("p"); const entries = Object.entries(nodeList); console.log(entries); // [["0", p], ["1", p], ["2", p], ["3", p]]
同样要注意的是,如果传入的参数为 null 或 undefined,会抛出 TypeError 错误,而且该方法同样不会遍历对象上的原型链。
总结
Object.values() 和 Object.entries() 两个方法的使用,可以让我们更方便地获取对象的属性值和键值对。这个特性的引入,可以提高开发效率,简化代码实现流程。
需要注意的是,在使用这两个方法时,要格外注意传入参数的合法性,特别是在处理异步数据时更应如此。并且要牢记,这两个方法不会遍历对象上的原型链,如果需要获取原型链上的属性,需要自己手动实现遍历。
示例代码:
const obj = { a: "apple", b: "banana", c: "cat" }; const values = Object.values(obj); const entries = Object.entries(obj); console.log(values); // ["apple", "banana", "cat"] console.log(entries); // [["a", "apple"], ["b", "banana"], ["c", "cat"]]
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6519be7395b1f8cacd1ddbcb