Как клонировать массивы с помощью ES6

Раньше, когда ES6 ещё не было, мы часто использовали метод slice(), чтобы клонировать массив. Теперь же с помощью ES6, вы можете использовать оператор распространения.

const ducks = ["🦆", "🦆", "🦆", "🦆"]

// Раньше
const ducksClone = ducks.slice()

// Сейчас
const ducksCloneES6 = [...ducks]

Вот так можно клонировать массив с помощью ES6.

Но, может, у вас появился вопрос…

Почему нельзя использовать оператор =?

Потому что массив в JavaScript содержит только ссылочные значения. Когда вы пишете = и пытаетесь клонировать массив, будет скопирована только ссылка исходного массива на переменную, а не на массив.

const ducks = ["🦆", "🦆", "🦆"]

const pirateDucks = ducks
const cloneDucks = [...ducks]

console.log(ducks === cloneDucks)
// true -> same memory space

console.log(ducks === pirateDucks)
// false -> new memory space

При использовании = возникают некие проблемы

В JavaScript массивы изменяемы, т.е. их состояние может быть изменено. Вот что может случиться, если пользоваться = 👇

const ducks = ["🦆", "🦆", "🦆"]

const pirateDucks = ducks
pirateDucks.push("🏴‍☠️")

console.log(pirateDucks)
// ["🦆", "🦆", "🦆", "🏴‍☠️"]

console.log(ducks)
// ["🦆", "🦆", "🦆", "🏴‍☠️"] - Original duck array values got changed