ECMAScript 2017（ES8）：Object.values() 方法及其用法

ECMAScript 2017（简称 ES8）是JavaScript语言的最新标准，其中引入了许多新的方法和语言特性。其中之一就是Object.values()方法，它允许我们获取一个对象的所有属性值，并将它们作为一个数组返回。本文将详细介绍Object.values()方法的用法和示例，帮助您更好地学习和使用这个新特性。

Object.values() 方法的语法

Object.values()方法是一个静态方法，它可以通过Object构造函数直接调用。它的语法如下所示：

Object.values(obj)

其中，obj表示要获取属性值的目标对象。调用该方法会返回一个包含目标对象所有属性值的数组。

Object.values() 方法的用途

Object.values() 方法主要有以下用途：

1. 获取对象的所有属性值

Object.values() 方法可以快速方便地获取一个对象的所有属性值。以下是一个简单的示例，演示如何使用这个方法来获取一个对象的所有属性值：

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);

console.log(values); // [1, 2, 3]

1. 遍历进行对象属性值操作

Object.values() 方法还可以用于遍历对象的属性值，并对它们进行操作。例如，在以下示例中，我们使用Object.values() 方法遍历并将每个值加倍：

const obj = { a: 1, b: 2, c: 3 };

Object.values(obj).forEach(value => {
    console.log(value * 2); // 2, 4, 6
});

1. 使用对象的属性值进行过滤操作

Object.values() 方法还可以用于对对象的属性值进行过滤操作。例如，在以下示例中，我们使用Object.values()方法将数组中所有小于等于5的元素筛选出来：

const obj = { a: 1, b: 2, c: 3, d: 6, e: 4, f: 5 };
const filteredValues = Object.values(obj).filter(value => value <= 5);

console.log(filteredValues); // [1, 2, 3, 4, 5]

Object.values() 方法示例

接下来，我们将演示一些更多的实际示例，以帮助您更好地理解和使用Object.values()方法。

示例1：获取对象中所有布尔类型的属性值

const obj = { a: true, b: 1, c: "Hello", d: false, e: 0 };

const booleanValues = Object.values(obj).filter(value => typeof value === "boolean");

console.log(booleanValues); // [true, false]

示例2：在HTML元素中显示对象属性值

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

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

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

示例3：将集合对象转换为二维数组

const obj = { a: { x: 1, y: 2 }, b: { x: 3, y: 4 }, c: { x: 5, y: 6 } };

const twoDimensionalArray = Object.values(obj).map(value => [value.x, value.y]);

console.log(twoDimensionalArray); // [[1, 2], [3, 4], [5, 6]]

总结

以上简单介绍了Object.values() 方法的语法、用途和示例。如您所见，Object.values()方法是ES8中非常有用的方法，它可以更轻松、快捷地处理对象的属性值，提高代码的效率和可读性。希望这篇文章对您有所帮助，同时您也可以通过实践更好地掌握这个强大的新特性。

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