В чем отличия вариантов копирования массива?

Question

[Evgeii]

Здравствуйте. Подскажите в чем разница этих методов копирование массива? Допустим есть объект

constructor(props) {
    super(props)
    this.state = {
      arr: [
        { name: 'samsung', year: 2020, price: 350$ },
        { name: 'apple', year: 2020, price: 500$},
        { name: 'Xiaomi', year: 2019, price: 200$},
        { name: 'Xiaomi Mi2', year: 2019, price: 300$},
      ],
      showCard: false
    }
  }

И я хочу копировать массив

const arr1 = JSON.parse(JSON.stringify(this.state.arr))

const arr2 = this.state.arr.slice()
const arr3 = [...this.state.arr]
const arr2 = this.state.arr.concat()
В чем принципиальные различия этих методов? Видимых изменений в программе не заметил.

Comments

[Роман Александрович]

а какой глубинный смысл заложен в этот функционал? Просто очень странный код)

[Evgeii]

Роман Александрович, Вообще там на сайтике есть блок с товарами с данными которые сортируются и добавляются в корзину изменяется комплектация и тд. Я просто для примера сократил. Мне интересно почему работает со всеми методами.

[Роман Александрович]

Evgeii, потому что и первый метод и второй в результате выдаст одинаковый ответ.
вы копируете массив но странный способом

const arr1 = JSON.parse(JSON.stringify(this.state.arr))

const arr1 = this.state.arr

почему вы так не написали?

[Роман Александрович]

Evgeii, и тут странно тоже

const arr2 = this.state.arr.slice()
const arr3 = [...this.state.arr]
const arr2 = this.state.arr.concat()


const arr2 = this.state.arr //можно же просто так написать

[Evgeii]

Роман Александрович, Там просто был код до меня такой и в разных местах клонировалось по разному и мне стало интересно в чем разница. Спасибо, пойду тогда все на const arr = this.state.arrпеределаю

[Петр Мухуров]

const arr1 = JSON.parse(JSON.stringify(this.state.arr))

это вариант полностью склонирует массив вместе с содержимым
другие варианты изменят ссылку на массив, но ссылки на объекты внутри массива (если они где-то используются) останутся

Answer 1

[Роман Александрович]

const arr1 = JSON.parse(JSON.stringify(this.state.arr))

const arr1 = this.state.arr

const arr2 = this.state.arr.slice()
const arr3 = [...this.state.arr]
const arr2 = this.state.arr.concat()


const arr2 = this.state.arr //можно же просто так написать