Доброго времени суток, друзья. Сегодня хочу поговорить на тему «фич» ES6, а именно давно уже используемого оператора (…) . Данный оператор называется Spread или Rest в зависимости от места, в котором он используется.
Оператор spread
Базовый «кейс» использования оператора spread это получение элементов из коллекции.
Пример:
const car = function(a, b) {
console.log(a, b)
}
car(…["ВАЗ", "ЗИЛ") // "ВАЗ" "ЗИЛ"
В примере выше мы создали функцию для работы с автомобилем. Передаем этой функции массив, перед которым объявляем оператор (…). Такая запись позволит функции получить вместо массива значения элементов.
Помимо использования оператора spread для извлечения элементов из коллекции можно наоборот расширять уже существующие коллекции.
Пример:
const array = [1,2,3]
const arrayTwo = [...array, 4]
console.log(arrayTwo)
В этом примере мы взяли массив простых чисел и во втором массиве добавили его «клон», вытащив элементы массива, используя оператор spread. По аналогии можно полностью «склонить» массив элементов, сделав его уникальную копию.
Пример:
const array = [1,2,3]
const arrayTwo = [...array]
console.log(array === arrayTwo) // false
При сравнении мы получаем false, поскольку результатом стало сравнение двух уникальных массивов.
Важно! До появления оператора spread задачу с получением элементов можно было решить воспользовавшись методом функции apply().
Пример:
const car = function(a, b) {
console.log(a, b)
}
car.apply(null, ["ВАЗ", "ЗИЛ"])
Оператор rest
Действия оператора (…) противоположны в зависимости контекста его использования. Выше мы поработали с оператором spread для разделения коллекций, в то время как rest оператор используют для получения противоположного результата, а именно формирования массивов из отдельных значений. Рассмотрим на примере:
const car = function(a, …b) {
console.log(a, b)
}
car("ВАЗ", "ЗИЛ", "КАМАЗ") // ВАЗ ["ЗИЛ","КАМАЗ"]
Мы снова воспользовались функцией car(), которой мы передаем список автомобилей. Посмотрев на результат консоли, можно обнаружить что первый параметр отобразился корректно, а все последующие параметры после него были собраны в один массив. Именно для этой цели и используется оператор rest. Если имеется какое-то неопределённое количество параметров передаваемой функции, их можно удобно собрать, воспользовавшись оператором (…).
Важно! До появления оператора rest, для решения вышеприведенной задачи активно использовался псевдомассив arguments, который требовалось дополнительно преобразовывать перед началом работы с ним (т.к. arguments не является настоящим массивом).
Пример:
const car = function(a){
const b = Array.prototype.slice.call(arguments)
console.log(a, b)
}
car("ВАЗ", "ЗИЛ", "КАМАЗ") // ВАЗ ["ЗИЛ","КАМАЗ"]
Заключение
Сегодня мы подробно разобрали работу оператора spread и rest, рассмотрели на примерах насколько удобнее стало решение типовых задач с функциями и коллекциями. Надеюсь, что данный материал был вам полезен. Учитесь, думайте, пишите код. Удачного кодинга, друзья!
Подписывайтесь на наш канал в Telegram для получения самой последней и актуальной информации.
Комментарии: