浅谈 ES8 中的 Object.values() 方法及其实用场景-JavaScript中文网-JavaScript教程资源分享门户

在 ES8 中，引入了 Object.values() 方法，是一种新的方法来获取对象的所有值并返回一个数组。该方法可以帮助前端开发人员更方便地对对象进行处理和操作，同时也可以使代码的可读性更加高效。

什么是 Object.values()

Object.values() 是一个静态方法，用于返回一个给定对象的所有可枚举属性值的数组。该数组中的元素排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致。

Object.values() 使用实例

例如，我们有这样一个简单的对象:

const obj = { 
    name: "Maggie", 
    age: 23, 
    gender: "female" 
};

可以使用 Object.values() 方法来获取该对象所有属性值的数组，如下所示:

const values = Object.values(obj);
console.log(values); // [ "Maggie", 23, "female" ]

此外，也可以通过 for...of 循环遍历该数组，来对每个属性值进行操作：

for (let val of values) {
    console.log(val);
}
// 分别打印出 "Maggie"、23 和 "female"

Object.values() 的实用场景

1. 转换对象为数组

前端开发中，往往需要将对象转为数组。利用 Object.values() 方法可以快速地将对象的所有值转换为数组，具有很高的实用性。例如，可以将下面这个对象转换为数组：

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

2. 计算对象属性总和

有时候我们需要计算一个对象中某些属性的总和。可以通过 Object.values() 方法来实现：

const salaries = { John: 8000, Anne: 6000, Lisa: 9500 };
const totalSum = Object.values(salaries).reduce((acc, value) => acc + value, 0);
console.log(totalSum); // 23500

3. 筛选对象属性

利用 Object.entries() 和 Array.prototype.reduce() 可以实现过滤掉对象中的某些属性：

-- -------------------- ---- -------
----- --- - -
    ----- ----------
    ---- ---
    ---- -------
    ---------- ----
--

----- ------ - ----------------------------------- ----- ------- -- -
    -- ---- --- ----- -- --- --- -------------
        ----------- - ------
    -
    ------ -------
-- ----

-- ------ ------ - ----- --

-------------------- -- - ----- ---------- ---- -- -

结论

使用 Object.values() 方法可以让前端开发人员操作对象时更加方便，同时也可以提高代码的可读性。它的实用场景包括转换对象为数组、计算对象属性总和和筛选对象属性等。在你的项目中，可以根据不同的需求使用它，提高开发效率。

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