ECMAScript 2018：为什么你需要使用 Object.values()?-JavaScript中文网-JavaScript教程资源分享门户

在现代的前端开发中，JavaScript 已经成为了不可或缺的一部分。作为核心的 JavaScript 语言，随着 ECMAScript 的不断升级和更新，开发者们获得了更多的有用特性和功能。其中，ECMAScript 2018 引入的 Object.values() 就是一项非常有用的特性，它能够帮助我们快速地从对象中提取值。如果你还没有使用过 Object.values()，那么本篇文章就是为你准备的。我们将探讨 Object.values() 的定义以及其如何与现有的 JavaScript 特性协同工作，最终带给我们的是简化代码的美好。

基本概念

在深入探讨 Object.values() 之前，让我们先了解一下基本概念。

ECMAScript？

通常来说，我们所说的 Javascript 笼统地指的是一系列语言标准和核心 API。ECMAScript 是一项由 ECMA 国际发布的标准，它为 JavaScript 提供了语言的核心规范和特性。通过 ECMA 的协助，JavaScript 的标准得以发布和独立发展，使其成为现代 Web 开发的核心技术。

Object.values()？

Object.values() 是 ECMAScript 2018 引入的一项新方法，它可以提供一个对象中所有可枚举属性的值，返回的是这些值所组成的数组。这意味着，我们现在可以轻松地从对象中提取特定的值，避免了对对象属性的循环遍历操作。

基本用法

我们来看一下 Object.values() 的基本用法：

const obj = {name: 'Alice', age: 23, gender: 'female'};
const values = Object.values(obj);
console.log(values); // ['Alice', 23, 'female']

在上面的代码中，我们定义了一个名为 obj 的对象，并在其内部定义了三个属性：name、age 和 gender。之后我们调用了 Object.values(obj) 方法，提取出了该对象中所有可枚举属性的值，并将这些值存储在名为 values 的变量中。最后我们使用 console.log() 打印出了这些值所组成的数组。正如我们所看到的，Object.values() 的输出结果就是一组只包含值的数组。

我们也可以使用 for...of 循环语句来遍历 Object.values() 所返回的数组，如下所示：

for (const value of Object.values(obj)) {
  console.log(value);
}

在该示例中，我们使用 for...of 循环来遍历存储在 obj 中的所有可枚举属性，并对它们进行处理。由于 Object.values(obj) 会返回一个类似数组的对象，我们可以很方便地使用 for...of 循环语句来迭代其中的元素。

对象属性顺序

重要的一点是需要注意 Object.values() 的返回结果的顺序是有保证的，它的顺序是从 [[OwnPropertyKeys]] 中获取到 key，然后按照索引顺序 one by one 地生成 value。它与 Array.forEach() 的遍历对象的顺序是相同的。

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

结合其他语言特性

现在让我们看看 Object.values() 如何与其他 JavaScript 核心特性交互工作，以进一步简化我们的代码。

解构赋值

Object.values() 可以与解构赋值一起使用，让代码更加简洁。

const obj = {name: 'Alice', age: 23, gender: 'female'};
const [name, age, gender] = Object.values(obj);
console.log(name, age, gender); // 'Alice', 23, 'female'

在上述代码中，我们使用解构赋值将存储在 obj 对象中的值直接解构到了三个不同的变量中，而不需要再进行循环操作。这可以为我们的代码量大大减少。

Map 和 Set

Object.values() 方法还可以与 ECMAScript 2015 引入的 Map 和 Set 数据结构结合使用，以帮助我们更快地进行元素筛选。我们可以通过在 Map.values() 或 Set.values() 中使用 Object.values() 来提取 Map 或 Set 中所有元素的值，然后进行筛选。

const myMap = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
const filteredMap = [...myMap.values()].filter(value => value.length > 3);
console.log(filteredMap); // ['three']

上述代码展示了如何提取 Map 中所有值的简便方法。我们只需将 Map 的值传递给 Object.values()，然后使用 filter() 方法筛选长度大于 3 的元素，最后将过滤后的元素按数组形式返回。

总结

在现代的前端开发中，ECMAScript 的强大作用已经不言而喻。而 Object.values() 这样一个简单易用的方法，更是使我们在开发过程中体验到了更多的便利。

学习使用 Object.values() 不仅可以减少代码的编写量，加速开发进程，还可以使我们的代码更加整洁易于阅读和维护。所以，如果你还没有用上它，在看完本篇文章之后，请赶紧动手尝试一下吧！

示例代码

// javascriptcn.com 代码示例
const obj = {name: 'Alice', age: 23, gender: 'female'};
const values = Object.values(obj);
console.log(values); // ['Alice', 23, 'female']

for (const value of Object.values(obj)) {
  console.log(value);
}

const [name, age, gender] = Object.values(obj);
console.log(name, age, gender);

const myMap = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
const filteredMap = [...myMap.values()].filter(value => value.length > 3);
console.log(filteredMap); // ['three']

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652cad177d4982a6ebe4ddb0