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 < keys.length; i += 1) {
    const key = keys[i]
    const value = obj2[key]
    if (typeof value === "object" && value !== null) {
      nextObj = { ...nextObj, ...deepMergeFlatten(nextObj, value) }
    } else {
      nextObj = { ...nextObj, [key]: value }
    }
  }

  return nextObj
}

deepMergeFlatten(
  { a: "a" },
  { b: "b", c: { c: "c", d: { d: "d", e: { e: "e" } } } }
) // { a: "a", b: "b", c: "c", d: "d", e: "e" }

Trong ví dụ trên, phương thức của trình trợ giúp sẽ lặp qua từng khóa trong một đối tượng trong khi kiểm tra xem giá trị của khóa có phải là một đối tượng hay không, nếu giá trị là một đối tượng thì nó sẽ gọi chính nó với đối tượng để bắt đầu lại quá trình với

Với hàm đệ quy này, sau khi tất cả các đối tượng đã được tìm thấy và hợp nhất với nhau, nó sẽ trả về một đối tượng duy nhất với tất cả các giá trị được hợp nhất với nhau

Cách hợp nhất hai đối tượng có cùng khóa trong JavaScript

Khi bạn hợp nhất hai đối tượng có cùng khóa trong JavaScript, bạn cần quyết định đối tượng nào sẽ được ưu tiên trong mảng đã hợp nhất. Đối tượng bạn muốn nhập bằng cùng một khóa phải là đối tượng cuối cùng trong quá trình hợp nhất hai đối tượng có cùng khóa

Dưới đây là một ví dụ về cách hợp nhất hai đối tượng có cùng khóa trong JavaScript

const objA = { a: 10 }
const objB = { a: 15 }
console.log({ ...objA, ...objB }) // { a: 15 }
console.log({ ...objB, ...objA }) // { a: 10 }

Như bạn có thể thấy từ ví dụ này, bạn chỉ cần đảm bảo rằng bạn hợp nhất hai đối tượng theo đúng thứ tự để giữ nguyên giá trị của khóa bạn cần

Bất kỳ thuộc tính nào đến sau cùng sẽ ghi đè lên bất kỳ thuộc tính nào có cùng khóa trước nó

Cách hợp nhất hai đối tượng mà không ghi đè trong JavaScript

Để hợp nhất hai đối tượng mà không ghi đè trong JavaScript hơi giống với hợp nhất sâu thủ công

Nếu bạn có một đối tượng lồng nhau nhưng bạn không muốn ghi đè lên thuộc tính, bạn chỉ cần trải hai thuộc tính thành một phiên bản mới của thuộc tính

Đây là một ví dụ về cách bạn có thể làm điều này

const obj1 = { a: { num: 123 }, x: "x" }
const obj2 = { a: { letters: "abc" }, z: "z" }
console.log({
  ...obj1,
  ...obj2,
  a: {
    ...obj1.a,
    ...obj2.a,
  },
}) // { a: { num: 123, letters: "abc" }, x: "x", z: "z" }

Như bạn có thể thấy từ ví dụ này, chúng tôi tạo một thuộc tính mới với quyền ưu tiên sau khi hợp nhất hai đối tượng ban đầu và sau đó chúng tôi sử dụng cú pháp trải rộng một lần nữa trong phiên bản mới của thuộc tính cho cả hai đối tượng có thuộc tính đó để trích xuất tất cả các khóa mà không cần

Tóm lược

Ở đó, chúng tôi có cách hợp nhất hai đối tượng trong JavaScript, nếu bạn muốn nhiều hơn như thế này, hãy nhớ xem một số bài đăng khác của tôi

Tôi hy vọng bài đăng này hữu ích, nhưng trước khi bạn tiếp tục, hãy đảm bảo rằng bạn đã thử bài kiểm tra tương tác thú vị của tôi để xem bạn là kỹ sư React mới vào nghề, trung cấp hay chuyên gia

Sẽ chỉ mất khoảng 1 - 3 phút, vì vậy bạn không có gì để mất, hãy kiểm tra khả năng của mình ngay bây giờ

làm bài kiểm tra

Bạn là kỹ sư phản ứng mới, trung cấp hay chuyên gia?

Tìm hiểu tại đây bằng cách làm bài kiểm tra nhanh, tương tác, vui nhộn của tôi, mất khoảng 1 - 3 phút. Bạn sẽ làm tốt đến mức nào?

Bài đăng này sẽ bao gồm mọi thứ bạn cần biết về React Fragment một cách rõ ràng và ngắn gọn và sẽ là nguồn tài nguyên cuối cùng cho bất kỳ truy vấn nào liên quan đến React Fragment

Will Mayger

Ngày 24 tháng 3 năm 2022

Bài báo

Bài đăng này sẽ đề cập đến cách đợi tất cả các lời hứa giải quyết trong JavaScript thay vì phải thực hiện từng lời hứa khi bạn có nhiều lời hứa cần giải quyết

Will Mayger

21 Tháng Ba, 2022

Bài báo

Trong hướng dẫn này, bạn sẽ khám phá mọi thứ bạn cần biết về React Keys để có thể sử dụng chúng đúng cách trong bất kỳ ứng dụng React nào cùng với thông tin chi tiết

Will Mayger

03 Tháng Ba, 2022

Bài báo

Trong bài đăng này, chúng tôi đề cập đến sự khác biệt giữa, React. Phân đoạn so với div, lợi ích của một phân đoạn và khi nào bạn nên sử dụng cái này hơn cái kia

Làm cách nào để hợp nhất hai đối tượng trong một mảng trong JavaScript?

Làm cách nào để hợp nhất hai mảng đối tượng trong JavaScript mà không trùng lặp?

Làm cách nào để hợp nhất hai đối tượng lồng nhau trong JavaScript?