JavaScript - 数组 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() 方法迭代数组元素，并使用 for...of 循环根据 values() 方法的结果按插入顺序打印它们。

<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) 和关联值 (1, 3, 5) 返回"未定义"。