经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
Concat、Push、Spread syntax性能差异对比
来源:cnblogs  作者:辜负寒彻骨  时间:2024/1/26 10:05:51  对本文有异议

今天在力扣上做了一道数组扁平化的题,按理来说,应该熟能生巧了,但是在使用concat时候超出了时间限制,使用push可以通过,代码如下:

  1. /**
  2. * @describe 使用concat,超出时间限制
  3. * @param {Array} arr
  4. * @param {number} depth
  5. * @return {Array}
  6. */
  7. var flat = function (arr, n) {
  8. if(n == 0) return arr
  9. return arr.reduce((prev, cur, index, arr) => {
  10. return prev.concat(cur instanceof Array ? flat(cur, n - 1) : cur)
  11. }, [])
  12. };
  1. /**
  2. * @describe 使用push,通过
  3. * @param {Array} arr
  4. * @param {number} depth
  5. * @return {Array}
  6. */
  7. var flat = function (arr, n) {
  8. if(n == 0) return arr
  9. return arr.reduce((prev, cur, index, arr) => {
  10. cur instanceof Array ? prev.push(...flat(cur, n - 1)) : prev.push(cur)
  11. return prev
  12. }, [])
  13. };

三种数组合并的方法:

  • Concat
  • Push
  • Spread Syntax

Concat

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

  • Array.prototype.concat()
  1. const result = array1.concat(array2);

image.png

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

Push

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

  • Array.prototype.push()
  1. for(let i = 0; i < array2.length; i++) {
  2. array1.push(array2[i]);
  3. }

image.png

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

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

Spread Syntax

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

合并方法如下:

  1. array1.push(...array2)

一行就解决:

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!

原文链接:https://www.cnblogs.com/gfhcg/p/17988184

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号