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

举报
掘金安东尼 发表于 2022/08/23 09:25:19 2022/08/23
【摘要】 数组合并可以说是我们在操作数组中最常遇到的场景之一!本篇将简要分析三种数组合并的方法,并带来它们的性能差异分析~它们是:ConcatPushSpread Syntax闲言少叙,冲ヾ(◍°∇°◍)ノ゙ ConcatConcat 是 JavaScript 的标准方法:用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。Array.prototype.concat()如图示:图片来...

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

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

它们是:

  • 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 中数组合并方法的性能测评基于第三方库 https://github.com/ecofic/article-efficiently-merging-arrays-in-javascript,可以 clone 下来,运行调试:

image.png

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

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

得到以下数据:

image.png

image.png

image.png

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

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

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

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

简单又实用~~


OK,以上便是本篇分享~

我是掘金安东尼,输出暴露输入,技术洞见生活,再会~~

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。