Параметр отдыха и оператор спреда

Один из синтаксических сахаров ES6 «…» три точки

Все мы знаем об обновлении ES6 для JavaScript, и оно принесло с собой отличный синтаксический сахар в виде обновления, улучшающего и упрощающего написание кода или помогающего нам создавать более гибкие функции. Один из них - это запись с тремя точками «…», которую мы можем использовать двумя разными способами: один - как параметр отдыха, а другой - как оператор распространения. Итак, что это такое и чем они отличаются при использовании одинаковых обозначений для двух разных слов?

Остаточный параметр

Остальной синтаксис собирает множество элементов и превращает их в один элемент. Давайте возьмем пример, мы выполняем такую ​​функцию (как показано ниже)

function add(a, b) {
  return a + b;
}
console.log(add(1, 2, 3, 4, 5)); //returns 3

Вышеупомянутая функция вернет «3» в качестве вывода в журнале, потому что в JavaScript мы можем передать любое количество входных данных или аргументов, как мы передали в «add (1, 2, 3,4,5)». В данном случае рассматриваются только первые два. И чтобы преодолеть это, мы используем параметр rest. С помощью параметра rest мы можем собрать любое количество аргументов или входных данных и выполнить с ними любую операцию, которую захотим. Пример ниже

function add(...args) {
  let sum = 0;
  for(var i = 0; i< args.length; i++){
     sum=sum+args[i];
  }
  return sum;
}
console.log(add(1));        //returns 1
console.log(add(1,2));      //returns 3 
console.log(add(1,2,3));    //returns 6

Примечание. В определении функции может быть только один параметр rest «…», а параметр rest должен находиться в последнем аргументе. Это потому, что он собирает все оставшиеся / лишние аргументы в массив.

xyz(...arg1, arg2, arg3)       // Wrong Way 
xyz(arg1, ...arg2, arg3)       // Wrong Way
xyz(...arg1, ...arg2, arg3)    // Wrong Way
xyz(arg1, ...arg2, ...arg3)    //Wrong Way
xyz(...arg1, ...arg2, ...arg3) //Wrong Way

Выше приведены почти все неправильные способы объявления остальных параметров. Ниже приведены правильные способы

xyz(...arg1)              // Right Way
xyz(arg1, ...arg2)        // Right Way
xyz(arg1, arg2, ...arg3)  // Right Way

Оператор распространения

Синтаксис Spread «расширяет» массив на его элементы, в то время как синтаксис rest собирает несколько элементов и «уплотняет» их в один элемент.

Согласно MDN Web Docs определение оператора распространения выглядит примерно так:
Синтаксис распространения (…) позволяет расширять итерируемый объект, такой как выражение массива или строка, в местах, где ноль или более аргументов (для вызовов функций ) или элементы (для литералов массива), либо выражение объекта будет развернуто в местах, где ожидается ноль или более пар ключ-значение (для литералов объекта).

Давайте посмотрим, как и где используется оператор спреда:

Добавление элементов массива в существующий массив

var arr = ["A", "B", "C"];
var newArr = ["D", ...arr];
console.log(newArr); //output will be ["D", "A", "B", "C"]

Значение newArr будет ["D", "A", "B", "C"]. В отличие от остальных параметров, мы можем использовать оператор распространения в качестве первого аргумента.

var newArr = [...arr, "D"];
console.log(newArr); //output will be ["A", "B", "C", "D"]

Итак, если мы наконец хотим добавить элементы, вы можете увидеть, что мы можем сделать это в операторе распространения. Результатом в приведенном выше случае будет ["A", "B", "C", "D"].

Копирование массива

Мы можем использовать оператор распространения, чтобы скопировать массив.

var arr1 = [1, 2, 3, 4, 5];
var arr2 = [...arr];

Таким образом arr1 можно легко скопировать в arr2.

Передача элементов массива в качестве отдельных аргументов функции

Если у нас есть массив, и мы должны передать весь массив функции, мы можем сделать это следующим образом

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));  // expected output: 6

Здесь sum вызов функции аналогичен sum(1, 2, 3). Примечание. Iterable также работает в операторе распространения. Итак, если бы у нас была строка, как показано ниже

const str = "Hello!";
console.log([...str]); 
//expected output ["H", "e", "l", "l", "o", "!"]

Мы видим, что результат именно в этом случае.

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

Если вам понравилась эта статья, подпишитесь на меня в Twitter или LinkedIn.