JS中使用new Array()與使用Array.from()方式建立二維陣列的效能比較

樊顺發表於2024-11-23
JS陣列

比較 1，單次建立小額陣列：

1. 透過new Array()方式

function t() {
    console.time();
    new Array(100).fill().map(() => new Array(10));
    console.timeEnd();
}

執行5次耗時：

  1. 0.078125 ms
  2. 0.050048828125 ms
  3. 0.0380859375 ms
  4. 0.031005859375 ms
  5. 0.093017578125 ms

2. 透過Array.from()方式

function t() {
    console.time();
    Array.from({ length: 100 }, () => new Array(10));
    console.timeEnd();
}

執行5次耗時：

  1. 0.115966796875 ms
  2. 0.045166015625 ms
  3. 0.0458984375 ms
  4. 0.046142578125 ms
  5. 0.09912109375 ms

3. 透過樸素for迴圈方式

function t() {
    console.time();
    const a = new Array(100);
    for (let i = 0; i < 100; i++) {
        a[i] = new Array(10);
    }
    console.timeEnd();
}

執行5次耗時：

  1. 0.05908203125 ms
  2. 0.047119140625 ms
  3. 0.02001953125 ms
  4. 0.016845703125 ms
  5. 0.02099609375 ms

總結：以粗略的平均耗時進行從快到慢排名，方式3(0.033ms) -> 方式1(0.058ms) -> 方式2(0.070ms)。

比較 2，多次建立小額陣列：

1. 透過new Array()方式

function test() {
    console.time();
    for (let i = 0; i < 10 ** 5; i++) {
        new Array(100).fill().map(() => new Array(10));
    }
    console.timeEnd();
}

執行5次耗時：

  1. 78.958984375 ms
  2. 66.5771484375 ms
  3. 75.095947265625 ms
  4. 74.529052734375 ms
  5. 74.527099609375 ms

2. 透過Array.from()方式

function test() {
    console.time();
    for (let i = 0; i < 10 ** 5; i++) {
        Array.from({ length: 100 }, () => new Array(10));
    }
    console.timeEnd();
}

執行5次耗時：

  1. 301.885009765625 ms
  2. 301.829833984375 ms
  3. 302.973876953125 ms
  4. 305.974853515625 ms
  5. 300.94482421875 ms

3. 透過樸素for迴圈方式

function test() {
    console.time();
    for (let i = 0; i < 10 ** 5; i++) {
        const a = new Array(100);
        for (let i = 0; i < 100; i++) {
            a[i] = new Array(10);
        }
    }
    console.timeEnd();
}

執行5次耗時：

  1. 60.8369140625 ms
  2. 60.953125 ms
  3. 60.804931640625 ms
  4. 60.619873046875 ms
  5. 60.380859375 ms

總結：以粗略的平均耗時進行從快到慢排名，方式3(60.72ms) -> 方式1(73.94ms) -> 方式2(302.72ms)。

相關文章