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

Tóm lược. trong hướng dẫn này, bạn sẽ học cách hợp nhất hai hoặc nhiều đối tượng JavaScript và tạo một đối tượng mới kết hợp các thuộc tính của tất cả các đối tượng

Để hợp nhất các đối tượng thành một đối tượng mới có tất cả các thuộc tính của các đối tượng đã hợp nhất, bạn có hai tùy chọn

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

  {
      firstName: 'John',
      lastName: 'Doe',
      age: 25,
      ssn: '123-456-2356',
      jobTitle: 'JavaScript Developer',
      location: 'USA'
  }
  Code language: CSS (css)

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

  {
      firstName: 'John',
      lastName: 'Doe',
      age: 25,
      ssn: '123-456-2356',
      jobTitle: 'JavaScript Developer',
      location: 'USA'
  }
  Code language: CSS (css)

  1

Hợp nhất các đối tượng bằng toán tử trải rộng ({ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' } Code language: CSS (css)0)

ES6 đã giới thiệu toán tử trải rộng (

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

0) có thể được sử dụng để hợp nhất hai hoặc nhiều đối tượng và tạo một đối tượng mới có thuộc tính của các đối tượng đã hợp nhất

Ví dụ sau sử dụng toán tử trải rộng (

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

0) để hợp nhất các đối tượng

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

5 và

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

6 thành đối tượng

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

7

________số 8

đầu ra

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

Nếu các đối tượng có một thuộc tính có cùng tên, thì thuộc tính đối tượng ngoài cùng bên phải sẽ ghi đè lên thuộc tính trước đó. Ví dụ

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

0

đầu ra

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

1

Trong ví dụ này,

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

6 và

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

9 có cùng thuộc tính

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

00. Khi chúng tôi hợp nhất các đối tượng này, đối tượng kết quả (

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

01) có thuộc tính

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

00 với giá trị từ đối tượng thứ hai (

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

9)

Hợp nhất các đối tượng bằng phương thức { firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' } (adsbygoogle = window.adsbygoogle || []).push({}); Code language: CSS (css)1

Phương thức

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

1 cho phép bạn sao chép tất cả các thuộc tính riêng có thể đếm được từ một hoặc nhiều đối tượng nguồn sang đối tượng đích và trả về đối tượng đích

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

0

Tương tự với toán tử trải (

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

0), nếu các đối tượng nguồn có cùng tên thuộc tính thì đối tượng sau sẽ ghi đè lên đối tượng trước. Xem ví dụ sau

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

2

đầu ra

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

3

Hợp nhất nông

Cả toán tử trải rộng (

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

0) và phương thức

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

1 đều thực hiện hợp nhất nông. Điều đó có nghĩa là nếu một đối tượng có một thuộc tính tham chiếu đến một đối tượng khác, thì thuộc tính của đối tượng ban đầu và đối tượng đích kết quả sẽ tham chiếu đến cùng một đối tượng. Ví dụ

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

6

đầu ra

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

7

Trong ví dụ này, đối tượng

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

5 có thuộc tính

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

10 tham chiếu đến một đối tượng. Sau khi hợp nhất, đối tượng

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

5 và

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

7 có thuộc tính

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

10 tham chiếu đến cùng một đối tượng

Hợp nhất sâu

Để kết hợp đệ quy các thuộc tính khóa chuỗi vô số của riêng và kế thừa của các đối tượng nguồn với một đối tượng đích, bạn có thể sử dụng Lodash. phương thức _merge()

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

3

Trong hướng dẫn này, bạn đã học cách hợp nhất các đối tượng trong JavaScript bằng toán tử trải rộng (

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

0) và phương thức

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

1

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

Bạn có thể kết hợp hai mảng trong JavaScript không?

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 mảng?