for...of 与 for...in 区别

一、for...of

1.定义

for...of 语句遍历可迭代对象（包括数组、Set 和 Map 结构、arguments 对象、DOM NodeList 对象、字符串等）。

2.语法

for (variable of iterable) {
    //statements
}

3.示例

    
mazey
    
luna
    
cherrie

二、for...of 与 for...in 区别

1.for...in 遍历键名，for...of 遍历键值

let arr = ['mazey', 'luna', 'cherrie'];
for (let k in arr) {
    console.log(k);
}
// 0 1 2
for (let v of arr) {
    console.log(v);
}
// mazey luna cherrie

2.for...in 会把对象上手动添加的属性和原型上的属性暴露出来

let obj = {
    0: 'mazey',
    1: 'luna',
    2: 'cherrie',
    length: 3
};
obj.name = 'objName';
for (let k in obj) {
    console.log(k);
}
// 0 1 2 length name
for (let v of Array.from(obj)) {
    console.log(v);
}
// mazey luna cherrie

三、for...of 其它优点

1.相对于数组自带的 forEach 方法，for...of 可以与 break、continue 和 return 配合使用。
2.正确识别32位 UTF-16 字符。