Что такое SpreadElement в документации ECMAScript? Это так же, как синтаксис распространения в MDN?

Question

По спецификации ECMAScript SpreadElement описано

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

Это так же, как синтаксис распространения

Синтаксис распространения позволяет расширять итерацию, например выражение массива или строку, в местах, где ожидается ноль или более аргументов (для вызовов функций), или элементы (для литералов массива), или выражение объекта может быть развернуто в местах, где ноль или более Ожидаются пары ключ-значение (для литералов объекта).

Синтаксис

Для вызовов функций:

myFunction(...iterableObj);

Для литералов массива:

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

описано в документации MDN?

Каковы случаи использования SpreadElement и или распространять синтаксис; и если SpreadElement и синтаксис распространения различен, в каких конкретных манерах они отличаются?

Answer 1

Термин "оператор распространения" является своего рода "зонтичным термином", который относится к различным синтаксическим конструкциям в ES6, которые выглядят как ...x, MDN делает то же самое.

Тем не менее, это вводит в заблуждение, потому что ... не является оператором (по крайней мере, в том смысле, в котором спецификация ECMAScript использует термин "оператор"). Он не генерирует значение, которое можно использовать в дальнейших вычислениях. Я бы лучше сравнил его с другими пунктуаторами, такими как , или же ; (которые также отчасти связаны, но имеют различное значение в другом контексте).

Термин "оператор распространения" может относиться к:

• Элемент развертки, var arr = [a, b, ...c];: Элемент распространения расширяет итерацию (c) в новый массив. Это эквивалентно чему-то вроде [a,b].concat(c),

• Элемент отдыха, [a, b, ...c] = arr; ^†: внутри разрушения, ... Конструкция имеет противоположный эффект: она собирает оставшиеся элементы в массив. Пример здесь эквивалентен

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

  (обратите внимание, что это только приближение, потому что деструктуризация работает с любым итеративным значением, а не только с массивами)

• fun(a, b, ...c) У этой конструкции на самом деле нет имени в спецификации. Но он работает очень похоже на распространяемые элементы: он расширяет итерацию в список аргументов.
  Это было бы эквивалентно func.apply(null, [a, b].concat(c)),

  Отсутствие официального названия может быть причиной того, что люди начали использовать "оператор распространения". Я бы, наверное, назвал это "распространяемым аргументом".

• Параметр отдыха: function foo(a, b, ...c): Подобно элементам rest, параметр rest собирает оставшиеся аргументы, переданные функции, и делает их доступными в виде массива в c, ES2015 на самом деле спецификация использует термин BindingRestElement сослаться на эту конструкцию.

Смежные вопросы:

• Оператор спреда против параметра Rest в ES2015/es6
• Использование оператора распространения несколько раз в JavaScript?

---

†: Если мы очень педантичны, нам бы даже пришлось различать объявление переменной (var [a, b, ...c] = d;) и простое назначение ([a, b, ...c] = d;), согласно спецификации.

Answer 2

SpreadElement это просто имя в грамматике ES6 для распространяемого "оператора" вместе с его аргументом в литерале Array:

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

Так, SpreadElement в [a, b, ...c] является ...c; Распространение "оператор" ..., (напугать кавычки, потому что это не реальный оператор в том же смысле, что, например, - является.)

Имя правила грамматики, используемого в вызовах функций, будет другим, так как это другой грамматический контекст (это всего лишь один вид ArgumentList).

Answer 3

Еще один вариант использования — замена метода Object.assign:

// наивное использование 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 

-МДА

Answer 4

Обычно три точки называются «оператором расширения», но когда они написаны как часть параметра функции, они называются «оператором отдыха» (MDN Link). Он используется, когда вы не знаете точно, сколько аргументов можно передать в функцию. Оператор rest сгруппирует все аргументы, переданные в функцию, в массив. Пример ниже:

      function getNames(...names){
  console.log(names) // Output: ["Raul", "Chris", "Megan"]
}

getNames("Raul", "Chris", "Megan")

Если вам нужна функция передачи комбинации известных аргументов и группы оставшихся аргументов, вам необходимо убедиться, что оператор rest является последним параметром, указанным при создании функции. Например:

      function getNamesInClass(teacher, room, ...students){
  console.log(teacher) // Output: "David"
  console.log(room) // Output: "3B"
  console.log(students) // Output: ["Raul", "Chris", "Megan"]
}

getNamesInClass("David", "3B", "Raul", "Chris", "Megan")