在前端开发中，经常需要对数组进行合并，而 Array.prototype.concat() 方法是一个很常用的方法。基于这个方法，我们可以轻松地将多个数组合并成一个新数组。但是，实际使用中我们会发现，在某些场景下， Array.prototype.concat() 方法会让开发变得复杂，而我们需要寻找更好的解决方式。
问题的表现
在实际的开发中，我们大多数时候使用的是类数组（比如 node-list 和 arguments 对象）来代替数组。由于类数组并没有内置 concat 方法，我们需要借助 Array.prototype.concat() 来实现类数组的合并操作。
以下是一个简单的使用 Array.prototype.concat() 合并类数组的例子：
const nodeList = document.querySelectorAll('.node');
const arguments = [1, 2, 3];
const newArray = Array.prototype.concat.call(nodeList, arguments);
console.log(newArray); // [nodeListItem1, nodeListItem2, ..., 1, 2, 3]在这个例子中，我们想要将 nodeList 和 arguments 合并成一个新数组，但是使用 Array.prototype.concat() 会稍微麻烦一些。
Array.prototype.concat() 的问题
在实际使用中，我们可能会遇到以下几个问题：
1. concat 可能会复制类数组中的元素
在使用 Array.prototype.concat() 方法合并多个数组时，原数组的引用关系并没有改变，concat 返回值是一个新数组。但是当原数组中含有对象类型的数据时，还会存在引用关系。
考虑以下的例子：
-- -------------------- ---- ------- ----- ---- - -------- ---- ----- ---- - -------- ---- ----- ---- - -------- ---- ----- ------ - ----------------- ------ --------------- - -- ------------------ -- -------- ---
在这个例子中，我们将三个数组合并为一个新数组。当我们改变新数组 newArr 中的第一个元素时，原数组 arr1 中的元素值也会被改变，因为 newArr 中的第一个元素和原数组中的第一个元素是相同的对象引用。
2. 类数组不能直接使用 concat 方法
如果我们想要合并两个类数组，那么我们必须使用 Array.prototype.concat() 来实现。这使得代码显得很奇怪，不够紧凑和不容易阅读。
3. concat 的参数顺序
在使用 Array.prototype.concat() 方法合并多个数组时，我们必须记住用数组的形式传递所有参数，并且参数的顺序非常重要。如果我们不按照正确的顺序传递参数，可能会得到意料之外的结果。
考虑以下的例子：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const newArr = arr1.concat(arr2, 7, 8); console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8]
在这个例子中，我们使用 concat 方法合并了两个数组，以及两个数字。如果我们没有按照正确的顺序传递参数，我们可能会得到意料之外的合并结果。
解决方案
我们可以使用 spread 运算符来解决使用 Array.prototype.concat() 方法时遇到的问题。Spread 运算符可以将数组展开成独立的元素。
以下是利用 spread 运算符合并类数组的方法：
const nodeList = document.querySelectorAll('.node');
const arguments = [1, 2, 3];
const newArray = [...nodeList, ...arguments];
console.log(newArray); // [nodeListItem1, nodeListItem2, ..., 1, 2, 3]以上代码展示了如何使用 spread 运算符来合并类数组以及数组的方法。
总结
虽然 Array.prototype.concat() 方法很简单，但是在代码实现时它并不好用，因为它会带来类数组复制的问题，使得代码杂乱无章，可读性差。Spread 运算符则提供了一个简单、更优雅的替代方案。现在有了更好的方案，我们应该避免使用 Array.prototype.concat() 方法，并始终使用 spread 运算符来合并数组和类数组。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c49f3083d39b4881814ee1