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() 方法遍历数组的元素,并使用 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) 返回了相关值。