一抬驴、for...of
1.定義
for...of 語句遍歷可迭代對(duì)象（包括數(shù)組秒啦、Set 和 Map 結(jié)構(gòu)、arguments 對(duì)象鸥鹉、DOM NodeList 對(duì)象蛮穿、字符串等）。
2.語法
for (variable of iterable) {
//statements
}
3.示例
<ul>
<li>mazey</li>
<li>luna</li>
<li>cherrie</li>
</ul>
<script>
// 數(shù)組
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
// 類數(shù)組對(duì)象
let obj = {
0: 'mazey',
1: 'luna',
2: 'cherrie',
length: 3
};
// 需使用Array.from轉(zhuǎn)換成可迭代對(duì)象
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 區(qū)別
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 會(huì)把對(duì)象上手動(dòng)添加的屬性和原型上的屬性暴露出來
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 其它優(yōu)點(diǎn)
1.相對(duì)于數(shù)組自帶的 forEach 方法灸异，for...of 可以與 break府适、continue 和 return 配合使用。
2.正確識(shí)別32位 UTF-16 字符肺樟。
