扩展语法 ES6 [英] Spread Syntax ES6

问题描述

考虑以下示例代码

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"], 所以,

Here, the value of d and e are exactly same and is equal to ["a", "b", "c", "p", "q"], so,

1. 这两者到底有什么区别?
2. 哪个更有效，为什么?
3. 展开语法的具体用途是什么?

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

Don't you think the introduction of these little shortcuts in a formal vast language may leave some unnoticed bugs, I mean either it is pretty unnecessary or I do not realize it's need properly.

推荐答案

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

1. In your example given, there is essentially no difference between the two
2. .concat is significantly more efficient: http://jsperf.com/spread-into-array-vs-concat because ... (spread) is merely syntax sugar on top of more fundamental underlying syntax that explicitly iterates over indexes to expand the array.
3. Spread allows sugared syntax on top of more clunky direct array manipulation

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

To expand on #3 above, your use of spread is a somewhat contrived example (albeit one that will likely appear in the wild frequently). Spread is useful when - for example - the entirety of an arguments list should be passed to .call in the function body.

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

对比

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

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

This is another arbitrary example, but it's a little clearer why the spread operator will be nice to use in some otherwise verbose and clunky situations.

作为 @loganfsmyth 指出:

Spread 也适用于任意可迭代对象，这意味着它不仅适用于 Arrays，还适用于 Map 和 Set 等.>

Spread also works on arbitrary iterable objects which means it not only works on Arrays but also Map and Set among others.

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

This is a great point, and adds to the idea that - while not impossible to achieve in ES5 - the functionality introduced in the spread operator is one of the more useful items in the new syntax.

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

For the actual underlying syntax for the spread operator in this particular context (since ... can also be a "rest" parameter), see the specification. "more fundamental underlying syntax that explicitly iterates over indexes to expand the array" as I wrote above is enough to get the point across, but the actual definition uses GetValue and GetIterator for the variable that follows.

这篇关于扩展语法 ES6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！