for…of是作为ES6新增的遍历方式,允许遍历一个含有iterator接口的数据结构(数组、对象等)并且返回各项的值,普通的对象用for..of遍历是会报错的。
如果需要遍历的对象是类数组对象,用Array.from转成数组即可。
var obj = {
0:'one',
1:'two',
length: 2
};
// obj = Array.from(obj);
for(var k of obj){
console.log(k)// TypeError: obj is not iterable
}
var obj = {
0:'one',
1:'two',
length: 2
};
obj = Array.from(obj);
for(var k of obj){
console.log(k)// one two
}
如果不是类数组对象,就给对象添加一个[Symbol.iterator]属性,并指向一个迭代器即可。
//方法一:
var obj = {
a:1,
b:2,
c:3
};
obj[Symbol.iterator] = function(){
var keys = Object.keys(this);
var count = 0;
return {
next(){
if(count<keys.length){
return {value: obj[keys[count++]],done:false};
}else{
return {value:undefined,done:true};
}
}
}
};
for(var k of obj){
console.log(k);
}
// 方法二
var obj = {
a:1,
b:2,
c:3
};
/* function* 是 JavaScript 中用来定义生成器函数(Generator Function)的语法。
生成器函数是一种特殊类型的函数,
可以暂停执行并在稍后的时间继续执行。
它们通过使用 yield 关键字来产生(yield)一个值,并且在产生值后会暂停执行,
等待下一次的调用继续执行。 */
obj[Symbol.iterator] = function*(){
var keys = Object.keys(this);
for(var k of keys){
yield [k,obj[k]]
}
};
for(var [k,v] of obj){
console.log(k,v);
}