for in 和 for of

for in 和 for of的区别

• for in 遍历得到 key

// 遍历数组
const arr = ["aa", "bb", "cc"];

for(let key in arr) {
    console.log(key); // 0 1 2
}

// 遍历对象
const obj = {name: "dj", age: 20};

for(let item in obj) {
    console.log(item); // name age
}

• for of 遍历得到 value

// 遍历数组
const arr = ["aa", "bb", "cc"];

for(let value of arr) {
    console.log(value); // aa bb cc
}

// 遍历字符串
const str = "abc";

for(let i of str) {
    console.log(i); // a b c
}

// 遍历参数
function fn() {
    for(let arg of arguments) {
        console.log(arg); // a b c
    }
}

fn("a", "b", "c");

// 遍历dom节点
const domList = document.querySelectorAll("p");
for(let dom of domList) {
    console.log(dom); // p p p
}

// 遍历 set
const set = new Set([10, 20, 30]);
for(let s of set) {
    console.log(s); // 10 20 30
}

// 遍历 map
const map = new Map([
    ['x', 100],
    ['y', 200],
])

for(let m of map) {
    console.log(m); // ['x', 100]  ['y', 200]
}

// 遍历 generator
const map = new Map([
    ['x', 100],
    ['y', 200],
])

for(let m of map) {
    console.log(m); // ['x', 100]  ['y', 200]
}

使用与不同的数据类型

• 遍历对象

for in 可以，for of 不可以

• 遍历 Map Set

for of 可以，for in 不可以

• 遍历 generator

for of 可以，for in 不可以

可枚举 vs 可迭代

• for in 用于可枚举的数据，如数组、对象、字符串

• for of 用于可迭代的数据，如数组、字符串、Map、Set