理解 ES7 中的 Array.prototype.values() 方法的实现及其使用场景

在 ES7 中，新增加了一个 Array.prototype.values() 方法，它返回一个新的 Array Iterator 对象，该对象按照数组元素的顺序，包含了数组中每个元素的值。

方法实现

Array.prototype.values() 方法的实现非常简单，它只需要返回一个新的 Array Iterator 对象即可。这个 Iterator 对象可以用 for...of 循环来遍历数组中的每个元素。

// javascriptcn.com 代码示例
Array.prototype.values = function() {
  return new ArrayIterator(this);
};

function ArrayIterator(array) {
  this.array = array;
  this.index = 0;
}

ArrayIterator.prototype.next = function() {
  if (this.index >= this.array.length) {
    return { done: true };
  } else {
    return { value: this.array[this.index++], done: false };
  }
};

使用场景

Array.prototype.values() 方法可以用来遍历数组中的每个元素。在 ES6 中，我们可以使用 for...of 循环来遍历数组，但是这种方法只能获取到数组元素的值，而不能获取到它们的索引。

// javascriptcn.com 代码示例
const arr = [1, 2, 3];

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

// 输出：
// 1
// 2
// 3

如果我们需要获取数组元素的索引，可以使用 for 循环来遍历数组，但是这种方法需要手动维护索引，并且代码比较繁琐。

// javascriptcn.com 代码示例
const arr = [1, 2, 3];

for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

// 输出：
// 0 1
// 1 2
// 2 3

Array.prototype.values() 方法可以解决这个问题，它返回一个包含数组元素值的 Iterator 对象，我们可以使用 for...of 循环来遍历 Iterator 对象，并且获取到数组元素的索引。

// javascriptcn.com 代码示例
const arr = [1, 2, 3];

for (let [index, value] of arr.values().entries()) {
  console.log(index, value);
}

// 输出：
// 0 1
// 1 2
// 2 3

在上面的例子中，我们使用了 Array.prototype.entries() 方法来获取一个包含数组索引和值的 Iterator 对象，然后使用 for...of 循环来遍历 Iterator 对象，并且解构出了数组索引和值。

总结

Array.prototype.values() 方法是一个非常实用的方法，它可以用来遍历数组中的每个元素，并且获取到它们的索引。在实际开发中，我们可以使用它来简化代码，并且提高代码的可读性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657e5940d2f5e1655d92e7bf