В коде есть такие места, где требуется список значений. Можно представить какую-нибудь функцию, при вызове которой надо передать список аргументов: someFunction(1, 2, 3, 4). А вот конкретный пример:

const min = Math.min(1, 2, 3, 4);
console.log(min); // => 1

const min = Math.min(-2, -1, 0, 1, 2, 3, 4);
console.log(min); // => -2

Функция Math.min() ожидает получить на вход список чисел и возвращает наименьшее из них.

Синтаксис создания массива также подразумевает список — в квадратных скобках надо перечислить элементы будущего массива [ список ]:

const arr = [1, 2, 3, 4, 5];

Есть ещё несколько случаев, когда нужны списки значений. Важно то, что во всех таких случаях, мы можем применить spread-оператор, который раскладывает массив на список элементов. Синтаксис этого оператора таков: ...arr, ставим три точки перед массивом. Пример с функцией можно переписать:

// const min = Math.min(1, 2, 3, 4);

const arr = [1, 2, 3, 4];
const min = Math.min(...arr);
console.log(min); // => 1

// или сразу так
Math.min(...[1, 2, 3, 4]); // 1

Итак, в этом примере с помощью spread-оператора мы получили из массива список элементов. Но подробнее про это будет в курсе про функции. А сейчас посмотрим как использовать spread при конструировании нового массива:

const arr = [1, 2, 3, 4];

const newArr = [...arr];
console.log(newArr); // => [ 1, 2, 3, 4 ]

Выглядит немного странно, но давайте разберём, что произошло и какие преимущества у такого подхода.

  • Копирование массива, а не ссылки.

    В операции const newArr = [...arr]; создаётся новый массив — копия массива arr — и в константу newArr сохраняется новая ссылка на новый массив. Теперь arr и newArr указывают на разные массивы. То есть это хороший способ сделать копию массива.

  • Конструирование нового массива на основе старого.

    const arr = [1, 2, 3, 4];
    
    const newArr = [...arr, 5, 6, 7];
    console.log(newArr); // => [ 1, 2, 3, 4, 5, 6, 7 ]
    
    const arr2 = [8, 9, 10];
    // соединим два массива
    const concatenatedArr = [...arr, ...arr2];
    console.log(concatenatedArr); // => [ 1, 2, 3, 4, 8, 9, 10 ]
    

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

  • Гибкое конструирование. Может быть задействовано любое количество spread-операторов и в любом порядке:

    const arr = [1, 2, 3, 4];
    const arr2 = [8, 9, 10];
    
    const newArr = [...arr, 5, 6, 7, ...arr2];
    console.log(newArr); // => [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
    
    [...arr, 0, 0, 0, ...arr]; // [ 1, 2, 3, 0, 0, 0, 1, 2, 3 ]
    [0, 0, 0, ...[...arr, ...arr2]]; // [ 0, 0, 0, 1, 2, 3, 8, 9, 10 ]
    

Этот приём часто используется на практике при создании массивов. Возьмите его себе на вооружение.

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Node, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →