javascriptES6 for of的用法与for in的区别

今天说一下es6的for of用法与for in的区别。

使用例子（一）

var arr = ['nick','freddy','mike','james'];
for(var item of arr){
    console.log(item);
}

输出结果：



遍历数组里的每一项。

使用例子（二）

var arr = [
    { name:'nick', age:18 },
    { name:'freddy', age:24 },
    { name:'mike', age:26 },
    { name:'james', age:34 }
];
for(var item of arr){
    console.log(item.name,item.age);
}

输出结果：



遍历数组里的每一项。 

与for in 区别

区别1：for of无法循环遍历对象

var userMsg = {
    0: 'nick',
    1: 'freddy',
    2: 'mike',
    3: 'james'
};

for(var key in userMsg){
    console.log(key, userMsg[key]);
}
console.log('-----------分割线-----------');
for(var item of userMsg){
    console.log(item);
}

输出结果：



区别2：遍历输出结果不同

var arr = ['nick','freddy','mike','james'];
for(var key in arr){
    console.log(key);
}
console.log('-----------分割线-----------');
for(var item of arr){
    console.log(item);
}

输入结果：



不难看出，for in循环遍历的是数组的键值(索引)，而for of循环遍历的是数组的值。

区别3：for in 会遍历自定义属性，for of不会

var arr = ['nick','freddy','mike','james'];
arr.name = "数组";

for(var key in arr){
    console.log(key+': '+arr[key]);
}
console.log('-----------分割线-----------');
for(var item of arr){
    console.log(item);
}

输入结果：



给数组添加一个自定义属性name，并且赋值"数组"。然后进行遍历输出的，会发现新定义的属性也被for in输出来了，而for of并不会对name进行输出。

如果想让对象可以使用 for of循环怎么办?使用 Object.keys() 获取对象的 key值集合后,再使用 for of

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.keys(obj)) {
    console.log(o) // a,b,c,d
}

或者使用内置的Object.values()方法获取对象的value值集合再使用for of

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.values(obj)) {
    console.log(o) // 1,2,3,4
}

循环一个字符串

let str = 'love'
for (let o of str) {
    console.log(o) // l,o,v,e
}

循环一个Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

循环一个Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

另一个方法是使用 Generator 函数将对象重新包装一下。

function* entries(obj) {
for (let key of Object.keys(obj)) {

yield [key, obj[key]];
}
}

for (let [key, value] of entries(obj)) {
console.log(key, '->', value);
}
// a -> 1
// b -> 2
// c -> 3