Javasript에서 객체 병합
Kushank Singh
2023년10월12일
-
object.assign()함수를 사용하여 JavaScript에서 객체 병합 - Spread 연산자를 사용하여 JavaScript에서 개체 병합
-
array.reduce()함수를 사용하여 JavaScript에서 객체 병합 -
jquery.extend()함수를 사용하여 JavaScript에서 객체 병합 - 사용자 정의 함수를 사용하여 JavaScript에서 개체 병합
객체는 키-값 쌍에 데이터를 저장할 수있는 원시 데이터 유형이 아닙니다.
이 튜토리얼에서는 다른 방법을 사용하여 JavaScript에서 둘 이상의 객체를 병합합니다.
object.assign()함수를 사용하여 JavaScript에서 객체 병합
JavaScript에서assign()메소드는 하나 이상의 객체에서 대상 객체로 속성을 반복적으로 읽을 수 있습니다. 대상 개체를 반환합니다. 두 개체를 빈 개체로 전달하여 병합 할 수 있습니다.
아래 코드를 확인하십시오.
var obj1 = {
fruits: ['Banana', 'Mango'],
vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
store: 'Walmart',
};
var obj3 = Object.assign({}, obj1, obj2);
console.log(obj3);
출력:
{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}
Spread 연산자를 사용하여 JavaScript에서 개체 병합
JavaScript에서 스프레드 연산자 (…)는 배열의 모든 요소를 압축 해제 할 수 있습니다. 객체를 병합하는데도 사용할 수 있습니다.
이 방법을 사용하는 방법은 다음 코드를 참조하십시오.
var obj1 = {
fruits: ['Banana', 'Mango'],
vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
store: 'Walmart',
};
var obj3 = {...obj1, ...obj2};
console.log(obj3);
출력:
{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}
array.reduce()함수를 사용하여 JavaScript에서 객체 병합
여기에서는 배열의 각 요소에 대해 감속기 함수 (사용자가 제공)를 구현하는 데 사용되는array.reduce()함수를 사용했습니다. 단일 출력 값을 반환합니다.
다음 코드 스 니펫에서이를 구현합니다.
var obj1 = {
fruits: ['Banana', 'Mango'],
vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
store: 'Walmart',
};
function merge(...arr) {
return arr.reduce((acc, val) => {
return {...acc, ...val};
}, {});
}
var obj3 = merge(obj1, obj2);
console.log(obj3);
출력:
{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}
jquery.extend()함수를 사용하여 JavaScript에서 객체 병합
jQuery는 가볍고 매우 빠른 JavaScript 라이브러리입니다. JavaScript 사용을 단순화합니다.
extend()는 둘 이상의 객체를 하나의 객체로 병합하는 데 사용되는 jQuery 메서드입니다. 객체를 반환합니다.
예를 들면
var obj1 = {
fruits: ['Banana', 'Mango'],
vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
store: 'Walmart',
};
jQuery.extend(obj1, obj2);
출력:
{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}
사용자 정의 함수를 사용하여 JavaScript에서 개체 병합
여기에서 병합 된 객체를 반환하는 자체 함수를 만듭니다. 두 개체의 속성을 사용하여 세 번째 개체로 병합됩니다.
아래 코드를 확인하십시오.
var obj1 = {
fruits: ['Banana', 'Mango'],
vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
store: 'Walmart',
};
function merge_options(obj1, obj2) {
var obj3 = {};
for (var key in obj1) {
obj3[key] = obj1[key];
}
for (var key in obj2) {
obj3[key] = obj2[key];
}
return obj3;
};
merge_options(obj1, obj2);
출력:
{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}