JavaScript - Array values() 方法

数组是 JavaScript 中一种用于在单个变量中存储多个值的数据结构。数组中的每个值称为元素，每个元素都有一个唯一的索引。

在 JavaScript 中，Array.values() 方法不接受任何参数，并返回一个新的数组迭代器对象，该对象包含数组的值，按照插入顺序排列。可以使用 for...of 循环或 next() 方法通过此迭代器对象迭代数组的值。

values() 方法几乎与所有浏览器兼容，例如 Chrome、Edge、FireFox、Opera 和 Safari。

语法

以下是 JavaScript Array.values() 方法的语法：

values()

参数

此方法不接受任何参数。

返回值

此方法返回一个新的可迭代迭代器对象，其中包含数组的值。

示例

示例 1

在下面的示例中，我们使用 values() 方法创建一个迭代器对象。然后，我们使用迭代器上的 next() 方法手动检索每个元素。

<html>
<body>
   <script>
      let array = ['apple', 'banana', 'cherry'];
      let iterator = array.values();
      document.write(iterator.next().value, "<br>");
      document.write(iterator.next().value, "<br>");
      document.write(iterator.next().value);
   </script>
</body>
</html>

执行上述程序后，它将按插入顺序打印数组的所有元素。

输出

apple
banana
cherry

示例 2

在此示例中，我们使用 values() 方法迭代数组的元素，并使用 values() 方法的结果中的 for...of 循环按插入顺序打印它们。

<html>
<body>
   <script>
      let array = ['apple', 'banana', 'cherry'];
      let iterator = array.values();
      for (let value of iterator) {
         document.write(value, "<br>");
      }
   </script>
</body>
</html>

如果我们执行上述程序，它将按插入顺序打印数组的所有元素。

输出

apple
banana
cherry

示例 3

在这里，我们使用 Array.from() 方法创建一个新的数组，其中包含 values() 方法返回的值。Array.from() 方法创建数组的浅拷贝，因此原始数组保持不变。

<html>
<body>
   <script>
      let array = ['apple', 'banana', 'cherry'];
      let valuesArray = Array.from(array.values());
      document.write(valuesArray);
   </script>
</body>
</html>

执行上述程序后，它将按插入顺序打印数组的所有元素。

输出

apple,banana,cherry

示例 4

在此示例中，我们创建一个稀疏数组，其中在索引 1、3 和 5 处有三个元素。当我们使用 values() 方法创建迭代器对象时，迭代器对象对数组中没有值的索引返回 undefined。

<html>
<body>
   <script>
      let array = [];
      array[1] = 'apple';
      array[3] = 'banana';
      array[5] = 'cherry';
      let iterator = array.values();
      document.write(iterator.next().value, <br>); //undefined
      document.write(iterator.next().value, <br>); //'apple'
      document.write(iterator.next().value, <br>); //undefined
      document.write(iterator.next().value, <br>); //'banana'
      document.write(iterator.next().value, <br>); //undefined
      document.write(iterator.next().value); //'cherry'
   </script>
</body>
</html>

正如我们在输出中看到的，它对索引 (0, 2, 4) 返回了 'undefined'，并对 (1, 3, 5) 返回了关联的值。

打印页面