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 遍历数组，还会存在以下问题：

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

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

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 }

总结一下：

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

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