JavaScript Array methods performance compare

JavaScript數組方法的性能對比

env

$ node -v
# v12.18.0

push vs unshift

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-07-20
 * @modified
 *
 * @description push-vs-unshift
 * @difficulty Easy Medium Hard
 * @complexity O(n)
 * @augments
 * @example
 * @link
 * @solutions
 *
 */

const log = console.log;

function test (arr = [], type = `push`) {
  const begin = new Date().getTime();
  log(`begin`, begin);
  if(type === `push`) {
    // 在數組后面插入元素
    arr.push(arr.length + 1)
  } else {
    // 在數組前面插入元素
    arr.unshift(arr.length + 1)
  }
  const end = new Date().getTime();
  log(`end`, end);
  log(`\n${type}, end - begin`, end - begin);
}

function multiTest (arr = [], num = 1, type = `push`) {
  const begin = new Date().getTime();
  log(`begin`, begin);
  if(type === `push`) {
    // 在數組后面插入元素
    for (let i = 0; i < num; i++) {
      arr.push(arr.length + 1 + i)
    }
  } else {
    // 在數組前面插入元素
    for (let i = 0; i < num; i++) {
      arr.unshift(arr.length + 1 + i)
    }
  }
  const end = new Date().getTime();
  log(`end`, end);
  log(`\n${type}, end - begin`, end - begin);
}

const noForArrayAutoGenerator = (len = 100) => {
  // return [...``.padStart(len, ` `)].map((item, i) => i + 1).map((item, i) => i % 2 === 0 ? item : item + ``);
  return [...``.padStart(len, ` `)].map((item, i) => i % 2 === 0 ? i + 1 : i + 1 + ``);
}

// const arr = noForArrayAutoGenerator(10000 * 10);
const arr = noForArrayAutoGenerator(10000 * 1000);

const arr1 = [...arr];
const arr2 = [...arr];


// test(arr1, `push`);
// test(arr2, `unshift`);

const nums = 100;
multiTest(arr1, nums, `push`);
multiTest(arr2, nums, `unshift`);

one item, test result

multi items, test result

GC & stack overflow bug


// const arr = noForArrayAutoGenerator(10000 * 10000);
// FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

/*

<--- Last few GCs --->
nce start of marking 998 ms) (average mu = 0.409, current mu = 0.065) allocation[9479:0x102d59000]    15026 ms: Mark-sweep 2062.8 (2065.0) -> 2062.8 (2065.0) MB, 768.1 / 0.0 ms  (+ 0.0 ms in 0 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 834 ms) (average mu = 0.287, current mu = 0.079) last resor[9479:0x102d59000]    16001 ms: Mark-sweep 2062.8 (2065.0) -> 2062.8 (2065.0) MB, 974.9 / 0.0 ms  (average mu = 0.155, current mu = 0.000) last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x1009d6059]
    1: StubFrame [pc: 0x100a17a54]
Security context: 0x2480d7d808d1 <JSObject>
    2: anonymous (aka anonymous) [0x2480d5c82c81] [/Users/xgqfrms-mbp/Documents/GitHub/AFES/js-basic/array/push-vs-unshift.js:~40] [pc=0x320f7c803a7b](this=0x24805b8004b1 <undefined>,46758526,46758525)
    3: map [0x2480d7d95609](this=0x2480d5c82c61 <JSArray[100000000]>,0x2480d5c82c81 <JSFunction (sfi = 0x24804...

*/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

pop vs shift

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-07-20
 * @modified
 *
 * @description pop-vs-shift
 * @difficulty Easy Medium Hard
 * @complexity O(n)
 * @augments
 * @example
 * @link
 * @solutions
 *
 */

const log = console.log;

function test (arr = [], type = `pop`) {
  const begin = new Date().getTime();
  log(`begin`, begin);
  if(type === `pop`) {
    // 在數組后面刪除元素
    arr.pop();
  } else {
    // 在數組前面刪除元素
    arr.shift()
  }
  const end = new Date().getTime();
  log(`end`, end);
  log(`\n${type}, end - begin`, end - begin);
}

function multiTest (arr = [], num = 1, type = `pop`) {
  const begin = new Date().getTime();
  log(`begin`, begin);
  if(type === `pop`) {
    // 在數組后面刪除元素
    for (let i = 0; i < num; i++) {
      arr.pop();
    }
  } else {
    // 在數組前面刪除元素
    for (let i = 0; i < num; i++) {
      arr.shift()
    }
  }
  const end = new Date().getTime();
  log(`end`, end);
  log(`\n${type}, end - begin`, end - begin);
}


const noForArrayAutoGenerator = (len = 100) => {
  // return [...``.padStart(len, ` `)].map((item, i) => i + 1).map((item, i) => i % 2 === 0 ? item : item + ``);
  return [...``.padStart(len, ` `)].map((item, i) => i % 2 === 0 ? i + 1 : i + 1 + ``);
}

// const arr = noForArrayAutoGenerator(10000 * 10);
const arr = noForArrayAutoGenerator(10000 * 1000);

// const arr = noForArrayAutoGenerator(10000 * 10000);
// FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory


const arr1 = [...arr];
const arr2 = [...arr];

// test(arr1, `pop`);
// test(arr2, `shift`);

const nums = 100;
multiTest(arr1, nums, `pop`);
multiTest(arr2, nums, `shift`);