首先了解for ... in 和 for ...of的区别:
遍历数组时
for (let item in arr) : item表示索引值
for(let item of arr) : item表示当前索引值对应的元素
var arr = ['red','yellow','green'];
for (let item in arr){
console.log(item);// 0 1 2
}
for (let item of arr){
console.log(item);//red yellow green
}
for(let item in obj)可以遍历普通对象,item表示key值
for(let item of obj)不能遍历普通对象
var obj = {
name: 'Jack',
age: 18
}
for (item in obj){
console.log(item);//name age
}
如for ...of 能遍历的实例对象下必须有Symbol.iterator属性,该属性的值是函数,执行该函数返回一个对象
{
next: function(){
return {value : , done: }
}
}
当用for ... of遍历对象时,实际访问的是对象的Symbol.iterator(),不断执行next(),取得value对应的值,当done的值是true时,表示遍历完成。
实例数组对象下有Symbol.iterator属性,let ...of 遍历时,得到的是value属性对应的值,当done的值是true时,遍历结束。
'use strict'
var arr = ['red','yellow','green'];
console.log(arr[Symbol.iterator]);//function values() { [native code] }
var It = arr[Symbol.iterator]();
console.log(It.next());//{value: "red", done: false}
console.log(It.next());//{value: "yellow", done: false}
console.log(It.next());//{value: "green", done: false}
console.log(It.next());//{value: undefined, done: true}
如果let ... of 想要遍历一般对象,就必须给一般对象,添加Symbol.iterator属性
'use strict'
var obj = {
name: 'Jack',
age: 18
}
obj[Symbol.iterator] = function(){
var i = 0;
var arr = Object.keys(this);
var length = arr.length;
return{
next:function(){
return{
value:obj[arr[i++]],
done:i>length
}
}
}
}
for(let item of obj){
console.log(item);//Jack 18
}
只是通过Object.keys(),for...of也能遍历一般对象。因为let ... of能够遍历数组
'use strict'
var obj = {
name: 'Jack',
age: 18
}
var arr = Object.keys(obj);
console.log(arr);//[ 'name', 'age' ]
for(let item of arr){
console.log(obj[item]);//Jack 18
}
let ... of 遍历类数组:
'use stric';
var obj = {
0: 'red',
1: 'yellow',
2: 'green',
length: 3
}
obj[Symbol.iterator] = Array.prototype[Symbol.iterator].bind(obj);
for(let item of obj){
console.log(item);//red yellow green
}