在 ES7 中，JavaScript 引入了 Object.values 和 Object.entries 这两个新特性，这两个方法可以极大地方便我们在对象操作时的操作。其中， Object.values 方法会返回一个给定对象自身的所有可枚举属性的值的数组，而 Object.entries 方法会返回一个给定对象自身可枚举属性的键值对的数组。
在本文中，我们来探讨一下这两个方法在对象的深度遍历中的应用。
深度遍历
在 JavaScript 中，深度遍历是一种遍历结构型数据结构的方式，比如树和对象等。它可以遍历一个数据结构中所有的层级，包括嵌套的子对象或子节点。如果我们需要快速查找或处理一个复杂对象或数据结构中的属性或值，深度遍历将十分有用。
下面是一个简单的 JS 对象，作为本文的示例数据：
-- -------------------- ---- -------
----- ---- - -
----- ---------
----- ---------
----- -
-------- ------------
-------- -
----------- --------------
-
-
--我们可以使用一个 for...in 循环来遍历这个对象：
for (let key in data) {
if (data.hasOwnProperty(key)) {
console.log(data[key]);
}
}这个方法确实可以帮助我们遍历整个对象，但是，它并不能支持深度遍历。
使用 Object.values/Object.entries 实现深度遍历
接下来，我们来看看如何使用 ES7 提供的 Object.values 和 Object.entries 方法实现深度遍历。
首先，我们来使用 Object.values 方法获取一个对象的所有属性值：
console.log(Object.values(data));
// ["value1", "value2", {subkey1: "subvalue1", subkey2: {subsubkey1: "subsubvalue1"}}]这个方法返回了一个包含每个键值对中值的数组。但是，这在我们遍历整个对象时没有太大帮助。
我们可以再次使用 Object.entries 方法，将一个对象的每个属性值打包成一个数组里的键值对：
console.log(Object.entries(data));
// [["key1", "value1"], ["key2", "value2"], ["key3", {subkey1: "subvalue1", subkey2: {subsubkey1: "subsubvalue1"}}]]现在，我们可以使用这两个方法帮助我们的深度遍历。我们可以使用递归函数遍历每个嵌套的子对象或子节点。下面是一个使用 Object.entries 和递归函数的深度遍历示例代码：
-- -------------------- ---- -------
-------- --------------------- -
------------------------------------- ------- -- -
---------------- -------
-- ------- ----- --- --------- -
---------------------
-
---
-
--------------------这个函数将输出以下结果：
key1 value1
key2 value2
key3 {subkey1: "subvalue1", subkey2: {subsubkey1: "subsubvalue1"}}
subkey1 subvalue1
subkey2 {subsubkey1: "subsubvalue1"}
subsubkey1 subsubvalue1这是因为递归函数在找到一个嵌套对象时，立即调用自身去遍历所有嵌套对象。这个方法可以彻底地遍历出对象中所有的属性和值。
总结
Object.values 和 Object.entries 这两个方法是 JavaScript 引入的非常实用的新特性。它们可以帮助我们在对象的深度遍历时更加方便地操作数据，节省了我们的时间和精力。如果你想要遍历一个复杂的对象或数据结构，这两个方法一定是不可或缺的。
在深度遍历的世界里，使用这些方法会使你的代码更加简洁易懂。它们也是同事合作时代码共享的良好例子，帮助你快速查找和处理你需要的数据。如果你正在学习 JavaScript 编程，这些方法也可以为你提供一个很好的参考和学习范例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c248a083d39b488164b8b7