JavaScript 中合并数组的两种方法
这里有两种方法可以合并数组并返回一个新数组。我喜欢使用扩展运算符（Spread）。但如果您需要兼容旧版浏览器，则应该使用连接运算符（Concat）。
// 2 Ways to Merge Arrays
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
// Method 1: Concat
const combined1 = [].concat(cars, trucks);
// Method 2: Spread
const combined2 = [...cars, ...trucks];
// Result
// [ '🚗', '🚙', '🚚', '🚛' ]
替代连接语法
或者，您也可以concat这样编写该方法：
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
const combined = cars.concat(trucks);
// [ '🚗', '🚙', '🚚', '🚛' ]
console.log(cars); // ['🚗', '🚙'];
console.log(trucks); // ['🚚', '🚛'];
如您所见，这种编写方式不会操作或更改现有数组。
我应该选哪一个？
让我们把这两个版本列出来，以便进行比较。
// Version A:
const combinedA = [].concat(cars, trucks);
// Version B:
const combinedB = cars.concat(trucks);
所以现在的问题是，我应该选哪个呢🤔。我比较喜欢版本 A，因为我觉得它的意图更清晰。光看代码就知道我是在创建一个新数组，而不是修改现有数组。而版本 B看起来像是在往现有数组trucks里添加新数组cars，我不太明白它是否cars真的修改了现有数组。不过，也许只是我的感觉。我很想知道你们的看法？
除了美观之外，我并没有其他更充分的理由，所以我认为你和你的团队应该坚持你们的选择👍
Spread 与 Concat 的区别
我更喜欢使用spread，因为我觉得它更简洁，也更容易书写。但是，使用仍然有其优势concat。
当你事先知道要处理数组时，展开运算符（spread）非常有用。但如果数据源是其他类型的数据，例如字符串，而你想将该字符串添加到数组中，该怎么办呢？让我们来看一个例子。
例如：处理任意论证
假设这是我们想要的结果：
[1,2,3,'random']
A. 利用价差
如果我们沿用之前的模式，使用扩展运算符，结果如下：
function combineArray(array1, array2) {
return [...array1, ...array2];
}
const isArray = [1,2,3];
const notArray = 'random';
combineArray(isArray, notArray);
// 😱 [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]
☝️ 如果我们展开字符串，它会将单词拆分成单个字母。因此，它无法达到我们想要的结果。
B. 使用 Concat
但是，如果我们继续沿用之前的连接模式，就会发生以下情况：
function combineArray(array1, array2) {
return [].concat(array1, array2);
}
const isArray = [1,2,3];
const notArray = 'random';
combineArray(isArray, notArray);
// ✅ [ 1, 2, 3, 'random' ]
☝️ 太棒了！我们得到了想要的结果。
我知道你们有些人会想，废话！我只要写个条件语句确保传入的是个数组，然后根据情况执行就行了。当然，那样也行得通。或者干脆少写点代码，直接用数组concat就完事了😂
判决
所以，这里有个简单的规则。如果你确定要处理的是数组，就用 ` spread.`。但如果你有可能要处理非数组类型的数据，那就用 `.`concat来合并数组 👍
总之，我只是想指出这一点，这样你就可以根据你要解决的问题选择最合适的方法了👍
使用推送合并数组 🤔
有些人会问，嘿，我能不能也用push`merge` 来合并数组？当然可以！但是当你使用 `merge` 时push，它会操作或更改现有数组，而不是创建一个新数组。所以，这取决于你想做什么。请务必记住这一点。
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
const combined = cars.push(...trucks);
console.log(combined); // 4
// ☝when you use push, it returns the LENGTH of the combined array
console.log(cars); // [ '🚗', '🚙', '🚚', '🚛' ]
console.log(trucks); // ['🚚', '🚛']
另外，当你想把一个数组添加到另一个数组中时，你需要展开它，否则你会得到一个嵌套数组。当然，除非你想要的就是这种嵌套😜
const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];
cars.push(trucks);
// 😱 cars: [ '🚗', '🚙', [ '🚚', '🚛' ] ]
cars.push(...trucks);
// ✅ cars: [ '🚗', '🚙', '🚚', '🚛' ]
浏览器支持
Spread 运算符是在 ES6 中引入的，因此所有现代浏览器都支持它。除了自以为是的 Internet Explorer——它不支持 Spread 😕。所以，如果您需要 IE 支持，则需要使用其他方法，或者使用像Babelconcat这样的编译器。
资源
感谢阅读❤
欢迎关注！Instagram | Twitter | Facebook | Medium |博客