Оператор расширения ... — это мощная функция, которая обычно используется с массивами. Его можно рассматривать как инструмент для «распределения» элементов массива на отдельные значения, что делает их более доступными и удобными для работы. Таким образом, оператор распространения является ценным инструментом для любого разработчика JavaScript, работающего с массивами.

1. Объединить два массива

Объединение массивов — это обычная операция в JavaScript, а оператор расширения позволяет легко объединить два или более массива в один массив. Этот метод может быть полезен во многих ситуациях, когда вам нужно объединить несколько массивов в один массив для обработки или отображения.

const john_branch = ["Initial commit", "Create database connection"];
const emma_branch = ["Create login page", "Write e2e tests"];

const main = [...john_branch, ...emma_branch];
console.log(main);

//  Output
// [
//  "Initial commit",
//  "Create database connection",
//  "Create login page",
//  "Write e2e tests"
// ]

2. Добавить в последнюю позицию

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

let john_branch = ["Initial commit", "Create database connection"];
john_branch = [...john_branch, "Create models"];
console.log(john_branch) // ["Initial commit", "Create database connection", "Create models"]

3. Удалить с самого начала

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

const animals = ["cat", "dog", "monkey", "tiger"];
const [cat, ...others] = animals;
console.log(cat); // cat
console.log(others); // ["dog", "monkey", "tiger"]

4. Поверхностное копирование

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

Важно отметить, что этот метод может не работать должным образом для вложенных массивов или объектов, поэтому при работе с этими типами данных следует соблюдать осторожность.

const animals = ["cat", "dog", "monkey", "tiger"];
const shallowCopyAnimals = [...animals]

shallowCopyAnimals.push("bird");

console.log(shallowCopyAnimals); // ["cat", "dog", "monkey", "tiger", "bird"]
console.log(animals); // ["cat", "dog", "monkey", "tiger"]
const people = [{name: "John"}, {name: "Alice"}];
const copyPeople = [...people];

copyPeople[0].name = "James";

console.log(copyPeople); // [{ name: "James" }, { name: "Alice" }]
console.log(people); // [{ name: "James" }, { name: "Alice" }]

5. Установить

Мы можем легко создать новый массив из набора, а затем преобразовать его обратно в массив. Это может быть полезно, когда вам нужно удалить дубликаты из массива.

const duplicates = [1, 5, 6, 9, 1, 5, 6, 3, 5]
const uniqueSet = new Set(duplicates);
const uniqueArray = [...uniqueSet];

console.log(uniqueSet); // Set(5) {1, 5, 6, 9, 3}
console.log(uniqueArray); // [1, 5, 6, 9, 3]

6. Параметры покоя

Это позволяет функции принимать неопределенное количество аргументов в виде массива.

const arr = [1, 2, 3];
const sum = (a, b, c) => a + b + c;
console.log(sum(...arr)); // 6

7. Передача аргументов

Оператор распространения также можно использовать для передачи переменного количества аргументов функции в виде массива.

const sum = (...args) => {
  let total = 0;
  for (let arg of args) {
    total += arg;
  }

  return total;
}
console.log(sum(1, 2, 3)); // 6

Если вам понравилась информация и она оказалась полезной, вы можете выразить свою поддержку, купив мне кофе! Ваш вклад помогает мне продолжать создавать ценный контент и ресурсы.