1. 在您给出的示例中，两者之间基本上没有区别
2. .concat是显著更有效：http://jsperf.com/spread-into-array-vs-concat因为...（传播）是更基本的语法基础之上只是语法糖，明确遍历索引展开数组。
3. Spread 允许在更笨拙的直接数组操作之上加糖的语法

为了扩展上面的#3，你对传播的使用是一个有点人为的例子（尽管很可能会经常出现在野外）。当 - 例如 - 应该.call在函数体中传递整个参数列表时，Spread 很有用。

function myFunc(){
    otherFunc.call( myObj, ...args );
}

相对

function myFunc(){
    otherFunc.call( myObj, args[0], args[1], args[2], args[3], args[4] );
}

这是另一个随意的例子，但它更清楚为什么在一些其他冗长和笨拙的情况下使用扩展运算符会很好。

正如@loganfsmyth 指出的那样：

价差也适用于任意可迭代的对象，这意味着它不仅适用于Array秒，但也Map和Set等等。

这是一个很好的观点，并增加了一个想法——虽然在 ES5 中并非不可能实现——在扩展运算符中引入的功能是新语法中更有用的项目之一。

有关此特定上下文中扩展运算符的实际基础语法（因为...也可以是“rest”参数），请参阅规范。正如我上面写的，“显式迭代索引以扩展数组的更基本的底层语法”足以说明这一点，但实际定义使用GetValue和GetIterator用于后面的变量。

抛开问题，让我们从最基本的问题开始：spread 语法的用途到底是什么？

Spread 语法基本上解包了可迭代对象的元素，例如数组或对象。或者，对于来自MDN Web Docs 的关于传播语法的更详细的解释：

Spread 语法允许在需要零个或多个参数（用于函数调用）或元素（用于数组文字）的地方扩展诸如数组表达式或字符串之类的可迭代对象，或者在零个或多个地方扩展对象表达式键值对（用于对象文字）是预期的。

以下是扩展语法典型用例的一些简单示例以及扩展语法和其余参数之间差异的示例（它们可能看起来相同，但它们执行几乎相反的功能）。

函数调用：

const multiArgs = (one, two) => {
  console.log(one, two);
};

const args = [1, 2];
multiArgs(...args);
// 1 2

数组或字符串文字：

const arr1 = [2, 3];
const arr2 = [1, ...arr1, 4];
console.log(arr2);
// [1, 2, 3, 4]

const s = 'split';
console.log(...s);
// s p l i t

对象字面量：

const obj1 = { 1: 'one' };
const obj2 = { 2: 'two' };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3);
// { 1: 'one', 2: 'two' }

其余参数语法与传播语法不同：

其余参数语法看起来与展开语法相同，但实际上将未知数量的函数参数表示为数组。因此，不是“解包”可迭代的，其余参数实际上将多个参数打包到一个数组中。

const multiArgs = (...args) => {
  console.log(args);
};

multiArgs('a', 'b', 'c');
// ['a', 'b', 'c']

传播语法性能/效率：

要解决与其他方法相比的效率问题，唯一诚实的答案是“视情况而定”。浏览器一直在变化，与特定函数相关的上下文和数据会产生截然不同的性能结果，因此您可以找到各种相互冲突的性能时间，这些时间表明传播语法比您可能使用的各种数组或对象方法快得惊人，也慢得可笑用来完成类似的目标。最后，速度优化至关重要的任何情况都应该进行比较测试，而不是依赖于忽略代码和数据细节的简单函数的通用时序。

比较concat()：

最后是关于传播语法和concat()问题代码中显示的区别的快速评论。不同之处在于传播语法不仅可以用于连接数组，还可以用于concat()诸如 IE 之类的旧浏览器。如果您不关心与旧浏览器的兼容性并且不需要对速度进行微优化，那么在扩展语法之间的选择concat()只是您发现更具可读性的问题：arr3 = arr1.concat(arr2)或arr3 = [...arr1, ...arr2].

这个例子的输出是一样的，但它在幕后的行为并不相同，

考虑（检查浏览器的控制台）：

var x = [], y = [];

x[1] = "a";
y[1] = "b";

var usingSpread = [...x, ...y];
var usingConcat = x.concat(y);

console.log(usingSpread); // [ undefined, "a", undefined, "b"]
console.log(usingConcat); // [ , "a", , "b"] 

console.log(1 in usingSpread); // true
console.log(1 in usingConcat); // false

Array.prototype.concat将保留数组中的空槽，而 Spread 将用undefined值替换它们。

输入Symbol.iterator和Symbol.isConcatSpreadable：

的传播操作者使用@@iterator通过数组和数组等状物体符号迭代：

• Array.prototype
• TypedArray.prototype
• 字符串原型
• 地图.prototype
• 集.prototype

（这就是为什么你可以for .. of在它们上使用）

我们可以覆盖默认iterator符号以查看spread运算符的行为：

var myIterable = ["a", "b", "c"];
var myIterable2 = ["d", "e", "f"];

myIterable[Symbol.iterator] = function*() {
  yield 1;
  yield 2;
  yield 3;
};

console.log(myIterable[0], myIterable[1], myIterable[2]); // a b c
console.log([...myIterable]); // [1,2,3]

var result = [...myIterable, ...myIterable2];
console.log(result); // [1,2,3,"d","e","f"]

var result2 = myIterable.concat(myIterable2);
console.log(result2); // ["a", "b", "c", "d", "e", "f"]

另一方面，@@isConcatSpreadable是

一个布尔值属性，如果为 true，则表示应通过 Array.prototype.concat 将对象展平为其数组元素。

如果设置为false，Array.concat则不会展平数组：

const alpha = ['a', 'b', 'c'];
const numeric = [1, 2, 3];

let alphaNumeric = alpha.concat(numeric);

// console.log(alphaNumeric);

numeric[Symbol.isConcatSpreadable] = false;

alphaNumeric = alpha.concat(numeric);

// alphaNumeric = [...alpha, ...numeric];
// the above line will output : ["a","b","c",1,2,3]

console.log(JSON.stringify(alphaNumeric)); // ["a","b","c",[1,2,3]]

但是，当涉及到时，它们的spread 行为有所不同，Objects因为它们不可迭代

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable
var objCopy = {...obj}; // copy

它将自己的可枚举属性从提供的对象复制到新对象上。

展开运算符更快，请检查spread-into-array-vs-concat（至少从 Chrome 67 开始）

并检查三个点如何在某些用例中更改 javascript，其中包括解构赋值（ Array 或 Object ）：

const arr = [1, 2, 3, 4, 5, 6, 7];

const [first, , third, ...rest] = arr;

console.log({ first, third, rest });

并将字符串拆分为字符数组：

console.log( [...'hello'] ) // [ "h", "e" , "l" , "l", "o" ]

在给定的示例中，这两者之间没有区别。对于连接，我们可以在扩展运算符上使用 concat 方法。但是，扩展运算符的使用不仅限于数组的串联。

展开语法允许扩展诸如数组表达式或字符串之类的可迭代对象。可用于以下场景。

1. 带数组的扩展运算符

   • 数组的串联
   • 字符串到数组
   • 数组作为函数的参数。

2. 带有对象的扩展运算符

   • 对象的串联

要查看所有这些用途的演示并尝试使用代码，请点击以下链接 (codepen.io)

ES6-Spread Operator 演示

/**
* Example-1: Showing How Spread Operator can be used to concat two or more     
arrays. 
*/
const americas = ['South America', 'North America'];

const eurasia = ['Europe', 'Asia'];

const world = [...americas, ...eurasia];

/**
* Example-2: How Spread Operator can be used for string to array.
*/
const iLiveIn = 'Asia';
const iLiveIntoArray = [...iLiveIn];

/**
* Example-3: Using Spread Operator to pass arguments to function
*/
const numbers = [1,4,5];

const add = function(n1,n2,n3){
return n1 + n2 + n3;
};

const addition = add(numbers[0],numbers[1],numbers[2]);
const additionUsingSpread = add(...numbers);

/**
* Example-4: Spread Operator, can be used to concat the array
*/

const personalDetails = {
  name: 'Ravi',
  age: '28',
  sex: 'male'
};

const professionalDetails = {
  occupation: 'Software Engineer',
  workExperience: '4 years'
};

const completeDetails = {...personalDetails, ...professionalDetails};

const colours = ['Blue','Red','Black']; // 简单数组。

const my_colours = ['Blue','Red','Black','Yellow','Green'];

const favourite_colours = [...my_colours,'grey']; //[...] spread Operator 访问另一个数组中的数据。