一、for...of
1.定义
for...of 语句遍历可迭代对象（包括数组、Set 和 Map 结构、arguments 对象、DOM NodeList 对象、字符串等）。
2.语法
for (variable of iterable) {
//statements
}
3.示例
<ul>
<li>mazey</li>
<li>luna</li>
<li>cherrie</li>
</ul>
<script>
// 数组
let arr = ['mazey', 'luna', 'cherrie'];
for (let v of arr) {
console.log(v);
}
// mazey luna cherrie
// 字符串
let str = 'mlc';
for (let v of str) {
console.log(v);
}
// m l c
// 类数组对象
let obj = {
0: 'mazey',
1: 'luna',
2: 'cherrie',
length: 3
};
// 需使用Array.from转换成可迭代对象
for (let v of Array.from(obj)) {
console.log(v);
}
// mazey luna cherrie
// Set
let s = new Set(['mazey', 'luna', 'cherrie']);
for (let v of s) {
console.log(v);
}
// mazey luna cherrie
// Map
let m = new Map([
['name0', 'mazey'],
['name1', 'luna'],
['name2', 'cherrie']
]);
for (let [i, v] of m) {
console.log(v);
}
// mazey luna cherrie
// DOM NodeList
let domList = document.querySelectorAll('li');
for (let v of domList) {
console.log(v.innerText);
}
// mazey luna cherrie
</script>
二、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 字符。
