js的遍历和迭代

简单的循环

var arr = [1, 2, 3];

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

遍历

• ECMAScript3 -> 没有针对可迭代对象（array）的具体的遍历方法
• ECMAScript5 -> 添加了 7 个专门针对数组的遍历方法 -> forEach、map、filter、some、every、reduce、reduceRight
• ECMAScript5 -> 针对对象增加了 for...in 的遍历方法

遍历对象

• mozilla 文档 for...in

// 遍历对象：
var obj = {
  c: 3,
  a: 1,
  b: 2
};

for (const key in obj) {
  console.log(key, obj[key]); // key 就是键名
}

// 遍历数组：
// var arr2 = [1, 2, 3];
// 类数组
var arr2 = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

for (const key in arr2) {
  console.log(key, arr2[key]); // key => 索引
}

遍历 Map、Set：

var m = new Map([
  [{ a: 1 }, 1],
  [{ b: 2 }, 2],
  [{ c: 3 }, 3]
]);

var s = new Set(['a', 'b', 'c']);

for (const key in m) {
  console.log(key); // 无
}

for (const key in s) {
  console.log(key); // 无
}

1. for ... in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for ... of。
2. for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。
3. Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用，当需要对一个对象进行迭代时（比如开始用于一个 for..of 循环中），它的@iterator方法都会在不传参情况下被调用，返回的迭代器用于获取要迭代的值。

迭代器

在 JavaScript 中，for...of 循环通常用于遍历可迭代对象（iterable objects），例如数组、字符串、Map、Set 等。然而，它不能直接用于遍历普通的对象（plain objects），因为普通对象不是可迭代对象。

模拟迭代器：

function generator(arr) {
  let nextIndex = 0;
  return {
    next() {
      return nextIndex < arr.length ? { value: arr[nextIndex++], done: false } : { value: undefined, done: true };
    }
  };
}

var arr = [1, 3, 6];
const iterator = generator(arr);

console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

为类数组对象自定义迭代器：

const o = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

// 在 Object 增加迭代器
Object.prototype[Symbol.iterator] = function () {
  let index = 0;
  let _this = this;
  return {
    next() {
      return index < _this.length ? { value: _this[index++], done: false } : { value: undefined, done: true };
    }
  };
}

// 使用 for of 遍历对象
for (const v of o) {
  console.log(v);
}

自定义迭代器

for...of 依赖于可迭代对象的 [Symbol.iterator] 方法。每当 for...of 循环开始执行时，它调用可迭代对象的 [Symbol.iterator] 方法，该方法返回一个迭代器对象。

const obj = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.iterator]: function* () {
    for (let key of Object.keys(this)) {
      yield [key, this[key]];
    }
  }
};

for (const [key, value] of obj) {
  console.log(`${key}: ${value}`);
}