JS【数组合并】的性能差异对比

简介: 数组合并可以说是我们在操作数组中最常遇到的场景之一!本篇将简要分析三种数组合并的方法,并带来它们的性能差异分析~

image.png

数组合并可以说是我们在操作数组中最常遇到的场景之一!

本篇将简要分析三种数组合并的方法,并带来它们的性能差异分析~


它们是:

  • Concat
  • Push
  • Spread Syntax


闲言少叙,冲ヾ(◍°∇°◍)ノ゙


Concat



Concat 是 JavaScript 的标准方法:用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

  • Array.prototype.concat()

image.png


如图示:

image.png


图片来源


array2 合并到了 array1 后面,得到了一个新的 result 数组;


Push



Push 也是合并数组常用方法,可将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

  • Array.prototype.push()

image.png

image.png


图片来源

与 concat 不同的时,push 方法会更改原数组,如图示,array1 发生了变化;

push 方法按照以上用循环的方式写,显然是不够“美妙的”,所以有了一个新的语法来支持优化它:那就是扩展运算符;


Spread Syntax



扩展运算符 (spread syntax) 是 ES6 提供的一种非常便捷的新语法,用来展开字符串,数组和对象;

合并方法如下:

image.png

一行就解决:

image.png


图片来源


性能对比



以上 3 中数组合并方法的性能测评基于第三方库 github.com/ecofic/arti…,可以 clone 下来,运行调试:

image.png


这里,我们尝试从 3 个维度来进行测试:(分别用1、10、100、1000、100,000、100,000、1,000,000元素数组进行100次测试)


  1. 基本类型数组;
  2. 对象数组;
  3. 基本类型和对象混合的数组;


得到以下数据:

image.png


绿块代表着数组合并的性能较优,红色反之较差;


可以很明显的看到:扩展运算法的合并方法性能较优,但是不适用于长度较大的数组,会得到 N/A 的结果;(原作者测出这个长度边界值是 63,653)

所以,最终给到一个结论是:


合并长度小的数组,用扩展运算符;合并长度较大的数组,用 concat!

简单又实用~~


OK,以上便是本篇分享~


相关文章
|
8天前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-数组的遍历
关于JavaScript数组遍历基础知识的文章。
27 2
JavaScript基础知识-数组的遍历
|
2天前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-数组的练习
关于JavaScript基础知识中数组操作的练习,主要介绍了如何从一个包含Person对象的数组中过滤出成年人(年龄达到18岁及以上)并将他们放入一个新的数组中。
25 1
JavaScript基础知识-数组的练习
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
15 1
JavaScript基础知识-数组的常用方法
|
17天前
|
JavaScript 前端开发 索引
JavaScript基础知识-数组基于索引访问
关于JavaScript数组基于索引访问的基础知识介绍。
13 1
JavaScript基础知识-数组基于索引访问
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-数组的定义方式
本文介绍了JavaScript中数组的多种定义方式。
11 1
JavaScript基础知识-数组的定义方式
|
1天前
|
JavaScript 前端开发 索引
|
7天前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
29 5
|
7天前
|
JavaScript
js 循环数组取值
js 循环数组取值