17. Spread и Rest операторы

Привет! Сегодня мы разберемся с двумя очень полезными операторами в JavaScript: Spread и Rest. Они позволяют элегантно работать с массивами и объектами, делая код чище и понятнее.

Spread оператор (…)

Spread оператор (оператор расширения) позволяет “расширить” итерируемый объект (например, массив или строку) в местах, где ожидается ноль или более аргументов (для вызовов функций) или элементов (для литералов массивов). Проще говоря, он “распаковывает” элементы.

Пример 1: Копирование массива

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Создает новую копию arr1

console.log(arr2); // Вывод: [1, 2, 3]
console.log(arr1 === arr2); // Вывод: false (это разные массивы)

Пример 2: Объединение массивов

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1, ...arr2];

console.log(combinedArr); // Вывод: [1, 2, 3, 4, 5, 6]

Пример 3: Передача аргументов функции

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Вывод: 6

Rest оператор (…)

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

Пример 1: Сбор аргументов в функцию

function myFunc(a, b, ...args) {
  console.log("a:", a);
  console.log("b:", b);
  console.log("args:", args); // args - это массив
}

myFunc(1, 2, 3, 4, 5);
// Вывод:
// a: 1
// b: 2
// args: [3, 4, 5]

Пример 2: Деструктуризация массива

const [first, second, ...rest] = [1, 2, 3, 4, 5];

console.log(first);   // Вывод: 1
console.log(second);  // Вывод: 2
console.log(rest);    // Вывод: [3, 4, 5]

Жизненный пример

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

// Пример в React (псевдокод)

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "John",
      age: 30,
      city: "New York"
    };
  }

  updateName = (newName) => {
    this.setState({
      ...this.state, // Копируем все существующие свойства состояния
      name: newName  // Перезаписываем только свойство name
    });
  }

  render() {
    return (
      <div>
        <p>Name: {this.state.name}</p>
        <button onClick={() => this.updateName("Jane")}>Change Name</button>
      </div>
    );
  }
}

Rest оператор часто используется в библиотеках для создания функций высшего порядка, которые принимают переменное количество аргументов. Например, в Lodash есть функции, которые используют Rest оператор для обработки аргументов.

Ключевые моменты

• Spread оператор: “Распаковывает” элементы итерируемых объектов (массивов, строк).
• Rest оператор: Собирает “остаток” аргументов в массив.
• Spread используется для копирования массивов и объектов, объединения массивов и передачи аргументов в функции.
• Rest используется для сбора аргументов функции в массив и деструктуризации.
• Оба оператора делают код более читаемым и лаконичным.

Интерактивный пример