ECMAScript 文档中的 SpreadElement 是什么?它和 MDN 上的 Spread 语法一样吗?

What is SpreadElement in ECMAScript documentation? Is it the same as Spread syntax at MDN?

ECMAScript specification the SpreadElement描述

SpreadElement[Yield]:
...AssignmentExpression[In, ?Yield]

这个和Spread syntax一样吗

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Syntax

For function calls:

myFunction(...iterableObj);

For array literals:

[...iterableObj, 4, 5, 6]

MDN 文档中有描述?

SpreadElement 和/或传播语法的用例是什么;如果 SpreadElement 和传播语法不同,它们在哪些具体方式上有所不同?

SpreadElement 只是 ES6 语法中的一个名称,用于展开 "operator" 及其在数组文字中的参数:

SpreadElement[Yield]:
    ... AssignmentExpression[In, ?Yield]

所以,[a, b, ...c]中的SpreadElement...c;传播 "operator" 是 ...。 (吓人的引号是因为它不是真正的运算符,例如 - 是。)

函数调用中使用的语法规则的名称会有所不同,因为它是不同的语法上下文(它只是一种ArgumentList)。

术语 "spread operator" 是一种 "umbrella term",指的是 ES6 中的各种句法结构,它们看起来都像 ...x。 MDN 也是这样做的。

然而,这是一种误导,因为 ... 不是运算符(至少在 ECMAScript 规范使用术语 "operator" 的意义上不是)。它不会生成可用于进一步计算的值。我宁愿将它与其他标点符号进行比较,例如 ,;(它们也有点相关,但在不同的上下文中具有不同的含义)。

术语"spread operator"可以指代:

  • Spread element, var arr = [a, b, ...c];:spread元素将iterable(c)扩展到新数组中。它相当于 [a,b].concat(c).

  • Rest element, [a, b, ...c] = arr;:在解构内部,... 构造具有相反的作用效果:它收集剩余的元素到一个数组中。这里的例子相当于

    a = arr[0];
    b = arr[1];
    c = arr.slice(2);
    

    (请注意,这只是一个近似值,因为解构适用于任何可迭代值,而不仅仅是数组)

  • fun(a, b, ...c):这个构造 doesn't actually have a name in the spec。但它的工作方式与传播元素非常相似:它将一个可迭代对象扩展到参数列表中。
    相当于 func.apply(null, [a, b].concat(c)).

    缺少官方名称可能是人们开始使用 "spread operator" 的原因。我可能会称它为 "spread argument".

  • Rest parameter: function foo(a, b, ...c):与rest元素类似,rest参数收集传递给函数的剩余参数,并使它们在c中作为数组可用。 ES2015 实际上规范使用术语 BindingRestElement 来指代这个结构。

相关问题:


:如果我们非常迂腐,我们甚至必须区分变量声明(var [a, b, ...c] = d;)和简单赋值([a, b, ...c] = d;),根据规范

另一个用例是 Object.assign 方法的替代:

// 天真地使用赋值——覆盖 o:

中的共享属性
Object.assign(o, defaults); 

/* non-naive use of assign—prevents shared properties in o from being 
   overwritten */ 
o = Object.assign({}, defaults, o);  

或者,使用扩展运算符:

o = {...defaults, ...o} 

这是 ES2018 中最重要的功能之一

let position = { x: 0, y: 0 };  
let dimensions = { width: 100, height: 75 };  
let rect = { ...position, ...dimensions };  
rect.x + rect.y + rect.width + rect.height // => 175 

-MDA