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`);