JavaScript Array methods performance compare
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的更多相关文章
- [Javascript ] Array methods in depth - sort
Sort can automatically arrange items in an array. In this lesson we look at the basics including how ...
- [Javascript] Array methods in depth - filter
Array filter creates a new array with all elements that pass the test implemented by the provided fu ...
- [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 ' ...
- javascript Array Methods(学习笔记)
ECMAScript 5 定义了9个新的数组方法,分别为: 1.forEach(); 2.map(); 3.filter(); 4.every(); 5.some(); 6.reduce() ...
- [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 ...
- [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 ...
- [Javascript] Array methods in depth - some
some returns a boolean value after passing each item in the source array through the test function t ...
- JavaScript Array 对象
JavaScript Array 对象 Array 对象 Array 对象用于在变量中存储多个值: var cars = ["Saab", "Volvo", & ...
- JavaScript Array(数组)对象
一,定义数组 数组对象用来在单独的变量名中存储一系列的值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, elem ...
随机推荐
- ProbabilityStatistics
class ProbabilityStatistics: @staticmethoddef simulation_of_probability(v, ratio=10000): assert v &g ...
- nginx proxy pass redirects ignore port
nginx proxy pass redirects ignore port $host in this order of precedence: host name from the request ...
- Hugo 博客中文指南(基础教程)
1. 安装 Hugo 从 Hugo 项目主页下载 Releases 文件,解压 hugo.exe 文件到 C:\Windows\System32 目录下. 2. 创建站点 hugo new site ...
- SVN、GIT比较
Git是分布式的,完全可以不备份代码,下载下来后,在本地不必联网就可以看到所有的log,跟其他同事不会有太多的冲突,自己写的代码放在自己电脑上,一段时间后再提交.合并,也可以不用联网在本地提交 SVN ...
- python ---strip()方法,split()方法,删除字符串开头或结尾,字符串分隔
本文介绍了strip()方法,split()方法, 字典的按键值访问的方法, 1.Python strip() 方法用于移除字符串头尾指定的字符(默认为空格)或字符序列. 注意:该方法只能删除开头或是 ...
- java使用Test测试接口类
package com.jy.demo.web; import java.util.Map; import org.junit.BeforeClass; import org.junit.Test; ...
- allure生成的报告打开后显示loading
allure生成的报告打开后显示loading,怎么办? 1. allure生成报告的命令 1.1.生成测试数据 # 命令格式:pytest 相关参数 指定执行的用例 --alluredir=数据存放 ...
- SDNUOJ1016矩形合并
传送门 题意: 给出n个矩形,把重合的矩形归成一个图形,问合并以后剩下几个图形 思路: 我开始想用dfs,但是发现不太行. 后来知道才是并查集 Orz 用一个结构体数组存矩形的左下角和右上角的坐标,再 ...
- 前n项余数个数和
一:O(n) 计算贡献:前n项中,能被i(1~n)整除的数的个数为(n/i)个,,也就是 i 给前n项中(n/i)个数做了余数 #include<iostream> using names ...
- Codeforces Round #622 (Div. 2) B. Different Rules(数学)
Codeforces Round #622 (Div. 2) B. Different Rules 题意: 你在参加一个比赛,最终按两场分赛的排名之和排名,每场分赛中不存在名次并列,给出参赛人数 n ...