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 [
0]
Code language: CSS [css]{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
- Sử dụng phương pháp
1
Code language: CSS [css]{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
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]
{
firstName: 'John',
lastName: 'Doe',
age: 25,
ssn: '123-456-2356',
jobTitle: 'JavaScript Developer',
location: 'USA'
}
ES6 đã giới thiệu toán tử trải rộng [
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ấtCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Ví dụ sau sử dụng toán tử trải rộng [
0] để hợp nhất các đối tượngCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
5 vàCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
6 thành đối tượngCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
7________số 8Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
đầu ra
Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
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ụ
0Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
đầu ra
1Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Trong ví dụ này,
6 vàCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
9 có cùng thuộc tínhCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
00. Khi chúng tôi hợp nhất các đối tượng này, đối tượng kết quả [Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
01] có thuộc tínhCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
00 với giá trị từ đối tượng thứ hai [Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
9]Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
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'
}
Code language: CSS [css]
1
{
firstName: 'John',
lastName: 'Doe',
age: 25,
ssn: '123-456-2356',
jobTitle: 'JavaScript Developer',
location: 'USA'
}
Phương thức
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 đíchCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
0Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Tương tự với toán tử trải [
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ụ sauCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
2Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
đầu ra
3Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Hợp nhất nông
Cả toán tử trải rộng [
0] và phương thứcCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
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ụCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
6Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
đầu ra
7Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
Trong ví dụ này, đối tượng
5 có thuộc tínhCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
10 tham chiếu đến một đối tượng. Sau khi hợp nhất, đối tượngCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
5 vàCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
7 có thuộc tínhCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
10 tham chiếu đến cùng một đối tượngCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
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[]
3Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
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 [
0] và phương thứcCode language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }
1Code language: CSS [css]
{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }