在 ES8 中，JavaScript 新增了一些非常有用的特性，其中两个重要的方法是 Object.entries 和 Object.values，这两个方法可以在前端开发中帮助我们更容易地操作对象数据。本文将详细介绍这两个方法的作用、用法，并提供代码示例以便更好地理解。
Object.entries 方法
Object.entries 方法可以将一个对象的所有键值对以数组的形式返回，在操作对象数据时非常实用。使用该方法可以将对象转换为可迭代的数据结构，方便进行遍历操作。
-- -------------------- ---- ------- ----- ------- - - ----- ----- ---- --- ------- --- -- ----- ---------- - ------------------------ ------------------------ -- --------- ------ ------- ---- ---------- -----
从上述代码可以看出，使用 Object.entries 方法可以将 student 对象中所有的键值对以数组形式返回并存储在 entriesArr 变量中。这样，我们就可以直接遍历该数组，获取到每个键值对的键名和键值，如下所示：
for (let [key, value] of entriesArr) {
console.log(`${key}: ${value}`);
}
// name: 小明
// age: 18
// gender: 男除此之外，Object.entries 方法也可以用于获取 Map 对象的键值对数组：
-- -------------------- ---- ------- ----- --- - --- ----- -------- ------ ------- ---- ---------- ---- --- ----- ---------- - -------------------- ------------------------ -- --------- ------ ------- ---- ---------- -----
Object.values 方法
Object.values 方法可以将对象所有值以数组的形式返回，在不想取出对象键名的场合下非常便利。
-- -------------------- ---- ------- ----- ------- - - ----- ----- ---- --- ------- --- -- ----- --------- - ----------------------- ----------------------- -- ------ --- ----
从上述代码可以看出，使用 Object.values 方法可以将 student 对象中所有的值以数组形式返回并存储在 valuesArr 变量中。这样，我们就可以直接遍历该数组，获取到每个键值对的值，如下所示：
for (let value of valuesArr) {
console.log(value);
}
// 小明
// 18
// 男同样地，Object.values 方法也可以用于获取 Map 对象的值数组：
-- -------------------- ---- ------- ----- --- - --- ----- -------- ------ ------- ---- ---------- ---- --- ----- --------- - ------------------- ----------------------- -- ------ --- ----
总结
Object.entries 和 Object.values 方法为我们操作对象数据提供了更多方便，特别是在遍历对象时非常实用。需要注意的是，在低版本浏览器中可能不支持这些方法，可以使用 babel-polyfill 进行兼容处理。
以上就是对 Object.entries 和 Object.values 方法探究的详细介绍，希望这篇文章能对学习这些方法的同学有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64defb25f6b2d6eab3a1f796