Javascript 中 for 循环的使用方式

tech

关于 for ... in 和 for ... of

简单记忆

由于 es6 中 for ... of 的加入, 对于记得不是很清楚的人会很容易产生混淆.

for ... in 可以理解为获取 “index”. 在 Array 类型中, 调用 for ... in 获取的确实就是每个元素对应的 index, 而在 Object 中, 就是对应相应的 key 值.

for ... of 只可以用于 Array.

特别注意

for ... of 只能用于 Array, 用于 Object 或者 undefined 均会报错. 所以对于使用对象可能出现 undefined 的情况不要使用for ... of.

示例

对 Array 使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
let a = {'a': 1, 'b': 2}
let b = ['a', 'b']
let c = undefined

for (let i in a) {
  console.log(i)
}
// return:
// a
// b

for (let i in b) {
  console.log(i)
}
// return:
// 0
// 1

for (let i in c) {
  console.log(i)
}
// return:
// undefined

for (let i of a) {
  console.log(i)
}
// Error:
// Uncaught TypeError: a[Symbol.iterator] is not a function

for (let i of b) {
  console.log(i)
}
// return:
// a
// b

for (let i of c) {
  console.log('i')
}
// Error:
// Uncaught TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined