ES6 使用for..of遍历数组和对象

es6新加了遍历方法for..of,今天看看怎么使用

一、遍历数组

1，直接使用for..of遍历数组

let arr=['red','green','blue','orange'];
for(let val of arr){
  console.log(val);//red,green,blue,orange
}

可以看到直接打印出了数组中的各个值。

那么怎么通过for...of把索引打印出来呢？

可以这样：

let arr=['red','green','blue','orange'];
for(let index of arr.keys()){
  console.log(index );//0,1,2,3
}

还可以这样：

let arr=['red','green','blue','orange'];
for(let item of arr.entries()){
  console.log(item[0]);//red,green,blue,orange
}

能否把数组索引和值一块打印出来呢？

let arr=['red','green','blue','orange'];
for(let [key,val] of arr.entries()){
  console.log(key,val);
}

是不是很简单^_^

 

二、遍历对象

for...of不能直接遍历普通JavaScript对象，只能遍历具有iterable接口类型的数据，比如Set实例，数组，字符串...

1，遍历Set实例：

let set=new Set([true,66,'hello'])

for(let value of set){
    console.log(value)//true,66."hello"
}

2，遍历字符串

for(let val of "hello"){
    console.log(val)//h,e,l,l,o
}

与for...in区别：

本质上for...in遍历的是数据的key，而for...of遍历的是数据的value

for(let val in "hello"){
    console.log(val)//0,1,2,3,4
}

总结：

普通对象使用for...in遍历，其它具有[Symbol.iterator]属性的对象则使用for...of遍历