为什么在这种情况下使用 `concat` 而不是 `push`？

Question

我正在浏览这个问题的答案：Can I dispatch an action in reducer? 和this answer，我看到以下内容：

actionQueue = actionQueue.concat([asyncAction]);

本质上是一样的：

actionQueue.push(asyncAction);

（忽略concat调用正在创建一个新数组并将其重新分配给actionQueue，结果是相同的——一个附加了asyncAction的数组）。

最初，我认为它（也许）表现更好（不知何故），其他人显然想知道与他们在 jsperf 中击败我一样：Array .concat() vs. .push()。

正如 jsperf 测试的结果所示，concat 方法明显比push 慢（至少就 Chrome 而言）。

我有什么遗漏吗？
在这个用例中是否有理由首选concat？

Answer 1

如果其他代码引用了actionQueue 中的现有数组，则使用concat 不会对此产生影响。

var a1 = [1];
var b1 = a1
a1 = a1.concat([2])

var a2 = [1];
var b2 = a2
a2.push(2)

console.log('b1', b1)
console.log('b2', b2)

Answer 2

推送()

push() 方法是类似于call() 或apply() 的通用方法。它会改变你的数组（或对象），将一个新值推入其中。

Push: MDN

连接()

concat() 方法返回一个新数组，其中的值合并。这也避免了突变的副作用。

Concat: MDN

Answer 3

在简单的 push 中，将数组追加到相同的引用中，而 concat 不会影响原始数组。看看下面的sn-p

let x = [1,2,3,4];
let y = x.concat(5);
// At this step y hold [1,2,3,4,5] and x remain unchanged to [1,2,3,4]
document.write('x=>'+x);
document.write('y=>'+y);

let z = x.push(5);
// At this step z hold 5 and x is now changed to [1,2,3,4,5]
document.write('x=>'+x);
document.write('z=>'+z);