Làm cách nào để kết hợp nhiều đối tượng thành một đối tượng trong JavaScript?

Có nhiều loại trái cây khác nhau với số lượng khác nhau trong mỗi giỏ (một giỏ thậm chí còn trống)

Làm cách nào chúng ta có thể hợp nhất tất cả các đối tượng (giỏ) này thành một và đếm tổng số tiền của mỗi loại trái cây?

Hãy tạo phương thức trợ giúp

const mergeFruits = data => {
  const result = {}; //(1)

  data.forEach(basket => { //(2)
    for (let [key, value] of Object.entries(basket)) { //(3)
      if (result[key]) { //(4)
        result[key] += value; //(5)
      } else { //(6)
        result[key] = value;
      }
    }
  });
  return result; //(7)
};

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

1. Đối tượng kết quả, trống
2. Lặp qua một mảng các đối tượng bằng cách sử dụng Array. nguyên mẫu. phương thức forEach()
3. Lặp lại các cặp khóa-giá trị của từng đối tượng (giỏ) bằng Object. phương thức entry()
4. Kiểm tra xem đối tượng kết quả có thuộc tính với tên của khóa không
5. Nếu có (đúng), hãy thêm vào giá trị trước đó của thuộc tính giá trị của khóa, e. g. nếu có một thuộc tính “quả táo” có giá trị “4” trong đối tượng kết quả, thì hãy thêm nhiều quả táo hơn từ giỏ tiếp theo
6. Nếu không (false), thì đó là thuộc tính mới (quả mới) cho đối tượng kết quả, vì vậy hãy tạo thuộc tính này và gán giá trị tương ứng cho nó
7. Trả lại đối tượng đã hợp nhất

Nếu chúng tôi chạy mã và in kết quả vào bảng điều khiển

const mergedObject = mergeFruits(fruits);

console.log(mergedObject);

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

chúng tôi sẽ nhận được đầu ra sau

{ apples: 12, pears: 21, oranges: 7, bananas: 12, mangos: 1 }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tất cả các đối tượng (giỏ) trong mảng được hợp nhất thành một với tổng giá trị (quả) của mỗi thuộc tính

Ban đầu được đăng trên blog của riêng tôi

Trong JavaScript, một đối tượng được định nghĩa là tập hợp các cặp khóa-giá trị. Một đối tượng cũng là một kiểu dữ liệu không nguyên thủy

Đôi khi, bạn sẽ cần kết hợp các đối tượng thành một đối tượng duy nhất chứa tất cả các thuộc tính riêng lẻ của các bộ phận cấu thành của nó. Hoạt động này được gọi là hợp nhất. Hai cách phổ biến nhất để làm điều này là

• Sử dụng toán tử trải rộng (

  { apples: 12, pears: 21, oranges: 7, bananas: 12, mangos: 1 }
  

  7)
• Sử dụng phương pháp

  {
      name: "John Doe", 
      age: 24, 
      title: "Full stack developer", 
      location: "Remote"
  }
  

  0

Trong hướng dẫn này, chúng ta sẽ xem cách hợp nhất động hai đối tượng trong JavaScript

Sau đó, chúng ta sẽ đề cập đến sự khác biệt giữa hợp nhất nông và hợp nhất sâu, bởi vì điều cần thiết là phải hiểu đầy đủ về hợp nhất đối tượng

Hợp nhất các đối tượng JavaScript bằng toán tử trải rộng

Chúng ta có thể hợp nhất các đối tượng khác nhau thành một bằng cách sử dụng toán tử trải rộng (

{ apples: 12, pears: 21, oranges: 7, bananas: 12, mangos: 1 }

Đây là một cách tiếp cận bất biến để hợp nhất hai đối tượng, tôi. e. , hai đối tượng bắt đầu được sử dụng để tạo đối tượng được hợp nhất sẽ không bị thay đổi theo bất kỳ cách nào do tác dụng phụ. Cuối cùng, bạn đã có một đối tượng mới, được xây dựng từ cả hai, trong khi chúng vẫn còn nguyên vẹn

Hãy tạo hai đối tượng và hợp nhất chúng

const person = {
    name: "John Doe",
    age: 24
}
const job = {
    title: "Full stack developer",
    location: "Remote"
}

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

console.log(employee);

Kết quả này trong

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

Ghi chú. Nếu có các thuộc tính chung giữa hai đối tượng này, chẳng hạn như cả hai đều có một

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

const person = {
    name: "John Doe",
    location: "Remote"
}
const job = {
    title: "Full stack developer",
    location: "Office"
}
const employee = {...person, ...job}

console.log(employee);

Kết quả này trong

const mergedObject = mergeFruits(fruits);

console.log(mergedObject);

Nếu có nhiều hơn hai đối tượng đang được hợp nhất, đối tượng ngoài cùng bên phải sẽ ghi đè đối tượng ở bên trái

Hợp nhất các đối tượng JavaScript bằng cách sử dụng đối tượng. giao phó()

Một cách phổ biến khác để hợp nhất hai hoặc nhiều đối tượng là sử dụng phương thức

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

const mergedObject = mergeFruits(fruits);

console.log(mergedObject);

Phương thức này sao chép tất cả các thuộc tính từ một hoặc nhiều đối tượng nguồn vào đối tượng đích. Cũng giống như toán tử trải rộng, trong khi ghi đè, giá trị ngoài cùng bên phải được sử dụng

const mergedObject = mergeFruits(fruits);

console.log(mergedObject);

Chạy đoạn mã trên sẽ dẫn đến đầu ra sau

const mergedObject = mergeFruits(fruits);

console.log(mergedObject);

Một lần nữa, hãy nhớ rằng đối tượng được tham chiếu bởi

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

Hợp nhất nông vs Hợp nhất sâu

Trong trường hợp hợp nhất nông, nếu một trong các thuộc tính trên đối tượng nguồn là một đối tượng khác, thì đối tượng đích chứa tham chiếu đến cùng một đối tượng tồn tại trong đối tượng nguồn. Một đối tượng mới không được tạo trong trường hợp này

Hãy xem hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, tiêu chuẩn được ngành chấp nhận và bao gồm bảng gian lận. Dừng các lệnh Git trên Google và thực sự tìm hiểu nó

Hãy tinh chỉnh đối tượng

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

{ apples: 12, pears: 21, oranges: 7, bananas: 12, mangos: 1 }

Kết quả này trong

{ apples: 12, pears: 21, oranges: 7, bananas: 12, mangos: 1 }

Chúng ta có thể thấy rằng tham chiếu đến đối tượng

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

{ apples: 12, pears: 21, oranges: 7, bananas: 12, mangos: 1 }

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

JavaScript không có hỗ trợ hợp nhất sâu. Tuy nhiên, có các mô-đun và thư viện của bên thứ ba hỗ trợ nó, như _ của Lodash. hợp nhất

Phần kết luận

Trong hướng dẫn này, chúng ta đã xem cách hợp nhất hai đối tượng trong JavaScript. Chúng ta đã khám phá toán tử trải rộng (

{ apples: 12, pears: 21, oranges: 7, bananas: 12, mangos: 1 }

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

Làm cách nào để chuyển đổi nhiều đối tượng thành một đối tượng trong JavaScript?

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

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

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