Узнайте об операторах распределения и отдыха

Привет! Я Сагар. Я люблю писать учебные пособия и статьи, чтобы помочь разработчикам лучше понять магию JavaScript. Если у вас есть вопросы по статье, оставьте комментарий, и я свяжусь с вами, или найди меня в твиттере @ sagar_dev44.

В этой статье мы собираемся обсудить функцию, появившуюся в ES6, а именно оператор распространения и оператор отдыха. 🔥 🔥 🔥

Я стал большим поклонником трех точек, которые могут изменить ваш стиль решения проблемы в JavaScript. Мы можем использовать три точки… двумя разными способами: оператор распространения и оператор отдыха.

Остальные параметры 😴

С остальными параметрами мы можем собрать любое количество аргументов в массив и делать с ними все, что захотим. Остальные параметры были введены, чтобы уменьшить шаблонный код, вызванный аргументами. 🙌

function myFunc(a, b, …args) {
 console.log(a); // 22
 console.log(b); // 98
 console.log(args); // [43, 3, 26]
};
myFunc(22, 98, 43, 3, 26);

В последнем параметре myFunc с префиксом…, что приведет к размещению всех оставшихся аргументов в массиве javascript.

Остальные параметры собирают все оставшиеся аргументы, поэтому нет смысла добавлять остальные параметры перед последним параметром. Остаточный параметр должен быть последним формальным параметром.

function myFunc(arg1, ...rest, arg2) {
  // arg2 ?
}

Остальные параметры можно деструктурировать (только для массивов), что означает, что их данные можно распаковать в отдельные переменные.

function myFunc(...[x, y, z]) {
  return x * y* z;
}

myFunc(1)          // NaN
myFunc(1, 2, 3)    // 6
myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured)

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

Оператор распространения используется для расширения элементов итерируемого объекта (например, массива) в места, где могут поместиться несколько элементов.

function myFunc(x, y, ...params) { // used rest operator here
  console.log(x);
  console.log(y);
  console.log(params);
}
var inputs = ["a", "b", "c", "d", "e", "f"];
myFunc(...inputs); // used spread operator here
// "a"
// "b"
// ["c", "d", "e", "f"]

Всегда существовало множество способов комбинирования массивов, но оператор распространения дает возможность использовать новый метод комбинирования массивов:

const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian'];
const specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];
const pizzas = [...featured, 'veg pizza', ...specialty];
console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'

С оператором распространения теперь возможно поверхностное клонирование (за исключением прототипа) или слияние объектов с использованием более короткого синтаксиса, чем Object.assign().

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

👉 Заключение

Когда мы видим в коде три точки (…), это либо параметры покоя, либо оператор распространения.

Есть простой способ отличить их:

  1. Когда в конце параметров функции стоят три точки (…), это «остальные параметры», которые собирают оставшуюся часть списка аргументов в массив.

2. Когда три точки (…) встречаются в вызове функции или что-то подобное, это называется «оператором распространения» и разворачивает массив в список.

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

😄 Удачного кодирования…

Учить больше



11 библиотек анимации JavaScript на 2019 год
Некоторые из лучших библиотек анимации JS и CSS в мире. blog.bitsrc.io





11 игровых площадок для компонентов пользовательского интерфейса React на 2019 год
Полезные онлайн-площадки и редакторы для компонентов пользовательского интерфейса blog.bitsrc.io





Состояние Angular в 2019 году
Подробный обзор текущего состояния Angular, от новейших функций до самых горячих тем и тенденций, о которых вы… пишете. bitsrc.io



Инкапсулирует компоненты с помощью Bit, чтобы запускать их в любом месте в ваших проектах и ​​приложениях.

Бит инкапсулирует компоненты в ваших проектах со всеми их файлами и зависимостями, поэтому они могут работать где угодно в ваших приложениях.

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

"УЧИТЬ БОЛЬШЕ"