在 ES10 中，JavaScript 为我们带来了一系列方便的新 Feature。其中，Array.keys()、Array.values() 和 Array.entries() 方法是常常被用到的方法之一。这篇文章将带你深入了解这几种方法的详细用法，帮助你更好地掌握 JavaScript 编程技巧。
Array.keys()
Array.keys() 方法返回一个迭代器，用于遍历数组的索引。它是一个与 for...of 循环结合使用的有用工具。该方法可以被应用到任何现有的数组对象上，参数为空。
下面是一个使用 Array.keys() 方法的示例：
let arr = ['a', 'b', 'c'];
let iterator = arr.keys();
for (let key of iterator) {
console.log(key); // 0, 1, 2
}上面的代码首先创建了一个名为 arr 的数组。接着，我们使用 Array.keys() 方法创建了一个名为 iterator 的迭代器。最后，我们使用 for...of 语句遍历这个迭代器，并将每个索引打印到控制台上。
注意，在上面的例子中，我们使用了 let 来定义变量。这是因为在 for...of 循环中，变量是 const，而不是 let 或 var。这意味着我们不能修改它们的值。
Array.values()
Array.values() 方法返回一个数组的值的迭代器。它是一个与 for...of 循环结合使用的有用工具。该方法可以被应用到任何现有的数组对象上，参数为空。
下面是一个使用 Array.values() 方法的示例：
let arr = ['a', 'b', 'c'];
let iterator = arr.values();
for (let value of iterator) {
console.log(value); // 'a', 'b', 'c'
}上面的代码可以看出 Array.values() 方法返回的是一个迭代器，它与 Array.keys() 方法非常类似。然而，迭代器返回的是值，而不是键。
Array.entries()
Array.entries() 方法返回一个迭代器，用于遍历数组的键与值。它是一个与 for...of 循环结合使用的有用工具。该方法可以被应用到任何现有的数组对象上，参数为空。
下面是一个使用 Array.entries() 方法的示例：
let arr = ['a', 'b', 'c'];
let iterator = arr.entries();
for (let [key, value] of iterator) {
console.log(key, value); // 0 'a', 1 'b', 2 'c'
}上面的代码显示了 Array.entries() 方法如何将键与值一一对应地返回。由于每个条目都是一个由键值对组成的数组，我们需要使用解构语法将它们拆分开来。
在上面的代码中，我们使用了 [key, value] 来解构数组中的每个元素，这就允许我们很容易地访问键和值。
结论
在 ES10 中，Array.keys()、Array.values() 和 Array.entries() 方法是非常有用的。使用它们可以让我们更容易地遍历数组的键值，并且可以更好地管理 JS 代码。从以上解释可以看出，我们可以将 Array.keys()、Array.values() 和 Array.entries() 方法与 for...of 循环结合使用，让我们更好地写出有意义的代码。
下面是一个使用 Array.keys()、Array.values() 和 Array.entries() 方法的示例：
-- -------------------- ---- ------- --- --- - ----- ---- ----- --- ---- --- -- ----------- - ----------------- -- -- -- - - --- ---- ----- -- ------------- - ------------------- -- ---- ---- --- - --- ---- ----- ------ -- -------------- - ---------------- ------- -- - ---- - ---- - --- -
在这个示例中，我们展示了如何在同一个数组上使用多个不同的迭代器。这可以让我们更好地对数组进行操作，并确保我们没有丢失任何数据。
总的来说，Array.keys()、Array.values() 和 Array.entries() 方法是非常有用的，并且值得我们去学习和掌握。它们可以让数组的遍历变得非常灵活，为我们的编程工作带来了很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6750e2c1050cf9039c1774dd