为何使用Array.prototype.values()而非普通数组搭配for循环？

你提到的代码简洁清晰确实是迭代器的直观优势，但它的作用远不止于此，下面是几个关键的使用场景和底层优势：

1. 惰性求值，处理超大/无限数据集合 #

普通数组会一次性把所有元素加载到内存中，但迭代器是按需生成值的——只有调用next()方法时才会返回下一个元素。这在处理超大数组（比如百万级数据）或者生成无限序列时特别有用：

// 模拟一个生成无限偶数的迭代器（基于迭代协议实现）
function infiniteEvens() {
  let num = 0;
  return {
    [Symbol.iterator]() { return this; },
    next() {
      const val = num;
      num += 2;
      return { done: false, value: val };
    }
  };
}

// 不需要存储所有偶数，按需取前10个
const evens = infiniteEvens();
for (let i = 0; i < 10; i++) {
  console.log(evens.next().value); // 0,2,4...18
}

如果用普通数组来存无限序列根本不可能，而迭代器完美解决了这个问题。

2. 统一所有可迭代对象的遍历接口 #

ES6之后，JavaScript的很多内置对象（Set、Map、字符串、NodeList等）都实现了迭代协议，Array.prototype.values()返回的迭代器和这些对象的迭代器遵循相同的规则。这意味着你可以用同一段代码遍历不同类型的集合：

// 通用遍历函数，支持数组、Set、Map的取值遍历
function iterateValues(iterable) {
  const iterator = typeof iterable.values === 'function' ? iterable.values() : iterable;
  for (const val of iterator) {
    console.log(val);
  }
}

iterateValues([1,2,3]); // 1,2,3
iterateValues(new Set(['a','b','c'])); // a,b,c
iterateValues(new Map([['name','Alice'],['age',25]])); // Alice,25

如果用普通for循环，你需要为不同类型的集合写不同的遍历逻辑（比如Map要遍历entries再取值，NodeList要处理索引），迭代器则实现了逻辑统一。

3. 避免手动管理索引的错误 #

普通for循环需要手动维护索引变量（比如i++），如果遍历过程中数组被修改（比如slice、splice），很容易出现索引越界或者跳过元素的问题。而迭代器基于迭代协议工作，不需要依赖数组的长度或索引：

const arr = [1,2,3,4,5];
const iterator = arr.values();

// 遍历过程中修改数组
arr.splice(2,1);

for (const val of iterator) {
  console.log(val); // 1,2,4,5（自动适配数组变化，不会跳过或重复）
}

虽然数组迭代器是实时反映数组变化的，但它不需要你手动处理索引，减少了出错的概率。

4. 支持自定义迭代逻辑的扩展 #

你可以基于values()返回的迭代器做包装，实现过滤、映射等操作，而且不需要生成中间数组（节省内存）：

// 包装迭代器实现过滤，不生成新数组
function filterIterator(iterator, condition) {
  return {
    [Symbol.iterator]() { return this; },
    next() {
      let result = iterator.next();
      while (!result.done && !condition(result.value)) {
        result = iterator.next();
      }
      return result;
    }
  };
}

const arr = [1,2,3,4,5,6];
const evenIterator = filterIterator(arr.values(), num => num % 2 === 0);

for (const num of evenIterator) {
  console.log(num); // 2,4,6（没有生成新的偶数数组）
}

这种方式比先调用arr.filter()再遍历更高效，尤其是处理大数据时。

5. 与ES6+特性无缝结合 #

迭代器可以直接配合解构赋值、扩展运算符、Array.from()等特性使用，让代码更灵活：

const arr = [10,20,30];
const iterator = arr.values();

// 解构赋值
const [first, second] = iterator;
console.log(first, second); // 10,20

// 剩余元素转数组
const rest = Array.from(iterator);
console.log(rest); // [30]

内容的提问来源于stack exchange，提问作者user19132646