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

2022-01-29 00:00:00 javascript ecmascript-6 spread-syntax

在 ECMAScript 规范 SpreadElement 描述

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

这是否与 Spread 语法相同

Spread 语法允许在预期有零个或多个参数(对于函数调用)或元素(对于数组字面量)的地方扩展诸如数组表达式或字符串之类的可迭代对象,或者在需要扩展对象表达式的地方期望零个或多个键值对(用于对象字面量).

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.

语法

对于函数调用:

myFunction(...iterableObj);

对于数组字面量:

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

在 MDN 文档中描述?

SpreadElement 和,或,扩展语法的用例是什么;如果SpreadElement和spread语法不同,具体在哪些方面有区别?

What are use cases of SpreadElement and, or, spread syntax; and if SpreadElement and spread syntax are different, in which specific manners do they differ?

推荐答案

术语扩展运算符"是一种伞形术语",指的是 ES6 中的各种语法结构,它们看起来都像 ...x.MDN 也是如此.

The term "spread operator" is kind of an "umbrella term" that refers to various syntactic constructs in ES6 which all look like ...x. MDN does the same.

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

However, this is misguiding, because ... is not an operator (at least not in the sense the ECMAScript spec uses the term "operator"). It doesn't generate a value that can be used in further computations. I'd rather compare it to other punctuators, such as , or ; (which are also kind of related but have different meaning in different context).

术语扩展运算符"可以指:

The term "spread operator" could refer to:

  • 传播元素,var arr = [a, b, ...c];:展开元素将可迭代(c)扩展为新数组.它相当于 [a,b].concat(c).

  • Spread element, var arr = [a, b, ...c];: The spread element expands the iterable (c) into the new array. It's equivalent to something like [a,b].concat(c).

休息元素,[a, b, ...c] = arr;:内部解构,... 构造具有相反的效果:它将剩余元素收集 到一个数组中.这里的例子等价于

Rest element, [a, b, ...c] = arr;: Inside destructuring, the ... construct has the opposite effect: It collects remaining elements into an array. The example here is equivalent to

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

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

(note that this only an approximation, because destructuring works on any iterable value, not just arrays)

fun(a, b, ...c):这个构造 在规范中实际上没有名称.但它的工作原理与展开元素非常相似:它将一个可迭代对象扩展为参数列表.
它相当于 func.apply(null, [a, b].concat(c)).

fun(a, b, ...c): This construct doesn't actually have a name in the spec. But it works very similar as spread elements do: It expands an iterable into the list of arguments.
It would be equivalent to func.apply(null, [a, b].concat(c)).

缺乏正式名称可能是人们开始使用spread operator"的原因.我可能会称之为传播论点".

The lack of an official name might be the reason why people started to use "spread operator". I would probably call it "spread argument".

休息参数:function foo(a, b, ...c):与rest元素类似,rest参数收集传递给函数的剩余参数,并在<代码>c.ES2015 实际上的规范使用术语 BindingRestElement 来指代这个构造.

Rest parameter: function foo(a, b, ...c): Similar like rest elements, the rest parameter collects the remaining arguments passed to the function and makes them available as array in c. The ES2015 actually spec uses the term BindingRestElement to refer to to this construct.

相关问题:

  • ES2015/es6 中的扩展运算符 vs Rest 参数
  • 在 javascript 中多次使用扩展运算符?

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

†: If we are very pedantic we would even have to distinguish between a variable declaration (var [a, b, ...c] = d;) and simple assignment ([a, b, ...c] = d;), according to the spec.

相关文章