JavaScript中合并数组的N种方法

前端技术 2023/09/07 JavaScript

这是一篇简单的文章，关于JavaScript数组使用的一些技巧。我们将使用不同的方法结合/合并两个JS数组，以及讨论每个方法的优点/缺点。

让我们先考虑下面这情况：

复制代码 代码如下:

var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
var b = [ \"foo\", \"bar\", \"baz\", \"bam\", \"bun\", \"fun\" ];

很显然最简单的结合结果应该是：
复制代码 代码如下:

[
   1, 2, 3, 4, 5, 6, 7, 8, 9,
   \"foo\", \"bar\", \"baz\", \"bam\" \"bun\", \"fun\"
]

concat(..)

这是最常见的做法：

复制代码 代码如下:

var c = a.concat( b );
a; // [1,2,3,4,5,6,7,8,9]
b; // [\"foo\",\"bar\",\"baz\",\"bam\",\"bun\",\"fun\"]
c; // [1,2,3,4,5,6,7,8,9,\"foo\",\"bar\",\"baz\",\"bam\",\"bun\",\"fun\"]

正如你所看到的，C是一个全新的数组，表示a和b两个数组的组合，并让A和B不变。简单吧？

但如果a有10,000个元素，而b也有一万个元素？ C就会有2万个元素，所以a和b的内内存使用就会翻倍。

“没问题！”，你说。让它们被垃圾回收，把A和B设置为null，问题解决了！

复制代码 代码如下:

a = b = null; // \'a\'和\'b\'就被回收了

呵呵。对于只有几个元素的小数组，这没啥问题。但对于大数组，或者在内存有限的系统中需要经常重复这个过程，它其实还有很多改进的地方。

循环插入

好吧，让我们将一个数组的内容复制到另一个，使用： Array#push(..)

复制代码 代码如下:

// `b` onto `a`
for (var i=0; i < b.length; i++) {
    a.push( b[i] );
}
a; // [1,2,3,4,5,6,7,8,9,\"foo\",\"bar\",\"baz\",\"bam\",\"bun\",\"fun\"]
b = null;

现在，数组a有了数组b的内容。

似乎有更好的内存占用。

但如果a数组比较小？出于内存和速度的原因，你可能要把更小的a放到b的前面，。没问题，只需将push（..）换成unshift(..)即可：

复制代码 代码如下:

// `a` into `b`:
for (var i=a.length-1; i >= 0; i--) {
    b.unshift( a[i] );
}
b; // [1,2,3,4,5,6,7,8,9,\"foo\",\"bar\",\"baz\",\"bam\",\"bun\",\"fun\"]

功能技巧

不过for循环确实比较丑，而且不好维护。我们可以做的更好吗？

这是我们的第一次尝试，使用Array#reduce：

复制代码 代码如下:

// `b` onto `a`:
a = b.reduce( function(coll,item){
    coll.push( item );
    return coll;
}, a );

a; // [1,2,3,4,5,6,7,8,9,\"foo\",\"bar\",\"baz\",\"bam\",\"bun\",\"fun\"]

// or `a` into `b`:
b = a.reduceRight( function(coll,item){
    coll.unshift( item );
    return coll;
}, b );

b; // [1,2,3,4,5,6,7,8,9,\"foo\",\"bar\",\"baz\",\"bam\",\"bun\",\"fun\"]

本文地址：https://www.stayed.cn/item/20223

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案