Въведение в оператора за разпространение и параметър за почивка в JavaScript (ES6)

И операторът на разпространение, и параметърът за почивка се записват като три последователни точки (...). Имат ли нещо друго общо?

Операторът за разпространение (...)

Операторът за разпространениее въведена в ES6. Предоставя ви възможността да разширявате обекти, които могат да се изтеглят, в множество елементи. Какво всъщност означава? Нека проверим някои примери.

const movies = ["Leon", "Love Actually", "Lord of the Rings"];console.log(...movies);

Разпечатки:

Леон Любов Всъщност Властелинът на пръстените
const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Разпечатки:

1 4 5 7

Може да забележите, че и масивът от първия пример, и наборът от втория са разширени в отделните си елементи (съответно низове и цифри). Как може това да е от полза, може да попитате.

Най-честата употреба вероятно е комбинирането на масиви. Ако някога е трябвало да направите това във времената преди оператора за разпространение, вероятно сте използвали concat()метода.

const shapes = ["triangle", "square", "circle"];const objects = ["pencil", "notebook", "eraser"];const chaos = shapes.concat(objects);console.log(chaos);

Разпечатки:

[„Триъгълник“, „квадрат“, „кръг“, „молив“, „тетрадка“, „гума“]

Това не е лошо, но това, което операторът за разпространение предлага, е пряк път, който прави и вашия код да изглежда по-четлив:

const chaos = [...shapes, ...objects];console.log(chaos);

Разпечатки:

[„Триъгълник“, „квадрат“, „кръг“, „молив“, „тетрадка“, „гума“]

Ето какво бихме получили, ако се опитаме да направим същото без оператора за разпространение:

const chaos = [shapes, objects];console.log(chaos);

Разпечатки:

[Масив (3), масив (3)]

Какво е станало тук? Вместо да комбинираме масивите, получихме chaosмасив с shapesмасива с индекс 0 и objectsмасива с индекс 1.

Параметърът за почивка (...)

Можете да мислите за параметъра за почивка като за противоположност на оператора за разпространение. Точно както операторът за разпространение ви позволява да разширите масив в отделните му елементи, параметърът rest ви позволява да групирате елементи обратно в масив.

Присвояване на стойности на масив на променливи

Нека да разгледаме следния пример:

const movie = ["Life of Brian", 8.1, 1979, "Graham Chapman", "John Cleese", "Michael Palin"];const [title, rating, year, ...actors] = movie;console.log(title, rating, year, actors);

Разпечатки:

„Животът на Брайън“, 8.1, 1979, [„Греъм Чапман“, „Джон Клийз“, „Майкъл Пейлин“]

Параметърът rest позволява да вземем стойностите на movieмасива и да ги присвоим на няколко отделни променливи, използвайки деструктуриране. По този начин title, ratingи yearса назначени първите три стойности в масива, но когато реално се случва магията е actors. Благодарение на параметъра rest, му actorsсе присвояват останалите стойности на movieмасива, под формата на масив.

Вариадични функции

Вариадичните функции са функции, които приемат неограничен брой аргументи. Един добър пример е sum()функцията: не можем да знаем предварително колко аргумента ще й бъдат предадени:

sum(1, 2);sum(494, 373, 29, 2, 50067);sum(-17, 8, 325900);

В по-ранните версии на JavaScript този вид функция ще се обработва с помощта на обекта аргументи, който е подобен на масив обект, наличен като локална променлива във всяка функция. Той съдържа всички стойности на аргументи, предадени на функция. Нека да видим как sum()функцията може да бъде приложена:

function sum() { let total = 0; for(const argument of arguments) { total += argument; } return total;}

Действа, но далеч не е перфектно:

  • Ако погледнете дефиницията за sum()функцията, тя няма никакви параметри. Може да бъде доста подвеждащо.
  • Може да е трудно да се разбере, ако не сте запознати с обекта аргументи (като в: откъде argumentsидват, по дяволите ?!)

Ето как бихме написали същата функция с параметъра rest:

function sum(...nums) { let total = 0; for(const num of nums) { total += num; } return total;}

Обърнете внимание, че for...inцикълът също е заменен с for...ofцикъла. Направихме нашия код по-четлив и сбит наведнъж.

Алилуя ES6!

Току-що започвате пътуването си с програмиране? Ето няколко статии, които биха могли да ви заинтересуват:

  • Кодиращият bootcamp нещо ли е за вас?
  • Възможна ли е наистина промяна в кариерата?
  • Защо Ruby е чудесен език за започване на програмиране