JavaScript에서 두 개체의 속성을 동적으로 병합하는 방법에 대한 자세한 설명

이 글에서는 JavaScript에서 두 개체의 속성을 동적으로 병합하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

확산 연산자(...)를 사용하여 서로 다른 개체를 하나의 개체로 병합할 수 있습니다. 이는 두 개 이상의 개체를 병합하는 가장 일반적인 작업이기도 합니다. ...)将不同的对象合并为一个对象，这也是合并两个或多个对象最常见的操作。

这是一种合并两个对象的不可变方法，也就是说，用于合并的初始两个对象不会因为副作用而以任何方式改变。最后，我们得到了一个新对象，它由这两个对象构造而成，而它们仍然保持完整。

我们创建两个对象并合并它们：

const person = {
    name: "前端小智",
    age: 24
}
const job = {
    title: "前端开发",
    location: "厦门"
}

const employee = {...person, ...job};

console.log(employee);

运行结果：

{ 
  name: '前端小智', 
  age: 24, 
  title: '前端开发', 
  location: '厦门' 
}

注意：如果这两个对象之间有共同的属性，例如它们都有location，则第二个对象（job）的属性将覆盖第一个对象（person）的属性：

const person = {
  name: "前端小智",
  location: "北京"
}
const job = {
  title: "前端开发",
  location: "厦门"
}

const employee = {...person, ...job};

console.log(employee);

运行结果：

{ 
  name: '前端小智', 
  location: '厦门', 
  title: '前端开发' 
}

如果要合并两个以上的对象，最右边的对象将覆盖左边的对象。

使用 Object.assign() 合并JavaScript对象

并两个或多个对象的另一种常用方法是使用内置的Object.assign()方法：

Object.assign(target, source1, source2, ...);

此方法将一个或多个源对象中的所有属性复制到目标对象中。就像扩展操作符一样，在覆盖时，将使用最右边的值:

const person = {
  name: "前端小智",
  location: "北京",
};
const job = {
  title: "前端开发",
  location: "厦门",
};

const employee = Object.assign(person, job);
console.log(employee);

运行结果：

{ 
  name: '前端小智', 
  age: 24,
  location: '厦门', 
  title: '前端开发' 
}

同样，请记住employee引用的对象是一个全新的对象，不会链接到person或job引用的对象。

浅合并和深合并

在浅合并的情况下，如果源对象上的属性之一是另一个对象，则目标对象将包含对源对象中存在的同一对象的引用。 在这种情况下，不会创建新对象。

我们调整前面的person对象，并将location作为对象本身

const person = {
    name: "John Doe",
    location: {
        city: "London", 
        country: "England"
    }
}
const job = {
    title: "Full stack developer"
}

const employee = {...person, ...job};

console.log(employee.location === person.location);

运行结果：

true

我们可以看到person和employee对象中对location对象的引用是相同的。事实上，spread操作符(...)和Object.assign() 都是浅合并。

JavaScript没有现成的深合并支持。然而，第三方模块和库确实支持它，比如Lodash的.merge。

总结

本文中，我们演示在如何在 JS 中合并两个对象。介绍了spread操作符(...)和Object.assign()

이것은 두 개체를 병합하는 불변의 방법입니다. 즉, 병합에 사용되는 처음 두 개체는 부작용으로 인해 어떤 식으로든 변경되지 않습니다. 결국 우리는 이 두 개체가 그대로 유지된 상태에서 새로운 개체를 생성하게 됩니다.

두 개체를 생성하고 병합합니다.

rrreee

실행 결과:
rrreee

참고: 예를 들어 이 두 개체 사이에 공통 속성이 있는 경우 두 개체 모두 위치를 가지며 두 번째 개체는 첫 번째 개체(job)의 속성이 첫 번째 개체(person)의 속성을 덮어씁니다.

rrreee

실행 결과:

rrreee

다음보다 더 병합하려는 경우 두 개체의 경우 가장 오른쪽 개체가 왼쪽 개체를 덮어씁니다.

Object.sign()을 사용하여 JavaScript 개체 병합

두 개 이상의 개체를 병합하는 또 다른 일반적인 방법은 내장된 Object.sign() 방법: <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">rrreee</a>이 방법은 하나 이상의 원본 개체의 모든 속성을 대상 개체에 복사합니다. 스프레드 연산자와 마찬가지로 재정의할 때 가장 오른쪽 값이 사용됩니다:

rrreee🎜 실행 결과: 🎜rrreee🎜 마찬가지로 employee가 참조하는 객체는 완전히 새로운 객체라는 점을 기억하세요. 사람 또는 작업이 참조하는 개체에 연결됩니다. 🎜

얕은 병합 및 심층 병합

🎜얕은 병합의 경우 원본 개체의 속성 중 하나가 다른 개체인 경우 대상 개체에는 원본 개체에 있는 동일한 개체에 대한 참조가 포함됩니다. 이 경우 새 개체가 생성되지 않습니다. 🎜🎜이전 사람 개체를 조정하고 위치를 개체 자체로 사용합니다🎜rrreee🎜실행 결과: 🎜rrreee🎜사람을 볼 수 있습니다 이는 employee 개체의 location 개체에 대한 참조와 동일합니다. 실제로 확산 연산자(...)와 Object.sign()은 모두 얕은 병합입니다. 🎜🎜JavaScript에는 기본적으로 깊은 병합을 지원하지 않습니다. 그러나 Lodash의 .merge와 같은 타사 모듈과 라이브러리는 이를 지원합니다. 🎜

요약

🎜이 기사에서는 JS에서 두 개체를 병합하는 방법을 보여줍니다. 스프레드 연산자(...)와 Object.sign() 메서드를 도입했습니다. 둘 다 두 개 이상의 개체를 새 개체로 얕은 병합을 수행합니다. 구성 요소에 영향을 미칩니다. 🎜🎜🎜원본 주소: https://stackak.com/merge-properties-of-two-objects-dynamically-in-javascript/🎜🎜저자: Abhilash Kakumanu🎜🎜🎜번역 주소: https://segmentfault.com/ a/1190000039833349🎜🎜번역자: Front-end Xiaozhi🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 JavaScript에서 두 개체의 속성을 동적으로 병합하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!