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,以上便是本篇分享~


相关文章
|
2月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
195 77
|
2月前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
134 62
|
2月前
|
JavaScript 前端开发
如何使用时间切片来优化JavaScript动画的性能?
如何使用时间切片来优化JavaScript动画的性能?
|
2月前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
77 31
|
1月前
|
JSON 缓存 负载均衡
Node.js 的性能
Node.js 的性能
57 12
|
2月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
2月前
|
JavaScript 前端开发
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
|
2月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
53 1
|
2月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
|
2月前
|
存储 缓存 自然语言处理
掌握JavaScript闭包,提升代码质量与性能
掌握JavaScript闭包,提升代码质量与性能
下一篇
开通oss服务