ES6에서 어레이 복제

배열을 복사해야 할 때 종종 슬라이스를 사용합니다. 그러나 ES6에서는 확산 연산자를 사용하여 배열을 복제할 수도 있습니다. 꽤 멋져요 🤩

const sheeps = ['🐑', '🐑', '🐑'];

// Old way
const cloneSheeps = sheeps.slice();

// ES6 way
const cloneSheepsES6 = [...sheeps];

=를 사용하여 배열을 복사할 수 없는 이유는 무엇입니까?

JS의 배열은 참조 값이므로 =를 사용하여 복사하려고 하면 배열의 값이 아닌 원래 배열에 대한 참조만 복사됩니다. 배열의 실제 복사본을 만들려면 새 값 변수 아래에 배열 값을 복사해야 합니다. 그런 식으로 이 새 배열은 메모리의 이전 배열 주소를 참조하지 않습니다.

const sheeps = ['🐑', '🐑', '🐑'];

const fakeSheeps = sheeps;
const cloneSheeps = [...sheeps];

console.log(sheeps === fakeSheeps);
// true --> it's pointing to the same memory space

console.log(sheeps === cloneSheeps);
// false --> it's pointing to a new memory space

참조 값의 문제

Redux 또는 상태 관리 프레임워크를 다룬 적이 있다면. 불변성이 매우 중요하다는 것을 알게 될 것입니다. 간단히 설명하겠습니다. 불변 객체는 생성된 후에 상태를 수정할 수 없는 객체입니다. JavaScript의 문제점은 배열이 변경 가능하다는 것입니다. 따라서 다음과 같은 일이 발생할 수 있습니다.

const sheeps = ['🐑', '🐑'];

const sheeps2 = sheeps;

sheeps2.push('🐺');

console.log(sheeps2);
// [ '🐑', '🐑', '🐺' ]

// Ahhh 😱 , our original sheeps have changed?!
console.log(sheeps);
// [ '🐑', '🐑', '🐺' ]

이것이 배열을 복제해야 하는 이유입니다.

const sheeps = ['🐑', '🐑'];

const sheeps2 = [...sheeps];

// Let's change our sheeps2 array
sheeps2.push('🐺');

console.log(sheeps2);
// [ '🐑', '🐑', '🐺' ]

// ✅ Yay, our original sheeps is not affected!
console.log(sheeps);
// [ '🐑', '🐑' ]

변경 가능한 데이터 유형과 변경 불가능한 데이터 유형

변하기 쉬운:

객체

배열

기능

불변:

모든 프리미티브는 변경할 수 없습니다.

문자열

번호

부울

널

정의되지 않은

기호

얕은 복사 전용

스프레드는 배열을 복사할 때 한 수준 깊이만 진행된다는 점에 유의하십시오. 따라서 다차원 배열을 복사하려는 경우 다른 대안을 사용해야 합니다.

const nums = [[1, 2], [10]];

const cloneNums = [...nums];

// Let's change the first item in the first nested item in our cloned array.
cloneNums[0][0] = '👻';

console.log(cloneNums);
// [ [ '👻', 2 ], [ 10 ], [ 300 ] ]

// NOOooo, the original is also affected
console.log(nums);
// [ [ '👻', 2 ], [ 10 ], [ 300 ] ]

여기 내가 배운 흥미로운 것이 있습니다. 얕은 복사는 첫 번째 수준이 복사되고 더 깊은 수준이 참조됨을 의미합니다.

커뮤니티 입력

Array.from은 어레이를 복제하는 또 다른 방법입니다.

const sheeps = ['🐑', '🐑', '🐑'];

const cloneSheeps = Array.from(sheeps);