Новые версии JavaScript значительно улучшили язык с точки зрения выразительности и простоты разработки, но быстрые темпы изменений заставили многих разработчиков почувствовать, что они изо всех сил стараются не отставать.

Благодаря тому, что Wordpress теперь включает React и современный JavaScript в новом редакторе Gutenberg, огромная аудитория разработчиков Wordpress попадает в этот мир, нравится вам это или нет, и быстро пытается наверстать упущенное.

В этом посте мы расскажем об одной из самых популярных новых функций языка JavaScript - операторе Spread (также известном как оператор ...).

Друг недавно попросил помочь разобраться в некоторых примерах кода из библиотеки блоков Гутенберга, в частности из галереи. На момент написания этот код можно было увидеть здесь, но он несколько раз перемещался, поэтому я воспроизвел его ниже:

setImageAttributes( index, attributes ) {
  const { attributes: { images }, setAttributes } = this.props; 
  if ( ! images[ index ] ) {
    return; 
  } 
  setAttributes( { 
    images: [ 
      ...images.slice( 0, index ), 
      { ...images[ index ], ...attributes, }, 
      ...images.slice( index + 1 ), 
    ], 
  } ); 
}

В частности, запутывала следующая часть:

images: [ 
  ...images.slice( 0, index ), 
  { ...images[ index ], ...attributes, }, 
  ...images.slice( index + 1 ), 
],

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

Операторы распространения для массивов

Главное, что нужно знать - это синтаксис .... Это оператор распространения, который по сути принимает либо массив, либо объект и расширяет его до своего набора элементов. Это позволяет вам делать необычные вещи, например, если у вас есть код:

const array = [1, 2]; 
const array2 = [...array, 3, 4];

Значение array2 в конечном итоге будет [1, 2, 3, 4].

Оператор распространения позволяет вам вставить массив и получить его значения.

Возвращаясь к нашему исходному примеру кода, на внешнем уровне у нас есть

images = [
  ...images.slice(0, index), 
  {some stuff}, 
  ...images.slice(index+1)
]

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

Другими словами, мы собираемся заменить элемент на index.

Операторы распространения для объектов

Затем для объектов с расширенным синтаксисом можно выполнить аналог Object.assign, скопировав значения объекта в новый. Рассмотрим простой пример кода:

const obj1 = {a: 'a', b: 'b'}; 
const obj2 = {c: 'c', ...obj1};

В результате obj2 будет {a: 'a', b: 'b', c: 'c'}.

Возвращаясь к примеру кода Гутенберга, внутреннему уровню (помеченному {some stuff} в нашей оценке массива), мы имеем:

{ 
  ...images[ index ], 
  ...attributes, 
}

Чтобы перевести: создайте объект, заполните его сначала значениями из images[index], а затем значениями из attributes. Любые повторяющиеся значения заменяются более поздним.

Итак, здесь говорится: возьмите мое старое изображение из index и примените к нему любые значения, которые у меня есть в attributes, причем значения в attributes имеют приоритет.

Если мы вернемся ко всему нашему примеру кода:

images: [ 
  ...images.slice( 0, index ), 
  { ...images[ index ], ...attributes, }, 
  ...images.slice( index + 1 ), 
],

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

Синтаксис Spread обеспечивает компактный и выразительный код

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

P.S. - Если вас интересуют такие темы, я отправляю еженедельный информационный бюллетень под названием Friday Frontend. Каждую пятницу я рассылаю 15 ссылок на лучшие статьи, учебные пособия и объявления по CSS / SCSS, JavaScript, а также множество других замечательных новостей Front-end. Зарегистрируйтесь здесь: https://zendev.com/friday-frontend.html

Первоначально опубликовано на zendev.com 9 мая 2018 г.

✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .