Hợp nhất hai đối tượng trong mảng javascript

Việc hợp nhất hai đối tượng trong JavaScript là rất phổ biến, đó là điều mà bạn có thể thấy mình cần thực hiện hàng ngày ở hầu hết mọi vị trí JavaScript

Bài đăng này sẽ đề cập đến mọi thứ bạn cần biết để có thể hợp nhất hai đối tượng trong JavaScript cho cả đối tượng nông và sâu, đối tượng có cùng khóa, ngăn ngừa mất dữ liệu do ghi đè, v.v.

Bắt đầu nào

Cách hợp nhất hai đối tượng trong JavaScript

Cách dễ nhất để hợp nhất hai đối tượng trong JavaScript là sử dụng cú pháp/toán tử trải ES6 [...]

Tất cả những gì bạn phải làm là chèn một đối tượng vào một đối tượng khác cùng với cú pháp trải rộng và bất kỳ đối tượng nào bạn sử dụng cú pháp trải rộng sẽ được hợp nhất vào đối tượng mẹ

Đây là một ví dụ về cách bạn có thể sử dụng cú pháp trải rộng để hợp nhất hai đối tượng trong JavaScript

const objOne = { a: "a" }
const objTwo = { ...objOne, b: "b" }
console.log[objTwo] // { a: "a", b: "b" }

Như bạn có thể thấy trong ví dụ trên, chúng tôi đã kéo các thuộc tính từ đối tượng thứ nhất sang đối tượng thứ hai bằng cách hợp nhất hai đối tượng bằng cách sử dụng cú pháp trải rộng

Điều đáng chú ý là điều này sẽ chỉ hợp nhất ở mức nông và nếu cả hai đối tượng chia sẻ một thuộc tính thì thứ hai theo thứ tự sẽ ghi đè lên thứ nhất

Điều đó có nghĩa là nó sẽ vẫn chuyển tất cả các thuộc tính, nhưng nếu bạn có một đối tượng lồng nhau thì đối tượng đó sẽ vẫn được lồng vào nhau và các thuộc tính sẽ không được hợp nhất vào đối tượng cha

Đây là một ví dụ về điều này sẽ xem xét

const objOne = { a: "a", x: { y: "y" } }
const objTwo = { ...objOne, b: "b" }
console.log[objTwo] // { a: "a", b: "b", x: { y: "y" } }

Như bạn có thể thấy đối tượng lồng nhau vẫn được lồng vào nhau, vậy làm thế nào chúng ta có thể hợp nhất nó?

Cách hợp nhất sâu hai đối tượng trong JavaScript

Để hợp nhất sâu hai đối tượng trong JavaScript khó thực hiện hơn một chút so với hợp nhất nông, đó là lý do tại sao điều quan trọng là phải chuẩn hóa và cố gắng giữ cho dữ liệu của bạn càng phẳng càng tốt để tránh phải hợp nhất sâu

Như đã nói, đôi khi bạn không thể tránh khỏi việc phải hợp nhất sâu hai đối tượng, vì vậy hãy xem cách bạn có thể

Cách đầu tiên thực sự khá đơn giản, trong hầu hết các trường hợp, bạn sẽ biết cấu trúc dữ liệu của mình và do đó, chúng tôi có thể hợp nhất sâu thủ công để tránh bất kỳ hàm đệ quy nào phải thực hiện việc đó cho chúng tôi

Để hợp nhất sâu theo cách thủ công, nó thực sự khá giống với hợp nhất nông, ngoại trừ chúng ta cần đảm bảo rằng chúng ta hợp nhất bất kỳ đối tượng lồng nhau nào bằng cách sử dụng cú pháp trải rộng

Dưới đây là một ví dụ về cách hợp nhất sâu thủ công có thể trông như thế nào

const objOne = { a: "a", x: { y: "y" } }
const objTwo = { ...objOne, b: "b", ...objOne.x }
delete objTwo.x
console.log[objTwo] // { a: "a", b: "b", y: "y" }

Nếu bạn muốn tránh xóa đối tượng lồng nhau sau khi nó đã được hợp nhất thì thay vào đó, bạn có thể chọn dữ liệu bạn muốn một cách có chọn lọc như vậy

const objOne = { a: "a", x: { y: "y" } }
const objTwo = { a: objOne.a, b: "b", ...objOne.x }
console.log[objTwo] // { a: "a", b: "b", y: "y" }

Nếu bạn không biết dữ liệu trong đối tượng hoặc bạn cần một cách tiếp cận chung hơn, cách tốt nhất của bạn là sử dụng phương thức trợ giúp như hợp nhất từ ​​lodash sẽ thực hiện hợp nhất sâu cho bạn

Tuy nhiên, nếu bạn không muốn nhập thư viện chỉ để hợp nhất sâu hoặc nếu bạn không muốn sử dụng lodash thì bạn sẽ cần tạo một hàm đệ quy để có thể hợp nhất sâu hai đối tượng

Dưới đây là một ví dụ về phương thức trợ giúp chung sử dụng đệ quy để hợp nhất sâu và làm phẳng hai đối tượng trong JavaScript

function deepMergeFlatten[obj1, obj2] {
  const keys = Object.keys[obj2]
  let nextObj = { ...obj1 }

  for [let i = 0; i