개체를 복사하는 방법?
14310 단어 programmingbeginnersjavascript
시작하자
딥 카피와 얕은 카피의 이해
문자열, 숫자 및 부울과 같은 기본 데이터 유형을 포함하는 재할당 작업에서 원래 변수는 JavaScript에 의해 복사됩니다.
예를 들어,
y = x // x is copied into y
y++ // y is incremented
console.log(y) // now 4
console.log(x) // still 3
이 경우 값 3이 y에 복사된 다음 x와 y의 연결이 끊어집니다. 따라서 y를 변경해도 x에는 영향을 미치지 않습니다.
반대로 배열 및 객체와 같은 기본이 아닌 데이터 유형의 경우 값에 대한 참조만 전달됩니다. 따라서 사본이 변경되면 원본도 변경됩니다. 이를 얕은 복사라고도 합니다.
let aalu = {name: "aalu"};
let bhalu = aalu;
bhalu.name = "bhalu";
console.log(aalu.name); // outputs "bhalu"
console.log(bhalu.name); // outputs "bhalu"
대신 원본 개체에 영향을 주지 않고 수정할 수 있도록 개체를 복사하려면 전체 복사본을 만들어야 합니다.
이제 Obj 복사에 대해 이야기하겠습니다.
1. JSON.stringify() 및 JSON.parse()
먼저
JSON.stringify()
와 JSON.parse()
가 무엇인지에 대해 이야기해 볼까요?JSON.stringify()
: 이 메소드는 JavaScript 객체 또는 값을 JSON 문자열로 변환합니다.JSON.parse()
: 이 메소드는 JSON 문자열을 구문 분석하여 문자열에서 설명하는 JavaScript 값 또는 객체를 구성합니다.이 두 가지 방법을 결합하여 다음과 같은 개체의 복사본을 만들 수 있습니다.
const user = {
name: "JSON",
age: "21",
job: "standard file format and data interchange format",
}
let clone = JSON.parse(JSON.stringify(user))
console.log(user)
console.log(clone)
/*
{
age: 21,
job: "standard file format and data interchange format",
name: "JSON"
}
{
age: 21,
job: "standard file format and data interchange format",
name: "JSON"
}
*/
복사 객체가 변경되면 원본 객체는 동일하게 유지됩니다.
clone.age = 32
console.log(user)
console.log(clone)
/*
{
age: 21,
job: "standard file format and data interchange format",
name: "JSON"
}
{
age: 32,
job: "standard file format and data interchange format",
name: "JSON"
}
그러나 이것은 함수 내부에 있던 함수로 작업할 때 문제를 일으키기도 합니다.
객체
user
에 incrementAge
라는 메서드가 있다고 가정합니다.const user = {
name: "JSON",
age: "21",
job: "standard file format and data interchange format",
incrementAge: function() {
this.age++
}
}
복사된 개체에서는 기능을 사용할 수 없습니다. 따라서 이 방법은 개체 내에 함수가 없는 경우에만 깊은 복사를 수행합니다.
Object.assign()
개체 생성자 메서드 중
Object.assign()
는 하나 이상의 소스 개체에서 대상 개체로 값과 속성을 복사하는 데 사용됩니다. 소스 개체에서 복사한 속성과 값이 있는 대상 개체를 반환합니다.const user = {
name: "JSON",
age: "21",
job: "standard file format and data interchange format",
incrementAge: function() {
this.age++
}
}
let clone = Object.assign({}, user) // Copies user into clone
clone.age = 32
console.log(user)
console.log(clone)
/*
{
age: 21,
incrementAge: function() {
this.age++
},
job: "standard file format and data interchange format",
name: "JSON"
}
{
age: 32,
incrementAge: function() {
this.age++
},
job: "standard file format and data interchange format",
name: "JSON"
}
*/
그러나 한 가지 기억해야 할 사항
Object.assign()
은 메서드가 개체에 대해 부분 전체 복사만 수행한다는 것입니다.이것이 의미하는 바를 이해하기 위해 다음을 고려하십시오.
const user = {
name: "JSON",
age: 21,
job: "standard file format and data interchange format",
location: {
city: "Lagos",
}
}
const clone = Object.assign({}, user)
clone.age = 32
clone.location.city = "New York"
console.log(user)
console.log(clone)
/*
{
age: 21,
job: "standard file format and data interchange format",
location: {
city: "New York",
},
name: "JSON",
}
{
age: 32,
job: "standard file format and data interchange format",
location: {
city: "New York",
},
name: "JSON",
}
*/
중첩된 개체 내에서 속성을 변경할 때마다(
clone
에서) 원래 개체에서 동일한 속성도 변경됩니다(user
). 원래 개체의 나이 속성은 그대로 유지되지만 도시 속성은 재할당 작업으로 인해 변경되었습니다. 따라서 Object.assign()
메서드는 중첩 개체가 없는 개체를 딥 복사하는 데 사용해야 합니다.확산 연산자( ... )
ES2015에 도입된 이 연산자는 매우 짧고 단순하기 때문에 훌륭합니다. 모든 값을 새 개체로 '확산'합니다. 다음과 같이 사용할 수 있습니다.
const obj = {
age: 21,
job: "standard file format and data interchange format",
location: {
city: "New York",
},
name: "JSON",
}
const copyObj = {...obj}
copyObj.job = "nothing"
console.log(obj, copyObj)
/*
{
age: 21,
job: "standard file format and data interchange format",
location: {
city: "New York",
},
name: "JSON",
}
{
age: 21,
job: "nothing",
location: {
city: "New York",
},
name: "JSON",
}
그러나
Object.assign()
와 마찬가지로 스프레드 연산자는 부분 복사본만 만듭니다. 따라서 중첩된 개체가 있는 개체는 깊이 복사되지 않습니다.Lodash 클론Deep()
Lodash는 모듈성, 성능 및 추가 기능을 제공하는 최신 JavaScript 유틸리티 라이브러리입니다. Lodash는 또한 JavaScript에서 개체의 심층 복제를 위한 유틸리티 메서드 _.cloneDeep()를 제공합니다.
const deepClonedObject = _.clonedeep(originalObject);
이것과 그 방법에 대한 자세한 내용은 다음에서 확인할 수 있습니다.
https://lodash.com/docs
결론
지금까지 살펴본 것처럼 JavaScript에서 변수를 복사하는 방법에는 여러 가지가 있습니다. 모든 경우에 완벽한 방법은 없으므로 각 상황에 가장 적합한 방법을 신중하게 선택해야 합니다.
Reference
이 문제에 관하여(개체를 복사하는 방법?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ravikumar1002/how-to-copy-object-2hmf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)