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在那里吵架!