ES6 Spread Operator-оператор разворота (IV).

Оператор разворота (spread operator).

Все материалы по ES6

Оператор разворота или распространения - spread operator выглядит как три точки ...

Он позволяет разворачивать элементы массива для передачи их в качестве аргументов функции, или в элементы другого массива.

Лучше всего это объяснить на примере.

У нас есть два массива и мы хотим перенести элементы первого массива во воторй. Для этого мы можем использовать оператор разворота, который развернет первый массив ...arr1 и вставит их во второй - см. картинку выше.

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

Сам массив отправить в функцию мы не можем. но мы можем развернуть массив в аргументы функции используя оператор разворота.

doSomething(...arr1);

Теперь попробуем применить оператор разворота на практике.

Первое что мы сделаем это запустим скрипт Babel, который будет следить за файлами, и при их изменении создавать свежие версии.

Откроем папку проекта в командной строке (КС). Вводим команду:

npm run watch

И нажимаем Enter

В папке src создадим файл spread.js и сразу укажим его в файле index.html

<script src="src/spread.js"></script>

Использование в массивах.

В файле мы создадим три массива.

let pet = ['dog', 'cat', 'hamster'];
let wild_animals = ['tiger', 'bear', 'wolf'];

let animals = ['whale', 'elephant'];

Первый массив - домашние животные, второй массив - дикие животные и третий массив - просто животные.

Теперь мы хотим добавить первые два массива в один общий массив - животные (animals).

Попробуем вариант - просто вставить переменные первых двух массивов в третий напрямую:

let pet = ['dog', 'cat', 'hamster'];
let wild_animals = ['tiger', 'bear', 'wolf'];

let animals = [pet, 'whale', wildanimals, 'elephant'];

console.log(animals);

Обратите внимание, что получилось.

Не то что мы хотели!

Получился в итоге многомерный массив, который содержит добавленные элементы в виде отдельных массивов.

Для получения желаемого результата, мы можем воспользоваться оператором разворота - spread operator - (...)

Все что нужно сделать - это поставить три точки перед переменными в массиве

let pet = ['dog', 'cat', 'hamster'];
let wild_animals = ['tiger', 'bear', 'wolf'];

let animals = [...pet, 'whale', ...wild_animals, 'elephant'];

console.log(animals);

Теперь массив animals содержит всех животных, и домашних, и диких.

Если посмотреть на транпилированный код в файле dist/spread.js

'use strict';

var pet = ['dog', 'cat', 'hamster'];
var wild_animals = ['tiger', 'bear', 'wolf'];

var animals = [].concat(pet, ['whale'], wild_animals, ['elephant']);

console.log(animals);

Как можно видеть, здесь используется метод.concat на пустом массиве[] и соединяем все массивы по порядку.

Это не самое элегантное решение!

Намного проще поставить три точки!

Использование в функциях.

Будем использовать оператор разворота для передачи аргументов в функцию. Создадим функцию, которая сложит три числа и выведет результат в консоле браузера.

function add(x, y, z) {
 console.log(x + y + z);
};

let num = [1, 2, 3];

И массив num, состоящий из трех элементов.

Функция add принимает три аргумента и явно будет работать неправильно, если мы передадим ей в качестве аргумента весь массив.

Если сделать просто так add(num);

Как и ожидалось.

Теперь давайте попробуем передать массив, как аргументы в функцию, при помощи оператора spread

add(...num);

function add(x, y, z) {
 console.log(x + y + z);
};

let num = [1, 2, 3];

add(...num);

Оператор разворота- это очень удобный инструмент для работы с массивами!

Его следует знать и правильно использовать для того, чтобы получить элегантный и легко читаемый код.