Рубрики
Без рубрики

Вступление к оператору разброса и параметра отдыха в JavaScript (ES6)

Joanna Gaudyn INTRO к оператору разброса и параметра покоя в JavaScript (ES6) как оператор по распространению, так и параметром покоя записываются как три последовательных точка (…). У них есть что-то еще общее? Оператор Spread Spread (…) Оператор распространения был введен в ES6. Это дает вам

Автор оригинала: FreeCodeCamp Community Member.

Джоанна Гаудин

Как оператор по распространению, так и параметром покоя записываются как три последовательных точка (…). У них есть что-то еще общее?

Оператор распространения (…)

Оператор распространения был введен в ES6. Это дает вам возможность расширить ИТЕРАЛНЫЕ объекты на несколько элементов. Что это на самом деле значит? Давайте проверим некоторые примеры.

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

Принты:

const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Принты:

Вы можете заметить, что как массив из первого примера, так и множества от второго, был расширен в их отдельные элементы (строки и цифры соответственно). Как это может быть любое использование, вы можете спросить.

Наиболее распространенное использование, вероятно, объединяет массивы. Если вам когда-нибудь приходилось делать это во времена перед оператором распространения, вы, вероятно, использовали CONCAT () метод.

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

Принты:

Это не так уж плохо, но то, что предлагает оператор Spread Operator – это ярлык, который делает ваш код выглядеть более читаемым:

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

Принты:

Вот что мы получили, если бы мы попробовали делать то же самое без Оператор распространения:

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

Принты:

Что здесь случилось? Вместо того, чтобы объединить массивы, мы получили Хаос массив с Формы Массив на индекс 0 и Объекты Массив на индекс 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);

Принты:

Параметр отдыха давайте возьмем значения фильм Массив и назначьте их нескольким отдельным переменным, используя Разрушение Отказ Таким образом Название , Рейтинг и Год назначаются первые три значения в массиве, но где происходит реальная магия Актеры Отказ Благодаря параметрам отдыха Актеры Получает присвоение оставшихся значений фильм массив, в форме массива.

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

Вариадические функции – это функции, которые принимают неопределенное количество аргументов. Один хороший пример – сумма () Функция: Мы не можем узнать аванс, сколько аргументов будет передано ему:

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

В более ранних версиях JavaScript этот вид функции будет обрабатываться с использованием Аргументы объекта, который является настроенным объектом, доступным в качестве локальной переменной внутри каждой функции. Он содержит все значения аргументов, переданных функции. Давайте посмотрим, как сумма () Функция может быть реализована:

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

Это работает, но это далеко не идеально:

  • Если вы посмотрите на определение для сумма () Функция, у него нет никаких параметров. Это может быть довольно вводит в заблуждение.
  • Это может быть трудно понять, если вы не знакомы с объектом аргументов (как в: где Hek – это аргументы исходя из?!)

Вот как мы написали ту же функцию с параметром покоя:

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

Обратите внимание, что для ... в петля была заменена на для … из петля также. Мы сделали наш код более читаемым и кратким сразу.

Hallelujah ES6!

Вы только начинаете свое путешествие с программированием? Вот некоторые статьи, которые могут вас заинтересовать: