JavaScript 数组 values() 方法

JavaScript values() 语法

values() 是 JavaScript 数组的一个方法，它会返回一个迭代器对象（Array Iterator），该对象包含数组中每个元素的值。

语法：

arr.values()

说明：

values() 方法不接收任何参数。此外，values() 方法不会改变原数组。

JavaScript values() 摘要

JavaScript values() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript values() 方法是如何使用的。

示例 1：values() 基本用法

const arr = ["Python", "C++", "Java"];
const result = arr.values();
console.log(result);

for (let value of result) {
    console.log(value);
}

运行结果如下。

Object [Array Iterator] {}
Python
C++
Java

分析：

values() 会返回一个 Iterator 对象，因此我们可以使用 for of 循环来遍历它。其中，Iterator 对象和 for of 循环是 ES6 新增的概念。

示例 2：带空槽的数组使用 values()

const arr = ["Python", "C++", , , "Java"];
const result = arr.values();
console.log(result);

for (let value of result) {
    console.log(value);
}

运行结果如下。

Object [Array Iterator] {}
Python
C++
undefined
undefined
Java

分析：

values() 方法不会跳过数组的空槽元素，它会将空槽元素的值视为 undefined，然后保存到结果中。

示例 3：空数组使用 values()

const arr = [];
const result = arr.values();
console.log(result);

for (let value of result) {
    console.log(value);
}

运行结果如下。

Object [Array Iterator] {}

分析：

由于空数组不包含任何元素，它使用 values() 生成的 Iterator 对象不包含任何的 “值”，因此使用 for of 循环不会遍历出任何内容。

示例 4：将 values() 的结果转换成数组

const arr = ["Python", "C++", , , "Java"];
const result = [...arr.values()];
console.log(result);

运行结果如下。

[ 'Python', 'C++', undefined, undefined, 'Java' ]

分析：

想要将 values() 的结果转换成一个数组，可以使用 ES6 扩展运算符的方式来实现。

keys()、values()、entries() 的区别

数组的 keys()、values() 和 entries() 这几个方法比较相似，它们的相同之处在于：都会返回一个 Array Iterator 对象（也叫 “迭代器” 或 “迭代器对象”），因此都可以使用 for of 循环来遍历。

keys()、values() 和 entries() 的不同之处在于它们的功能。

• keys()：获取数组所有元素的 “键”（即下标）。
• values()：获取数组所有元素的 “值”。
• entries()：获取所有元素的 “键” 和 “值”。

示例 5：keys()、values()、entries() 的区别

const arr = ["红", "绿", "蓝"];

// keys()方法
const result1 = arr.keys();
for (let key of result1) {
    console.log(key);
}

// values()方法
const result2 = arr.values();
for (let value of result2) {
    console.log(value);
}

// entries()方法
const result3 = arr.entries();
for (let item of result3) {
    console.log(item);
}

运行结果如下。

0
1
2

红
绿
蓝

[ 0, '红' ]
[ 1, '绿' ]
[ 2, '蓝' ]