使用 ES8 标准的 Object.values() 实现 JavaScript 对象的遍历-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术快速发展，JavaScript 也在不断更新迭代。ES8 对于对象迭代提出了一种新的标准，即 Object.values()。使用 Object.values() 可以方便快捷地访问对象中的属性值，并遍历整个对象。本文将介绍 Object.values() 的使用方法和优势，并提供示例代码。

Object.values() 的使用方法

Object.values() 接受一个对象作为参数，并返回一个数组，该数组包含了该对象所有的属性值。下面是 Object.values() 的基本用法：

const obj = {a: 1, b: 2, c: 3};
const values = Object.values(obj);
console.log(values);  // [1, 2, 3]

在上面的例子中，首先创建了一个对象 obj，其中包含了三个属性 a、b、c，然后使用 Object.values() 方法获取了该对象所有的属性值，并将其存储在 values 数组中。最后，使用 console.log() 打印出 values 数组，可以看到其中包含了 obj 对象的所有属性值。

除了基本用法之外，Object.values() 还可以与其他的数组方法结合使用，如 map()、filter()、reduce() 等。下面是一个使用 map() 方法的实例：

const obj = {a: 1, b: 2, c: 3};
const doubleValues = Object.values(obj).map(value => value * 2);
console.log(doubleValues);  // [2, 4, 6]

在上面的例子中，首先使用 Object.values() 获取了对象 obj 的所有属性值，并将其存储在数组中。然后，使用 map() 方法对该数组中的每个元素进行操作，将每个元素的值乘以2，最后将结果存储在 doubleValues 数组中。

Object.values() 的优势

Object.values() 方法在遍历对象时具有许多优势，包括以下几点：

1. 简化代码量

使用 Object.values() 方法可以轻松地获取对象中的所有属性值，而不必写复杂的循环语句来遍历对象。这可以极大地简化代码量，增加代码的可读性和可维护性。

2. 提高代码运行速度

使用 Object.values() 方法可以避免使用 for...in 循环语句时的一些性能问题。for...in 循环语句会遍历对象的所有属性，包括原型链上的属性和不能枚举的属性，从而导致代码的运行速度变慢。而 Object.values() 方法只会访问对象本身的属性，并且只返回可枚举的属性值，这可以提高代码的运行速度。

3. 避免属性的顺序问题

当使用 for...in 循环语句遍历一个对象时，获得的属性值的顺序是不确定的。而使用 Object.values() 方法可以保证属性值的顺序与创建时的顺序相同。这对于一些需要保证属性顺序的场景非常重要。

Object.values() 的示例代码

下面是一些使用 Object.values() 的示例代码，以帮助读者更好地理解其使用方法和优势：

1. 找出对象中所有的偶数

const obj = {a: 1, b: 2, c: 3, d: 4};
const evenValues = Object.values(obj).filter(value => value % 2 === 0);
console.log(evenValues);  // [2, 4]

在上面的例子中，首先创建了一个对象 obj，其中包含了四个属性 a、b、c、d，然后使用 Object.values() 方法获取了该对象所有的属性值，并使用 filter() 方法筛选出了其中所有的偶数。最后，使用 console.log() 打印出筛选结果，可以看到其中包含了所有的偶数值。

2. 计算对象中所有属性值的平均值

const obj = {a: 1, b: 2, c: 3};
const averageValue = Object.values(obj).reduce((sum, value) => sum + value, 0) / Object.keys(obj).length;
console.log(averageValue);  // 2

在上面的例子中，首先创建了一个对象 obj，其中包含了三个属性 a、b、c，然后使用 Object.values() 方法获取了该对象所有属性的值，并使用 reduce() 方法对这些值进行求和，并除以属性数量得到平均值。最后，使用 console.log() 打印出平均值，可以看到其值为2。

总结

本文介绍了使用 ES8 标准的 Object.values() 方法来遍历 JavaScript 对象的基本用法和优势。Object.values() 方法可以方便快捷地获取对象中的属性值，并遍历整个对象，避免了一些性能问题和属性顺序问题，提高了代码的可读性和可维护性。同时，本文还提供了使用 Object.values() 的示例代码，希望读者能够通过本文了解 Object.values() 的使用方法和优势，并将其应用于实际开发中。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64c3875b83d39b48817891ee

使用 ES8 标准的 Object.values() 实现 JavaScript 对象的遍历