Сегодня я рассмотрел операторы rest и spread в JavaScript. Эти концепции широко используются даже при разработке React. Итак, прыгаем!

Оператор отдыха

Оператор rest позволяет нам извлечь оставшиеся элементы массива при использовании деструктуризации массива. Рассмотрим пример:

const likes = ["bones", "walks", "cuddles", "family", "toys"];
const [like1, like2, ...otherLikes] = likes;
console.log(like1, like2, otherLikes); 
// Output: bones walks ["cuddles", "family", "toys"]

В этом коде оператор остатка ... используется для сбора оставшихся элементов массива likes в массив otherLikes.

Оператор спреда

Это позволяет нам брать элементы из массива или объекта и распределять их по отдельным элементам. Это упрощает создание новых массивов или объектов путем добавления или изменения элементов.

  1. Пример массива:
const likes = ["bones", "walks", "cuddles", "family", "toys"];
const newLikes = [...likes, "sleep"];
console.log(newLikes); 
// Output: ["bones", "walks", "cuddles", "family", "toys", "sleep"]

В этом коде оператор распространения используется для создания нового массива newLikes путем объединения элементов likes с дополнительным элементом "sleep".

2. Пример объекта:

const zzong = {
  breed: "mixed",
  nickname: "princess",
  age: 11,
  likes: ["bones", "walks", "cuddles", "family", "toys"]
};

const updatedZzong = {
  ...zzong,
  color: ["white", "brown"],
  size: "medium"
};

console.log(updatedZzong); 
// Output: { breed: "mixed", nickname: "princess", age: 11, likes: ["bones", "walks", "cuddles", "family", "toys"], color: ["white", "brown"], size: "medium" }

В этом примере оператор распространения используется для создания нового объекта updatedZzong путем копирования всех свойств объекта zzong и добавления новых свойств color и size. Результатом является новый объект, который включает в себя все исходные свойства наряду с новыми.