Concat、Push、Spread syntax性能差异对比

时间：2024-01-25 21:14:04

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

/**
 * @describe 使用concat，超出时间限制
 * @param {Array} arr
 * @param {number} depth
 * @return {Array}
 */
var flat = function (arr, n) {
    if(n == 0) return arr
    return arr.reduce((prev, cur, index, arr) => {
        return prev.concat(cur instanceof Array ? flat(cur, n - 1) : cur)
    }, [])
};

/**
 * @describe 使用push，通过
 * @param {Array} arr
 * @param {number} depth
 * @return {Array}
 */
var flat = function (arr, n) {
    if(n == 0) return arr
    return arr.reduce((prev, cur, index, arr) => {
        cur instanceof Array ?  prev.push(...flat(cur, n - 1)) : prev.push(cur)
        return prev
    }, [])
};

三种数组合并的方法：

  • Concat
  • Push
  • Spread Syntax

Concat

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

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

image.png

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

Push

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

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

image.png

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

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

Spread Syntax

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

合并方法如下：

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！

相关文章