是有什么区别spread operator和array.concat()
let parts = ['four', 'five'];
let numbers = ['one', 'two', 'three'];
console.log([...numbers, ...parts]);Array.concat() 功能
let parts = ['four', 'five'];
let numbers = ['one', 'two', 'three'];
console.log(numbers.concat(parts));两个结果是一样的。那么，我们想在什么样的场景中使用它们呢？哪一种最适合性能？
concat 当参数不是数组时，点差非常不同。
当参数不是数组时，concat将其作为一个整体添加，同时...尝试对其进行迭代，如果不能则失败。考虑：
a = [1, 2, 3]
x = 'hello';
console.log(a.concat(x)); // [ 1, 2, 3, 'hello' ]
console.log([...a, ...x]); // [ 1, 2, 3, 'h', 'e', 'l', 'l', 'o' ]
在这里，concat原子地处理字符串，同时...使用其默认迭代器 char-by-char。
另一个例子：
x = 99;
console.log(a.concat(x)); // [1, 2, 3, 99]
console.log([...a, ...x]); // TypeError: x is not iterable
再次，因为concat数字是一个原子，...尝试迭代它并失败。
最后：
function* gen() { yield *'abc' }
console.log(a.concat(gen())); // [ 1, 2, 3, Object [Generator] {} ]
console.log([...a, ...gen()]); // [ 1, 2, 3, 'a', 'b', 'c' ]
concat不尝试迭代生成器并将其作为一个整体附加，同时...很好地从中获取所有值。
总而言之，当您的参数可能是非数组时，在concat和之间的选择...取决于您是否希望它们被迭代。
上面描述了 的默认行为concat，然而，ES6提供了一种用 覆盖它的方法Symbol.isConcatSpreadable。默认情况下，此符号true用于数组以及false其他所有内容。将其设置为true告诉concat迭代参数，就像这样...做：
str = 'hello'
console.log([1,2,3].concat(str)) // [1,2,3, 'hello']
str = new String('hello');
str[Symbol.isConcatSpreadable] = true;
console.log([1,2,3].concat(str)) // [ 1, 2, 3, 'h', 'e', 'l', 'l', 'o' ]
性能方面concat更快，可能是因为它可以从特定于数组的优化中受益，同时...必须符合通用迭代协议。时间：
let big = (new Array(1e5)).fill(99);
let i, x;
console.time('concat-big');
for(i = 0; i < 1e2; i++) x = [].concat(big)
console.timeEnd('concat-big');
console.time('spread-big');
for(i = 0; i < 1e2; i++) x = [...big]
console.timeEnd('spread-big');
let a = (new Array(1e3)).fill(99);
let b = (new Array(1e3)).fill(99);
let c = (new Array(1e3)).fill(99);
let d = (new Array(1e3)).fill(99);
console.time('concat-many');
for(i = 0; i < 1e2; i++) x = [1,2,3].concat(a, b, c, d)
console.timeEnd('concat-many');
console.time('spread-many');
for(i = 0; i < 1e2; i++) x = [1,2,3, ...a, ...b, ...c, ...d]
console.timeEnd('spread-many');Wellconsole.log(['one', 'two', 'three', 'four', 'five'])也有相同的结果，那么为什么在这里使用任何一个呢？:P
通常，concat当您有两个（或更多）来自任意来源的数组时，您会使用它，如果之前知道始终是数组一部分的附加元素，您将在数组文字中使用扩展语法。因此，如果您concat的代码中有一个数组文字 ，只需使用扩展语法，concat否则使用：
[...a, ...b] // bad :-(
a.concat(b) // good :-)
[x, y].concat(a) // bad :-(
[x, y, ...a] // good :-)
在处理非数组值时，这两种替代方法的行为也大不相同。
我只是在回答性能问题，因为已经有关于场景的很好的答案。我写了一个测试并在最新的浏览器上执行它。下面是结果和代码。
/*
* Performance results.
* Browser Spread syntax concat method
* --------------------------------------------------
* Chrome 75 626.43ms 235.13ms
* Firefox 68 928.40ms 821.30ms
* Safari 12 165.44ms 152.04ms
* Edge 18 1784.72ms 703.41ms
* Opera 62 590.10ms 213.45ms
* --------------------------------------------------
*/
在我编写和使用的代码下方。
const array1 = [];
const array2 = [];
const mergeCount = 50;
let spreadTime = 0;
let concatTime = 0;
// Used to popolate the arrays to merge with 10.000.000 elements.
for (let i = 0; i < 10000000; ++i) {
array1.push(i);
array2.push(i);
}
// The spread syntax performance test.
for (let i = 0; i < mergeCount; ++i) {
const startTime = performance.now();
const array3 = [ ...array1, ...array2 ];
spreadTime += performance.now() - startTime;
}
// The concat performance test.
for (let i = 0; i < mergeCount; ++i) {
const startTime = performance.now();
const array3 = array1.concat(array2);
concatTime += performance.now() - startTime;
}
console.log(spreadTime / mergeCount);
console.log(concatTime / mergeCount);
我认为有效的一个区别是，对大数组大小使用扩展运算符会给您带来错误Maximum call stack size exceeded，您可以避免使用该concat运算符。
var someArray = new Array(600000);
var newArray = [];
var tempArray = [];
someArray.fill("foo");
try {
newArray.push(...someArray);
} catch (e) {
console.log("Using spread operator:", e.message)
}
tempArray = newArray.concat(someArray);
console.log("Using concat function:", tempArray.length)虽然有些回答在大阵列上的性能方面是正确的，但在处理小阵列时，性能却大不相同。
您可以在https://jsperf.com/spread-vs-concat-size-agnostic 上自行检查结果。
如您所见，spread较小阵列的速度提高了 50%，而concat大型阵列的速度提高了数倍。