for...in 与 for...of 的用法与区别

1 for…in

for...in 语句主要用于遍历对象，遍历出对象的属性名，所有可枚举的属性（包括继承的可枚举属性）。

语法：

for (propertyName  in object){
	......
}
    
// propertyName 在每次迭代时，会被赋值为不同的属性名
// object 非Symbol类型的可枚举属性被迭代的对象
1
2
3
4
5
6

1.1 遍历 Object

for…in 输出的是对象的key，for…of 不能遍历对象。

const obj = {a:1, b:2, c:3};
for (const key in obj) {
  console.log(key); // 遍历出该对象的属性名，即key
}
// Output:
// a
// b
// c 

// for...of 不能遍历对象，会报错：TypeError: obj is not iterable
for (const key of obj) {
	...
}
1
2
3
4
5
6
7
8
9
10
11
12
13

如果只考虑对象本身的属性，而不是它的原型，可以使用 hasOwnProperty() 来判断某属性是否是对象本身的属性。

var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log('自身属性',prop);// 继承的属性不进入
  }
  console.log('所有属性', prop);
}

// Output:
// 自身属性 color
// 所有属性 color
// 所有属性 a
// 所有属性 b
// 所有属性 c
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

备注： for...in不应该用于迭代一个关注索引顺序的 Array。for...in 是为了遍历对象而构建的，不建议与数组一起使用。

1.2 遍历 Array

for…in 输出的数组的index下标，for…of 输出的数组的每一项的值。

const arr = ['a', 'b', 'c', 'd'];

// for...in 输出的数组的下标
for (const key in arr) {
  console.log(key); // 0, 1, 2, 3
}
// for...of 输出的数组的每一项的值
for (const key of arr) {
  console.log(key); // a, b, c, d
}
1
2
3
4
5
6
7
8
9
10

2 for…of

for...of 语句可遍历Array、String、Map、Set等等。

2.1 遍历 Array

const arr = [10, 20, 30];

for (const value of arr) {
    console.log(value);
}

// Output
// 10
// 20
// 30
1
2
3
4
5
6
7
8
9
10

2.2 遍历 String

const str = "boo";

for (let value of str) {
  console.log(value);
}

// Output
// "b"
// "o"
// "o"
1
2
3
4
5
6
7
8
9
10

2.3 遍历 Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.4 遍历 Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3
1
2
3
4
5
6
7
8

2.5 遍历 TypedArray

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255
1
2
3
4
5
6
7

2.6 遍历 arguments 对象

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3
1
2
3
4
5
6
7
8
9

3 for…of与for…in的区别

for…in 是ES5新增，for…of 是ES6新增，两个语句都是迭代一些东西，主要区别在于它们的迭代方式。

（1）都可以循环数组，for…in 输出的是数组的index下标，而for…of 输出的是数组的每一项的值。

（2）for…in 遍历对象，输出对象的key，而 for...of 不能遍历对象。

（3）for…in 语句以任意顺序迭代对象的可枚举属性。for…of 语句遍历可迭代对象的value。