29

考虑以下示例代码

var x = ["a", "b", "c"];
var z = ["p", "q"];

var d = [...x, ...z];

var e = x.concat(z);

在这里， 和 的值d完全相同e，等于 ["a", "b", "c", "p", "q"]，所以，

  1. 这两者之间究竟有什么区别？
  2. 哪个更有效，为什么？
  3. 扩展语法到底有什么用？

您不认为在正式的庞大语言中引入这些小快捷方式可能会留下一些未被注意到的错误，我的意思是要么它非常不必要，要么我没有意识到它的必要性。

4

5 回答 5

27
  1. 在您给出的示例中，两者之间基本上没有区别
  2. .concat效率更高：http://jsperf.com/spread-into-array-vs-concat因为...(spread) 只是更基本的底层语法之上的语法糖，它显式地迭代索引以扩展数组。
  3. Spread 允许在更笨重的直接数组操作之上使用糖化语法

为了扩展上面的＃3，您对 spread 的使用是一个有点做作的例子（尽管它可能会经常出现在野外）。例如，当应将整个参数列表传递给.call函数体时，Spread 很有用。

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

相对

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

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

正如@loganfsmyth 指出的那样：

Spread 也适用于任意可迭代对象，这意味着它不仅适用于s ，Array还适用于其他对象。MapSet

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

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

于 2016-01-01T21:00:09.323 回答
7

把问题打乱了，让我们从基本问题开始：展开语法到底有什么用？

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

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

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

函数调用：

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' }

Rest 参数语法与扩展语法不同：

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

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].

于 2019-08-28T16:27:30.227 回答
4

这个例子的输出是一样的，但是在底层的行为是不一样的，

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

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将保留数组中的空槽undefined，而 Spread 将用值替换它们。

输入Symbol.iterator和Symbol.isConcatSpreadable：

展开运算符使用该符号@@iterator遍历数组和类似数组的对象，例如：

  • Array.prototype
  • TypedArray.prototype
  • String.prototype
  • Map.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，其中包括解构赋值（数组或对象）：

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" ]
于 2019-08-27T18:06:15.277 回答
0

在给定的示例中，这两者之间没有区别。对于连接，我们可以使用 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};
于 2018-04-16T10:21:07.753 回答
0

常量颜色 = ['蓝色','红色','黑色']; // 简单数组。

const my_colours = ['蓝色','红色','黑色','黄色','绿色'];

const favourite_colours = [...my_colours,'grey']; //[...] 在另一个数组中传播运算符访问数据。

于 2021-06-24T17:19:01.303 回答