ECMAScript 2017 (ES8) 中的 Object.values() 与 Object.entries() 详解
在前端开发中,JavaScript 一直是最重要的编程语言之一,而 ECMAScript(简称 ES)则是 JavaScript 的标准规范。ECMAScript 2017(简称 ES8)是 ES 标准的最新版本之一,其中引入了两个新的对象方法 Object.values() 和 Object.entries()。
本文将会对这两个新方法进行详细解释,并提供相应的代码示例,帮助读者更好地理解和掌握它们的使用。
- Object.values() 方法
Object.values() 方法用于返回一个对象中所有键值对的值,返回值为一个数组。这个数组的顺序是由输入对象的键值的插入顺序决定的。以下是该方法的语法:
------------------
其中,obj 是指需要返回其所有属性值的对象。
以下是一个简单的示例:
----- ------ - - ----- -------- ---- --- ----- ---- ----- -- ----- ------ - ---------------------- -------------------- -- -- --------- --- ---- ------
代码解析:
我们首先创建一个名为 person 的对象,该对象包含三个键值对:name、age 和 city。然后我们使用 Object.values(person) 方法获取该对象的所有属性值,并将其存储在名为 values 的数组中。最后,我们打印这个新数组的值。
该示例输出了指定对象 person 的所有属性值,即 "Alice"、25 和 "New York"。
- Object.entries() 方法
Object.entries() 方法用于返回一个对象中所有键值对的属性和值,返回值为一个二维数组。这个数组的顺序是由输入对象的键值的插入顺序决定的。以下是该方法的语法:
-------------------
其中,obj 是指需要返回其所有属性值和属性名的对象。
以下是一个示例:
----- ------ - - ----- -------- ---- --- ----- ---- ----- -- ----- ------- - ----------------------- --------------------- -- -- --------- --------- ------- ---- -------- ---- -------
代码解析:
我们首先创建一个名为 person 的对象,该对象包含三个键值对:name、age 和 city。然后我们使用 Object.entries(person) 方法获取该对象的所有属性名和属性值,并将其存储在名为 entries 的二维数组中。最后,我们打印这个新数组的值。
该示例输出了指定对象 person 的所有属性名和属性值,即 ["name", "Alice"]、["age", 25] 和 ["city", "New York"]。
- 使用场景
Object.values() 和 Object.entries() 方法可以用于许多场景中,以下是一些示例:
- 循环遍历所有属性值:
----- ------ - - ----- -------- ---- --- ----- ---- ----- -- --- ------ ----- -- ---------------------- - ------------------- - -- -- ------- -- -- -- -- -- ---- -----
- 检查对象是否包含指定值:
----- ------ - - ----- -------- ---- --- ----- ---- ----- -- ----- ------ - ---------------------- -------------------------------------- -- -- ----
- 将键值对变成 HTML 表格:
----- ------ - - ----- -------- ---- --- ----- ---- ----- -- ----- ------- - ----------------------- --- ---- - ---------- --- ------ ----- ------ -- -------- - ---- -- -------------------------------------------- - ---- -- ----------- ------------------
输出:
------- ---- ------------- -------------- ----- ---- ------------ ----------- ----- ---- ------------- ------- --------- ----- --------
- 总结
Object.values() 和 Object.entries() 方法是 ES8 中引入的两个新方法,用于返回一个对象的所有属性值和属性名和属性值。在循环遍历、检查对象是否包含指定值和将键值对变成 HTML 表格等场景中都有广泛的应用。对于前端开发人员来说,掌握这两个新方法将为编写更高效和更简洁的代码提供帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6475c961968c7c53b02ca825