JS之for...in与for...of

for in 与 for of

首先还是来了解一下它们的概念~

for in

定义：for…in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

补充：可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true，对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。可通过propertyIsEnumerable和hasOwnProperty方法判断。

语法

for (variable in object)
  statement

• variable: 在每次迭代时，variable会被赋值为不同的属性名。
• object: 非Symbol类型的可枚举属性被迭代的对象。

for of

定义：for…of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

语法

for (variable of iterable) {
    //statements
}

• variable: 在每次迭代中，将不同属性的值分配给变量。
• iterable: 被迭代枚举其属性的对象。

for in 与for of的不同

下面通过简单的例子来说明：

1. 循环数组

Array.prototype.name = 'Zhangsan';
var arr1 = [1,2,3];  
arr1.sex = '男';
var arr2 = [4,5,6];
arr2.sex = '女';

for(var k in arr1){
    console.log(k);
}
// 0 1 2 sex name 

for(var v of arr2){
    console.log(v);
}
 // 4 5 6

由此可见in循环得到的是数组下标（如果想要得到值只需要用arr[k]）和自定义属性和原型对象的属性和方法；而of循环得到的是数组元素的值（可以用break\return终止）。当用in不想循环原型对象时，可以用hasOwnProperty()，如下所示：

Array.prototype.name = 'Zhangsan';
var arr1 = [1,2,3];  
arr1.sex = '男';

for(var k in arr1){
    if(arr1.hasOwnProperty(k)){
        console.log(k);
    }
}
// 0 1 2 sex 

由上可见还是会枚举出数组的自定义属性。

另外：用for in 遍历数组，还会存在以下问题：

1. index索引为字符串型数字，不能直接进行数学运算。

2. 遍历顺序有可能不是按照实际数组的内部顺序。

var n = 0;
for(var k in arr1){
    console.log(k);n += k;console.log(n);
};
// 0
// 00
// 1
// 001
// 2
// 0012

2、循环对象

Object.prototype.say = function(){
    console.log('Hello!');
}
Object.prototype.str = 'aa';
var person = {
    name:'ZhangSan',
    sex:'女'
};

for(var k in person){ //name sex say str
    console.log(k)
};
for(var k of person){  //TypeError
    console.log(k)
};

由上可知for in 循环的是键、原型的属性和方法，同样可以用hasOwnProperty方法进行过滤；而for of不适合循环对象，会抛出TypeError错误。

实在想用for of循环对象怎么办咧？

Tips:用Object.keys()方法获取所有的自身可枚举属性组成的数组。

Object.prototype.say = function(){
    console.log('Hello!');
}
Object.prototype.str = 'aa';
var person = {
    name:'ZhangSan',
    sex:'女'
};

for(var k of Object.keys(person)){   //name sex
    console.log(k)
};  

3、循环字符串

var str01 = 'abc';
for (let value of str01) {
  console.log(value);        //a b c
}
 
var str02 = 'def';
for (let value in str02) {
  console.log(value);       // 0 1 2
}                       

总结一下：

1. for in: es5 而for of: es6 ，因此目前for in兼容性更好。
2. for in 迭代的是键、数组下标、自定义属性、原型对象属性和方法等，而for of迭代的是值。
3. 循环纯对象时最好用for in,循环数组不必知道它的索引时最好用for of，还支持中断。
4. for of没办法循环普通对象，要借助object.keys()。
5. 除了对象、数组、字符串，for of还可循环map、set等等（见上面的定义）。等到运用遇到问题时再来添加例子~

最后，分享一篇张鑫旭前辈写的蛮有意思的文章。看，for…in和for…of在那里吵架！