第 50 題：為什么 for 循環嵌套順序會影響性能？

核心：循環次數少的放在外層，減少內層變量的操作次數

// 嵌套方式一
function first() {
    let startTime = new Date().getTime();

    for (let i = 0; i < 100; i++) {
        for (let j = 0; j < 1000; j++) {
            for (let k = 0; k < 10000; k++) {}
        }
    }

    let endTime = new Date().getTime();

    return endTime - startTime + 'ms';
}

// 嵌套方式二
function second() {
    let startTime = new Date().getTime();

    for (let i = 0; i < 10000; i++) {
        for (let j = 0; j < 1000; j++) {
            for (let k = 0; k < 100; k++) {}
        }
    }

    let endTime = new Date().getTime();

    return endTime - startTime + 'ms';
}

console.log(first()); // 382ms
console.log(second()); // 501ms

嵌套方式一

• i 執行 1 次 j 就會執行 1000 次 k 就會執行 1000 * 10000 次
• i 執行 100 次 j 就會執行 100 _ 1000 次 k 就會執行 100 _ 1000 * 10000 次
• 總次數 = i(100) + j(100,000) + k(1,000,000,000) = 1,000,100,100 次

循環體內執行次數為：1,000,100,100 次

嵌套方式二

• i 執行 1 次 j 就會執行 1000 次 k 就會執行 1000 * 100 次
• i 執行 10000 次 j 就會執行 10000 _ 1000 次 k 就會執行 10000 _ 1000 * 100 次
• 總次數= i(10,000) + j(10,000,000) + k(100,000,000) = 110,010,000 次

循環體內執行次數為：110,010,000 次

文章的內容/靈感都從下方內容中借鑒

• 【持續維護/更新 500+前端面試題/筆記】https://github.com/noxussj/Interview-Questions/issues

• 【大數據可視化圖表插件】https://www.npmjs.com/package/ns-echarts

• 【利用 THREE.JS 實現 3D 城市建模（珠海市）】https://3d.noxussj.top/