介绍
JavaScript 编程语言不断发展,并在每一次迭代中添加新功能. 在 JavaScript 2017 (ES8)中,对象构造器包括两种新方法: Object.values()和 Object.entries()。
前提条件
要跟随本教程,你应该熟悉JavaScript对象. 你可以了解更多关于JavaScript对象在我们的 理解对象在JavaScript教程 。
您还应该舒适地使用 JavaScript 控制台在您喜爱的浏览器.本教程中的示例使用 Chrome 网络浏览器中的 JavaScript 控制台。
使用Object.values()方法
Object.values() 接收一个对象,并返回包含值的数组. 要演示,请在您偏好的 Web 浏览器中打开 JavaScript 控制台,并创建一个对象,其中包含以下行:
1const person = {
2 firstName: 'James',
3 lastName: 'Bond',
4 occupation: 'Classified'
5};
通过创建一个对象,您可以使用Object.values()方法从对象中获取值。
1console.log(Object.values(person));
1[secondary_label Output]
2(3) ['James', 'Bond', 'Classified']
您还可以将其存储在变量中,以便方便访问值:
1const personValues = Object.values(person);
2
3personValues;
1[secondary_label Output]
2(3) ['James', 'Bond', 'Classified']
<$>[注]
注: Object.values() 不遵循 原型链并且只重复直接存在于所提供对象中的值。
使用Object.entries()方法
与Objects.values()方法类似,Object.entries()方法会返回一个嵌入式数组,其中包含关键值对。 使用您创建的之前的人对象,您可以通过将对象作为参数输出关键和值:
1const person = {
2 firstName: 'James',
3 lastName: 'Bond',
4 occupation: 'Classified'
5};
6
7console.log(Object.entries(person));
1[secondary_label Output]
2(3) [Array(2), Array(2), Array(2)]
请注意,在控制台中,您的关键值对的值不会立即向您显示,您可以通过点击控制台中的输出来显示对的值:
1[secondary_label Output]
2(3) [Array(2), Array(2), Array(2)]
3 0: (2) ['firstName', 'James']
4 1: (2) ['lastName', 'Bond']
5 2: (2) ['occupation', 'Classified']
6 length: 3
您还可以使用 .forEach() 循环 和 array destructuring 来迭代关键值对,以将值输出到控制台:
1Object.entries(person).forEach(([key, value]) => console.log(`${key}: ${value}`));
1[secondary_label Output]
2 firstName: James
3 lastName: Bond
4 occupation: Classified
使用此方法,您现在知道如何访问和输出关键值对到控制台。
结论
在本教程中,你被介绍了两种新的JavaScript对象构建方法,你可以更深入地深入JavaScript编程语言,通过遵循我们的 如何编码在JavaScript教程系列。
如果您想了解更多关于其他对象方法的信息,请阅读我们在 如何在JavaScript中使用对象方法上的教程。