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

single item, test result

multi items, test result

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

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

refs

https://javascript.info/array#performance



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


JavaScript Array methods performance compare的更多相关文章

  1. [Javascript ] Array methods in depth - sort

    Sort can automatically arrange items in an array. In this lesson we look at the basics including how ...

  2. [Javascript] Array methods in depth - filter

    Array filter creates a new array with all elements that pass the test implemented by the provided fu ...

  3. [Javascript] Array methods in depth - slice

    Array slice creates a shallow copy of an array. In this lesson we cover, in detail, exactly what a ' ...

  4. javascript Array Methods(学习笔记)

    ECMAScript 5 定义了9个新的数组方法,分别为: 1.forEach();  2.map();  3.filter();  4.every();  5.some();  6.reduce() ...

  5. [Javascript] JavaScript Array Methods in Depth - push

    Array push is used to add elements to the end of an Array. In this lesson we'll see how the push met ...

  6. [Javascript] Array methods in depth - indexOf

    indexOf is used to search for a value or reference inside of an array. In this lesson we first look ...

  7. [Javascript] Array methods in depth - some

    some returns a boolean value after passing each item in the source array through the test function t ...

  8. JavaScript Array 对象

    JavaScript Array 对象 Array 对象 Array 对象用于在变量中存储多个值: var cars = ["Saab", "Volvo", & ...

  9. JavaScript Array(数组)对象

    一,定义数组 数组对象用来在单独的变量名中存储一系列的值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, elem ...

随机推荐

  1. ProbabilityStatistics

    class ProbabilityStatistics: @staticmethoddef simulation_of_probability(v, ratio=10000): assert v &g ...

  2. nginx proxy pass redirects ignore port

    nginx proxy pass redirects ignore port $host in this order of precedence: host name from the request ...

  3. Hugo 博客中文指南(基础教程)

    1. 安装 Hugo 从 Hugo 项目主页下载 Releases 文件,解压 hugo.exe 文件到 C:\Windows\System32 目录下. 2. 创建站点 hugo new site ...

  4. SVN、GIT比较

    Git是分布式的,完全可以不备份代码,下载下来后,在本地不必联网就可以看到所有的log,跟其他同事不会有太多的冲突,自己写的代码放在自己电脑上,一段时间后再提交.合并,也可以不用联网在本地提交 SVN ...

  5. python ---strip()方法,split()方法,删除字符串开头或结尾,字符串分隔

    本文介绍了strip()方法,split()方法, 字典的按键值访问的方法, 1.Python strip() 方法用于移除字符串头尾指定的字符(默认为空格)或字符序列. 注意:该方法只能删除开头或是 ...

  6. java使用Test测试接口类

    package com.jy.demo.web; import java.util.Map; import org.junit.BeforeClass; import org.junit.Test; ...

  7. allure生成的报告打开后显示loading

    allure生成的报告打开后显示loading,怎么办? 1. allure生成报告的命令 1.1.生成测试数据 # 命令格式:pytest 相关参数 指定执行的用例 --alluredir=数据存放 ...

  8. SDNUOJ1016矩形合并

    传送门 题意: 给出n个矩形,把重合的矩形归成一个图形,问合并以后剩下几个图形 思路: 我开始想用dfs,但是发现不太行. 后来知道才是并查集 Orz 用一个结构体数组存矩形的左下角和右上角的坐标,再 ...

  9. 前n项余数个数和

    一:O(n) 计算贡献:前n项中,能被i(1~n)整除的数的个数为(n/i)个,,也就是 i 给前n项中(n/i)个数做了余数 #include<iostream> using names ...

  10. Codeforces Round #622 (Div. 2) B. Different Rules(数学)

    Codeforces Round #622 (Div. 2) B. Different Rules 题意: 你在参加一个比赛,最终按两场分赛的排名之和排名,每场分赛中不存在名次并列,给出参赛人数 n ...