JavaScript中for...of与for...in的区别细谈

for…in循环

for…in 循环只遍历可枚举属性（包括它的原型链上的可枚举属性）。

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

for (var prop in obj) {
  console.log(prop ); // a b c
}

一个Array数组也是一个对象，数组的每个元素的索引被视为属性名称，所以可以看到使用for…in 循环Array数组，拿到的其实是每个元素的索引

var a = [ 'A' , 'B', 'C' ]；

a.name = ' Hello ' ;

for (var  i   in  a ){
	alert ( i )        //   '0' , '1' , '2' , 'name'
}

下面的函数说明了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(`obj.${prop} = ${obj[prop]}`);
  } 
}

// Output:
// "obj.color = red"

for…of 循环

for … of循环是ES6引入的新的语法.用来获取一对键值对中的值.一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。

let iterable = [10, 20, 30];
for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

let iterable = "boo";
for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

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

// 1
// 2
// 3

下面是一个使用 break 语句，跳出for…of循环的例子。

for (var n of fibonacci) {
  if (n > 1000)
    break;
  console.log(n);
}

for…in循环与for…of 循环的区别

• for…in

1. for…in循环可以遍历数组的键名。
2. 数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
3. 某些情况下，for…in循环会以任意顺序遍历键名。
4. for…in循环主要是为遍历对象而设计的，不适用于遍历数组。
5. 语句以任意顺序迭代对象的可枚举属性

• for…of

1. 不同于forEach方法，它可以与break、continue和return配合使用。
2. 提供了遍历所有数据结构的统一操作接口。
3. 语句遍历可迭代对象定义要迭代的数据

注意

1. for…in不应该用于迭代一个 Array，其中索引顺序很重要