Iterator 是什么#

• Iterator（迭代器） 是 JavaScript 中一个统一遍历数据结构的机制，核心作用一句话：让不同的数据结构都能用同一种方式逐个访问元素

Iterator的作用

1
//遍历器 遍历；Iterator就是用来遍历
2
for (let i = 1; i < 5; i++) {
3
        console.log(i);
4
      }
5
      [1, 2, 3].forEach((value) => {
6
        console.log(value);
7
      });
8
      new Set([11, 12, 13]).forEach((value) => {
9
        console.log(value);
10
      });

寻找Iterator

1
//2025年才新增的全局构造函数，有些旧版浏览器不支持，打印出来就报错
2
console.log(Iterator);//ƒ Iterator() { [native code] }
3

4
//通过数组的Prototype可以看到 Symbol(Symbol.iterator)
5
console.log([1, 2]);
6
//调用执行
7
 console.log([1, 2][Symbol.iterator]());

使用Iterator

1
const it = [1, 2][Symbol.iterator]();
2
console.log(it.next()); //{value: 1, done: false}
3
console.log(it.next()); //{value: 2, done: false}
4
console.log(it.next()); //{value: undefined, done: true}
5

6
//it 可遍历对象
7
//Symbol.iterator 可遍历对象的生成方法

Iterator 解惑#

为什么需要Iterator 遍历器

1
//数组可以用for或者佛forEach方法
2
//对象可以用for in
3
//Iterator 并不是为数组和对象遍历，而是统一遍历方式
4

5
console.log([][Symbol.iterator]()); //Array Iterator {}  天生具备
6
console.log({}[Symbol.iterator]); //undefined 不具备

如何更方便的使用Iterator

1
// Symbol.iterator->it->next()
2
//我们一般不会直接使用Iteratr去遍历->封装成一个函数
3
// for..of

for…of 的用法#

• for...of 是 ES6 新增的循环语法，用来遍历可迭代对象（Iterable）中的值。

• for...of 用来遍历可迭代对象的value值，它的底层就是不断调用 Iterator 的 next() 方法。

  1
  //基本语法
  2
  for (const item of iterable) {
  3
    // 使用 item
  4
    //item每次遍历得到的值
  5
    //iterable可迭代对象
  6
  }
  7
  
  8
  //遍历数组，没有索引
  9
  const arr = [10, 20, 30];
  10
  for (const item of arr) {
  11
    console.log(item);
  12
  }
  13
  
  14
  //遍历字符串
  15
  const str = 'hello';
  16
  for (const ch of str) {
  17
    console.log(ch);
  18
  }
  19
  
  20
  //遍历 Set
  21
  const set = new Set([1, 2, 3]);
  22
  for (const item of set) {
  23
    console.log(item);
  24
  }
  25
  
  26
  //遍历 Map
  27
  const map = new Map([
  28
    ['name', 'Alice'],
  29
    ['age', 18]
  30
  ]);
  31
  for (const item of map) {
  32
    console.log(item);
  33
  }
  34
  for (const [key, value] of map) {
  35
    console.log(key, value);
  36
  }
  37
  
  38
  //遍历 DOM 集合
  39
  const ps = document.querySelectorAll('p');
  40
  for (const p of ps) {
  41
    console.log(p);
  42
  }
  43
  
  44
  //不能直接遍历 Object
  45
  const obj = {
  46
    name: 'Alice',
  47
    age: 18
  48
  };
  49
  
  50
  for (const item of obj) {}//报错
  51
  //遍历键
  52
  for (const key of Object.keys(obj)) {
  53
    console.log(key);
  54
  }
  55
  //遍历值
  56
  for (const value of Object.values(obj)) {
  57
    console.log(value);
  58
  }
  59
  //遍历键和值
  60
  for (const [key, value] of Object.entries(obj)) {
  61
    console.log(key, value);
  62
  }
  63
  
  64
  //可以配合 break、continue forEach没有break、continue，这是区别
  65
  for (const n of [1, 2, 3, 4, 5]) {
  66
    if (n === 3) break;
  67
    console.log(n);
  68
  }
  69
  for (const n of [1, 2, 3, 4]) {
  70
    if (n % 2 === 0) continue;
  71
    console.log(n);
  72
  }
  73
  //数组遍历时拿索引怎么办for...of 默认只有值，没有索引。
  74
  const arr = [1, 2, 3];
  75
        console.log(arr.keys());
  76
        for (const key of arr.keys()) {
  77
          console.log(key);
  78
        }
  79
        for (const value of arr) {
  80
          console.log(value);
  81
        }
  82
  //方法 1：entries() 既想得带value和key
  83
  const arr = ['a', 'b', 'c'];
  84
  for (const [index, value] of arr.entries()) {
  85
    console.log(index, value);
  86
  }

  展开收起

for…of、for…in、forEach、for、while区别#

一、核心区别表

二、最常见使用场景

三、获取的东西不一样（最容易混）

假设：

1
const arr = ['a', 'b', 'c'];
2
const obj = {
3
  name: 'Alice',
4
  age: 18
5
};

for

1
for (let i = 0; i < arr.length; i++) {
2
  console.log(i, arr[i]);
3
}
4
//0 a
5
//1 b
6
//2 c

for...of

1
for (const v of arr) {
2
  console.log(v);
3
}
4
//a
5
//b
6
//c

for...in

1
for (const k in arr) {
2
  console.log(k);
3
}
4
//0
5
//1
6
//2

forEach

1
arr.forEach((v, i) => {
2
  console.log(i, v);
3
});
4
//0 a
5
//1 b
6
//2 c

while

1
let i = 0;
2

3
while (i < arr.length) {
4
  console.log(arr[i]);
5
  i++;
6
}
7
//输出;abc

四、为什么数组不推荐 for...in？

1
Array.prototype.test = 'hello';
2

3
const arr = [1, 2, 3];
4

5
for (const k in arr) {
6
  console.log(k);
7
}
8
//输出：
9
//0
10
//1
11
//2
12
//test

因为：for...in 遍历的是可枚举属性，包括原型链上的属性。所以：❌不推荐遍历数组。

五、实际开发怎么选？

数组

1
for (const item of arr) {}

数组 + 索引

1
for (let i = 0; i < arr.length; i++) {}
2
//或者：
3
for (const [i, item] of arr.entries()) {}

对象

1
for (const [k, v] of Object.entries(obj)) {}

Map

1
for (const [k, v] of map) {}

Set

1
for (const v of set) {}

异步循环

1
for (const item of arr) {
2
  await fn(item);
3
}

记忆口诀

1
for       —— 最灵活
2
while     —— 条件循环
3
for...of  —— 遍历值（Iterator）
4
for...in  —— 遍历键（Object）
5
forEach   —— 数组工具方法

一句话总结

数组优先 for...of，对象优先 Object.entries()，需要索引用 for，需要异步用 for...of，简单遍历可以用 forEach。

原生可遍历和非原生可遍历#

哪些对象天生（原生）支持 for...of，哪些对象默认不支持。

判断标准只有一个：

1
typeof obj[Symbol.iterator] === 'function'
2
//有这个方法：原生可遍历（Iterable）;没有：非原生可遍历（Non-Iterable）

原生可遍历对象

1
//Array
2
const arr = [1, 2, 3];
3
for (const x of arr) {
4
    console.log(x);
5
}
6

7
//String
8
for (const ch of 'abc') {
9
    console.log(ch);
10
}
11

12
//Set
13
const set = new Set([1, 2, 3]);
14

15
for (const x of set) {
16
    console.log(x);
17
}
18

19
//Map
20
const map = new Map([
21
    ['name', 'Alice'],
22
    ['age', 18]
23
]);
24
for (const [k, v] of map) {
25
    console.log(k, v);
26
}
27

28
//NodeList
29
const ps = document.querySelectorAll('p');
30

31
for (const p of ps) {
32
    console.log(p);
33
}

非原生可遍历：

使用了 Iterator 的场合#

场合总结：

特例：

1
//数组解构赋值，原生可遍历的都可以被解构赋值
2
const[a,b] = 'hi'
3
//等价于，因为字符串可以天生遍历
4
const[a,b] = [...'hi']
5
//因为Set可以天生遍历
6
const[a,b] = new Set([3,2])