ES7 中的 Array.prototype.values()

引言

在 ES6 中，开发者引入了for..of循环，可以遍历一个数组或其他对象的所有元素。通过使用这种方式可以非常轻松的遍历一个数组的所有元素，也可以遍历字符串，或者其他可迭代对象。

let arr = [1, 2, 3];
for (let val of arr) {
    console.log(val);
}

在 ES7 中，又引入了一个新的方法Array.prototype.values()，该方法可以返回一个新的 Iterator 对象，其包含一个数组中所有的值，可以用于遍历每个元素。

详细解析

Array.prototype.values() 方法返回一个新的 Array Iterator 对象，该对象包含一个数组中所有的值，按照索引顺序进行迭代。该方法在兼容性方面由 ECMAScript 6 版本及以上的所有现代浏览器支持。该方法并不会在循环中修改数组对象，仅会返回一个可遍历对象。

const arr = [1, 2, 3];
const arrIterator = arr.values();

console.log(arrIterator.next()); // {value: 1, done: false}
console.log(arrIterator.next()); // {value: 2, done: false}
console.log(arrIterator.next()); // {value: 3, done: false}
console.log(arrIterator.next()); // {value: undefined, done: true}

在上面的示例中，我们首先创建了一个名为arr的数组，然后使用arr.values()方法创建了一个新的迭代器。使用迭代器的next()方法可以得到每一个元素，直到所有元素都被遍历完毕。当所有元素都被遍历完毕后，调用next()方法的返回值 done 属性会变为true。

指导意义

Array.prototype.values()方法在实际开发中也有其应用场景。配合for...of循环来代替多余的数组元素拷贝以及避免了不必要的内存浪费，同时，该方法还可以用于从一个数组中检索一个特定值所对应的数组索引，如下所示：

const arr = [1, 2, 3];
const val1 = arr.indexOf(2);
const val2 = [...arr.keys()].find(key => arr[key] === 3);
const val3 = [...arr.values()].indexOf(2);

console.log(val1); // 1
console.log(val2); // 2
console.log(val3); // -1

在该示例中，我们分别使用了indexOf()方法、keys()方法和values()方法来检索数组中特定值所对应的索引位置。由于每一种方法都有其自身的优缺点以及性能影响，所以在实际应用中，开发者应根据自身需求和实际情况进行选择。

总结

ES7 中的Array.prototype.values()方法可以用于遍历数组中的所有元素，并返回一个可遍历对象，我们可以结合for...of循环来对数组中的每个元素进行遍历操作。该方法可以在实际开发中提高代码的可读性和可维护性。同时，由于每种获取数组索引的方法都有其自身的优缺点，我们应该在实际应用中针对性地选择具体的方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496719448841e989439e29f