js-for循环的性能优化

只要做开发，就一直听别人说性能 性能 性能。但是我们能通过哪些方式使我们的代码性能更好呢？

这里的性能在我看来就是用尽可能少的空间、时间去做相同的事儿。

还是个小菜鸡，如有不对的地方还望大家指正。

首先，我们先做个初始数据 ：

let arr = []
for (let a = 0; a < 100; a++) {
    arr[a] = []
    for (let b = 0; b < 100; b++) {
        arr[a][b] = []
        for (let c = 0; c < 100; c++) {
            arr[a][b][c] = c
        }
    }
}

普通的for循环 —— 4.673ms

    console.time("demo1")
    for (let a = 0; a < arr.length; a++) {
        for (let b = 0; b < arr[a].length; b++) {
            for (let c = 0; c < arr[a][b].length; c++) {
            }
        }
    }
    console.timeEnd("demo1")	// demo1: 4.673ms

最原始的for循环耗时，单单这一个时间可能你也没觉得有多慢。

我们接着往下看。

第一次优化 —— 0.103ms

    console.time("demo2")
    let a = b = c = 0
    for (; a < arr.length; a++) {
        for (; b < arr[a].length; b++) {
            for (; c < arr[a][b].length; c++) {
            }
        }
    }
    console.timeEnd("demo2")	// demo2: 0.103ms

不得了，4.673ms 直接缩成 0.103ms！这里不过就是把 for 循环的初始化放到了外面。由此可以看出可能 for 循环 带着 初始化表达式一遍遍的过着那循环体也说不定。不管因为啥，这初始化的部分以后咱还是交给门口月下四兄贵来解决吧。

第二次优化 —— 0.048ms

    console.time("demo3")
    let a = b = c = 0
    let a_length = arr.length
    let b_length, c_length
    for (; a < a_length; a++) {
        b_length = arr[a].length
        for (; b < b_length; b++) {
            c_length = arr[a][b].length
            for (; c < c_length; c++) {
            }
        }
    }
    console.timeEnd("demo3")	// demo3: 0.048ms

效果没有上一次的那么大，这里则是优化了.length方法。在循环只初就存储.length，这样循环的时候就不需要每次都触发 . 方法找length。

由于JS本身的原因，上述时间打印每次都互不相同。但之间的差值还是相差无几的。只要做到了第一次优化的地方，性能上就已经有很大的提升了。如果数组很多或者对象数据量太大，就用上述第二次优化方案，将各个.方法用变量保存一下，方便直接调用。

如果有更漂亮的写法欢迎来讨论，让我们一起有条不紊的持续进步。
喜欢的话不妨点个小小的赞与关注，您的赞与关注将是我源源不断的前进动力。