JavaScript 배열 복제: 소스 배열에 대한 의도적인 수정 방지

JavaScript에서 배열 복제 및 변경

이 예에서는 배열 편집 및 복제 방법에 중점을 둔 JavaScript 프런트 엔드 솔루션을 보여줍니다.

a = [];
a[0] = {};
a[0].team = "Arsenal";
a[1] = {};
a[1].team = "Chelsea";
a[2] = {};
a[2].team = "West Ham";

function change_team(d, club) {
    d[1].team = club;
    return d;
}

b = [...a]; // Shallow copy of the array
change_team(b, "Spurs");

for(n = 0; n < a.length; n++) {
    console.log(n + "] " + a[n].team); // Arsenal, Chelsea, West Ham
}

for(n = 0; n < b.length; n++) {
    console.log(n + "] " + b[n].team); // Arsenal, Spurs, West Ham
}

돌연변이를 방지하기 위한 JavaScript의 심층 복제 배열

이 예에서는 전체 복사를 활용하여 원본에 영향을 주지 않고 복제된 어레이를 변경하는 방법을 보여줍니다.

a = [];
a[0] = {};
a[0].team = "Arsenal";
a[1] = {};
a[1].team = "Chelsea";
a[2] = {};
a[2].team = "West Ham";

function deepCloneArray(arr) {
    return JSON.parse(JSON.stringify(arr)); // Deep copy
}

function change_team(d, club) {
    d[1].team = club;
    return d;
}

b = deepCloneArray(a);
change_team(b, "Spurs");

for(n = 0; n < a.length; n++) {
    console.log(n + "] " + a[n].team); // Arsenal, Chelsea, West Ham
}

for(n = 0; n < b.length; n++) {
    console.log(n + "] " + b[n].team); // Arsenal, Spurs, West Ham
}

JavaScript에서 배열 복제를 위해 Lodash 사용

참조 기반 수정을 방지하기 위해 이 예에서는 잘 알려진 유틸리티 패키지인 Lodash를 사용하여 어레이를 심층 복제합니다.

const _ = require('lodash');

a = [];
a[0] = {};
a[0].team = "Arsenal";
a[1] = {};
a[1].team = "Chelsea";
a[2] = {};
a[2].team = "West Ham";

function change_team(d, club) {
    d[1].team = club;
    return d;
}

b = _.cloneDeep(a);
change_team(b, "Spurs");

for(n = 0; n < a.length; n++) {
    console.log(n + "] " + a[n].team); // Arsenal, Chelsea, West Ham
}

for(n = 0; n < b.length; n++) {
    console.log(n + "] " + b[n].team); // Arsenal, Spurs, West Ham
}

JavaScript 배열 복제에 대해 자주 묻는 질문

1. 깊은 복사본과 얕은 복사본의 차이점은 무엇입니까?
2. 다음과 같은 얕은 복사본 [...array], 단지 배열의 최상위 구조를 복사합니다. 원본과 복제된 배열은 계속해서 객체 참조를 공유합니다. 사용하여 JSON.parse(JSON.stringify(array)) 또는 _.cloneDeep, 전체 복사는 중첩된 항목을 포함하여 모든 수준을 복사합니다.
3. 가끔 복제된 어레이를 편집하면 원래 어레이가 변경될 수 있는 이유는 무엇입니까?
4. 얕은 복사본을 사용하여 복제한 배열의 개체는 여전히 원래 배열과 동일한 메모리 주소와 관련됩니다. 결과적으로 복제된 배열의 객체에 있는 속성을 변경하면 원본도 수정됩니다.
5. JavaScript에서 언제 딥 카피를 사용해야 합니까?
6. 복잡한 구조나 중첩된 개체가 포함된 배열이나 개체로 작업할 때는 참조 기반 수정을 방지하기 위해 전체 복사 방법을 사용해야 합니다.
7. Lodash는 JavaScript의 배열 복제에 어떻게 도움을 줄 수 있나요?
8. 그만큼 _.cloneDeep Lodash에서 제공하는 방법은 배열 및 객체의 심층 복제를 위한 것이며 복사본이 원본 데이터에 대한 참조를 공유하지 않도록 보장합니다.
9. 어레이 심층 복제 시 성능 고려 사항은 무엇입니까?
10. 심층 복제는 특히 대규모 데이터 세트나 복잡하게 중첩된 구조를 처리할 때 메모리를 많이 사용하고 속도가 느릴 수 있습니다. 전체 복사본은 꼭 필요한 경우에만 사용해야 합니다. 그렇지 않은 경우에는 애플리케이션의 특정 요구 사항을 고려하여 다른 옵션을 고려해야 합니다.

JavaScript의 배열 복제에 대한 최종 생각

JavaScript 배열 복제를 위해서는 얕은 복사와 깊은 복사에 대한 확실한 이해가 필요합니다. 확산 연산자와 함께 얕은 복사본을 사용하는 것이 효과적이지만 배열 내부의 개체에 대한 참조만 복사하면 원치 않는 수정이 발생할 수 있습니다.

원본 데이터 무결성을 유지해야 하는 시나리오에서 이상적인 솔루션은 다음과 같은 기술을 사용한 심층 복사입니다. JSON 구문 분석 또는 다음과 같은 유틸리티 라이브러리 로다시. 두 가지 접근 방식 모두 복사된 배열에 대한 변경 사항이 원본 배열에 영향을 미치지 않도록 보장하므로 복잡한 데이터 구조를 관리하는 데 필요합니다.