Синтаксис распространения 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"] , поэтому,

  1. В чем же разница между этими двумя?
  2. Какой из них более эффективен и почему?
  3. Что такое использование синтаксиса распространения?

Разве вы не думаете, что введение этих небольших ярлыков на формальном обширном языке может оставить некоторые незаметные ошибки, я имею в виду, что это довольно необязательно, или я не понимаю, что это нужно должным образом.

  1. В приведенном вами примере, по существу, нет разницы между двумя
  2. .concat значительно более эффективен: http://jsperf.com/spread-into-array-vs-concat, потому что ... (спред) представляет собой просто синтаксический сахар в дополнение к более фундаментальному базовому синтаксису, который явно итерирует по индексам, чтобы расширить массив.
  3. Spread позволяет использовать синтаксис sugared поверх более сложных манипуляций с прямым массивом

Чтобы перейти на № 3 выше, ваше использование спреда – несколько надуманный пример (хотя тот, который, скорее всего, появится в дикой природе). Спред полезен, когда – например, – весь список аргументов должен быть передан в .call в теле функции.

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

против

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

Это еще один произвольный пример, но немного понятно, почему оператор спреда будет неплохо использовать в некоторых более сложных и неуклюжих ситуациях.

Как отмечает @loganfsmyth :

Распространение также работает на произвольных итерируемых объектах, что означает, что он не только работает на Array s, но также Map и Set среди других.

Это замечательный момент и добавляет идею о том, что в ES5 не достижимо – функциональность, введенная в операторе распространения, является одним из наиболее полезных элементов в новом синтаксисе.


Для фактического базового синтаксиса оператора распространения в этом конкретном контексте (поскольку ... также может быть «остальным» параметром), см. Спецификацию . «более фундаментальный базовый синтаксис, который явно итерирует по индексам для расширения массива», как я уже писал выше, достаточно для определения точки, но фактическое определение использует GetValue и GetIterator для следующей переменной.

В данном примере нет разницы между этими двумя. Для конкатенации мы можем использовать метод concat по оператору распространения. Однако использование оператора спреда не ограничивается конкатенацией массивов.

Синтаксис распространения позволяет повторить итерацию, такую ​​как выражение массива или строку. Его можно использовать в следующих сценариях.

  1. Оператор распространения с массивами

    • Конкатенация массивов
    • Строка в массив
    • Массив в качестве аргументов для работы.
  2. Оператор распространения с объектами

    • Конкатенация объектов

Чтобы увидеть, как демонстрация всех этих применений и попробовать свои силы в использовании кода, пожалуйста, следуйте ниже ссылке (codepen.io)

ES6-демонстрация оператора спреда

 /** * 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}; 
  • Как добавить событие click к элементу?
  • Производительность дескриптора дескриптора объекта / установки в последних версиях Chrome / V8
  • Как получить доступ к электронным таблицам Google Sheet только с помощью Javascript?
  • Изменение текста кнопки onclick
  • Обнаружение подключения к Интернету отключено?
  • Добавление элемента div в тело или документ в JavaScript
  • Почему необходимо использовать bind при работе с ES6 и ReactJS?
  • Кудрявые скобки в стрелочных функциях
  • Форматирование номера JQuery
  • Как предотвратить страницы, которые я посещаю, от переопределения выбранных сочетаний клавиш Firefox?
  • HTML5 Audio не может воспроизводиться через Javascript, если только вручную его не запускать вручную
  • Interesting Posts

    Как реализовать циклический буфер в C?

    Как найти локальную базу данных Lotus Notes?

    Невозможно установить «example.com» в качестве записи CNAME?

    Контроллер лесов не работает с обновлением Visual Studio 2013 2

    Как обнаружить переполнение и переполнение двойной точки с двойной точностью?

    Что такое Android PendingIntent?

    Текущая дата YAML в rmarkdown

    Почему чтение записей структурных полей из std :: istream завершается неудачно, и как я могу это исправить?

    Почему выражение a = a + b – (b = a) дает предупреждение о точке последовательности в c ++?

    Почему опция «Установить как старт» хранится в файле suo, а не в sln-файле?

    Автоматическая регулировка дневного света Windows 10 не работает?

    Как создать FileFolder в Windows?

    Получить все элементы управления определенного типа

    Как использовать UTF-8 в свойствах ресурсов с помощью ResourceBundle

    Как обмениваться данными между различными streamами В C # с использованием AOP?

    Давайте будем гением компьютера.