Как деструктурировать и скопировать массив одновременно?

Question

Я знаю, что вы можете скопировать массив с помощью оператора распространения:

const itemsArr = [...this.state.itemsArr];

и вы можете деструктурировать массив, который является значением ключа объекта:

const { itemsArr } = this.state

Есть ли способ объединить их в один шаг? Псевдокод:

const { itemsArr } = [...this.state]

или

const { [...itemsArr] } = this.state

РЕДАКТИРОВАТЬ: Есть ли способ объединить их в один шаг, , чтобы не вводить дважды "itemsArr"?

Answer 1

Это можно сделать, уничтожив itemsArr из копии state:

const { itemsArr } = JSON.parse(JSON.stringify(this.state))

Сильной стороной этого является то, что ваши вложенные объекты клонируются, поэтому ваш state.itemsArr также копируется, и изменение itemsArr не изменит массив в state. Недостатком является то, что если ваш state объект содержит функции, они не будут доступны с помощью этого метода, а вы можете поставить под вопрос производительность.

Другой способ скопировать state - использовать Object.assign:

const { itemsArr } = Object.assign({}, this.state)

С этим вы можете получить доступ к своим функциям внутри state, но это делает поверхностную копию, поэтому state.itemsArr не будет клонирован.

ECMAScript2018 фактически имеет оператор распространения, который работает с объектами JSON:

const { itemsArr } = { ...this.state }

https://codesandbox.io/s/32qvzjy2op (посмотрите на консоль вашего браузера, она плохая).

Но опять же, он делает только мелкую копию.

Лучшим способом было бы написать / импортировать функцию deepCopy, которая клонирует объект с его вложенными свойствами и функциями.

https://lodash.com/docs#cloneDeep