先说论断:
- 举荐在循环对象属性的时候,应用
for...in
, 在遍历数组的时候的时候应用for...of
。 for...in
循环出的是 key,for...of
循环出的是 value- 留神,
for...of
是 ES6 新引入的个性。修复了 ES5 引入的for...in
的有余 for...of
不能循环一般的对象,须要通过和Object.keys()
搭配应用
假如咱们要遍历一个数组的 valuelet aArray = ['a',123,{a:'1',b:'2'}]
应用 for...in
循环:
for(let index in aArray){console.log(`${aArray[index]}`);
}
应用 for...of
循环:
for(var value of aArray){console.log(value);
}
—-===–==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=–=-=-=-=-=-=–=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
咋一看如同如同只是写法不一样而已,那为什么说 for...of
修复了 for...in
的缺点和有余。
假如咱们往数组增加一个属性 name:aArray.name = 'demo'
, 再别离查看下面写的两个循环:
for(let index in aArray){console.log(`${aArray[index]}`); //Notice!!aArray.name 也被循环进去了
}
for(var value of aArray){console.log(value);
}
所以说,作用于数组的 for-in
循环除了遍历数组元素以外, 还会遍历自定义属性。
for...of
循环不会循环对象的 key,只会循环出数组的 value,因而 for...of
不能循环遍历 一般对象, 对一般对象的属性遍历举荐应用for...in
如果切实想用 for...of
来遍历一般对象的属性的话,能够通过和 Object.keys()
搭配应用,先获取对象的所有 key 的数组
而后遍历:
var student={
name:'wujunchuan',
age:22,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(var key of Object.keys(student)){// 应用 Object.keys()办法获取对象 key 的数组
console.log(key+":"+student[key]);
}
for…of 语句在可迭代对象 (包含 Array, Map, Set, String, TypedArray,arguments 对象等等) 上创立一个迭代循环,对每个不同属性的属性值, 调用一个自定义的有执行语句的迭代挂钩.
也就是说,for of 只能够循环可迭代对象的可迭代属性,不可迭代属性在循环中被忽略了。
并且给与了一个比照的例子
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};
let iterable = [3, 5, 7];
iterable.foo = "hello";
for (let i in iterable) {console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
for (let i of iterable) {console.log(i); // logs 3, 5, 7
}
咱们能够看到,对于 array 的不可迭代元属性 objCustom、arrCustom 和实例属性 foo,在循环中都被疏忽
这是 for in 迭代 KEY,for of 迭代 value 之外最大的区别