Javascript 中的 for 循環

零、前言

由於在項目中經常使用 js，而 for 循環又是經常使用。現在整理一下，方便在開發的時候選擇合適的方法。

一、準備

爲了更好的描述問題，先準備一個數組和一個對象類型數據，後面的代碼均用這兩個變量演示。

const arr = ["a", "b", "c", "d","e"];
const obj = {
    id: 234,
    name: "foo",
    account: "bar"
};

二、普通的 for 循環

這種是遍歷索引的方式，適用於數組。

for (let i = 0;i < arr.length;++i) {
    console.log(arr[i]);
}

三、for in

這種形式獲取數組的索引或對象的鍵，然後根據這個在獲取對應位置的值。

1. 數組遍歷

for (const x in arr) {
    console.log(x, "-", arr[x]);
}

2. 對象遍歷

for (const x in obj) {
    console.log(x, "-", obj[x]);
}

四、for of

此種循環遍歷可迭代對象，獲得的是對應的值，要獲得索引需要用 entries 方法。

for (const x of arr) {
    console.log(x);
}
for (const [i, x] of arr.entries()) {
    console.log(i, "-", x);
}

五、foreach

函數式遍歷可迭代對象

arr.forEach((v, i) => {
    console.log(i, "-", v);
});

六、Object 方法來輔助遍歷對象

1. keys()

遍歷對象的鍵返回數組。

for (let k of Object.keys(obj)) {
    console.log(k, '-', obj[k]);
}

2. values()

遍歷對象的值，返回值對應的數組。

for (let v of Object.values(obj)) {
    console.log(v);
}

3. entries()

遍歷對象鍵值對，返回數組。

for (let [k, v] of Object.entries(obj)) {
    console.log(k, "-", v);
}