Phương thức JavaScript:Object.assign ()

JavaScript có một lớp Đối tượng có tất cả các loại phương thức mà chúng ta có thể sử dụng để thao tác các đối tượng đó. Trong bài viết này, chúng ta sẽ xem xét phương thức Object.assign () và trình bày cách nó được sử dụng.

Một chút thông tin cơ bản

Xin nhắc lại một đối tượng là một kiểu dữ liệu trong JavaScript, tương tự như từ điển trong Python, có những gì chúng ta gọi là cặp khóa:giá trị. Giả sử chúng ta có một đối tượng, hãy gọi nó là Harry. Nó có thể có các cặp key:value trông như thế này:

let Harry = {
 	firstName: 'Harry',
 	lastName: 'Potter',
 	age: 11,
 	house: 'Gryffindor',
 	pet: {
   	  name: 'Hedwig',
        animal: 'owl'
 	}
};

Quy tắc cơ bản của chủ đề trong tình huống này là tên thuộc tính ở bên trái dấu hai chấm là khóa và thứ ở bên phải là giá trị. Hầu hết các khóa và giá trị đều khá đơn giản - thứ duy nhất có thể hơi phức tạp là thuộc tính cuối cùng:pet. Trong trường hợp này, thú cưng vẫn là chìa khóa. Tuy nhiên, giá trị là một đối tượng có thêm hai cặp khóa:giá trị. Đây là những gì chúng tôi gọi là một đối tượng lồng nhau.

Object.assign ( target,… sourceObjs) ;

Có một phương thức Đối tượng được gọi là gán () có thể được sử dụng để lấy một hoặc nhiều đối tượng nguồn và sao chép chúng vào một đối tượng đích. Hãy đi thẳng vào mã để xem nó có tác dụng gì:

let hpChar = {
 firstName: 'Harry',
 lastName: 'Potter',
 age: 11,
 house: 'Gryffindor',
 pet: {
   name: 'Hedwig',
   animal: 'owl'
 }
}
 
Object.assign({}, hpChar);
console.log(hpChar, '\n');
Object.assign(hpChar, {
 	firstName: 'Hermione',
 	lastName: 'Grainger',
 	pet: {
   		name: 'Crookshanks',
   		animal: 'cat'
 	}
}
 
);
 
console.log(hpChar)

Hãy cùng nhau tìm hiểu mã. Chúng ta bắt đầu với một đối tượng theo nghĩa đen có tên là hpChar. HPChar này có thuộc tính FirstName, lastName, tuổi, nhà và vật nuôi. Thuộc tính vật nuôi đó tự nó là một đối tượng và có một số khóa và giá trị của riêng nó.

Tiếp theo, chúng tôi có ví dụ đầu tiên về phương pháp của chúng tôi mà chúng tôi ở đây để nói về. Object.assign có hai hoặc nhiều tham số. Đầu tiên là luôn luôn đối tượng đích mà bạn muốn gán giá trị. Trong trường hợp này, nó là một đối tượng rỗng.

Tham số thứ hai là đối tượng của chúng tôi được xác định ở trên. Đây là tài liệu nguồn mà chúng ta sẽ lấy để gán cho đối tượng đích (tham số đầu tiên của chúng ta).

Dòng sau ghi kết quả vào bảng điều khiển:

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

{ firstName: 'Harry',
  lastName: 'Potter',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Hedwig', animal: 'owl' } }

Không có gì quá khác biệt, phải không? Đó là bởi vì chúng tôi đã gán hpChar cho một đối tượng trống - về cơ bản chúng tôi đã nhân bản đối tượng. Điều gì sẽ xảy ra nếu chúng ta làm lại điều đó, nhưng thay đổi một số giá trị? Thay vì đối tượng trống lần này, hãy thay thế đối tượng đó bằng đối tượng hpChar - đây sẽ là mục tiêu của chúng ta lần này. Hãy thay đổi một số giá trị trên tham số thứ hai. Hãy thoải mái chơi với các giá trị miễn là bạn giữ nguyên các phím.

Đây là các giá trị tôi sẽ thay thế. Nếu giá trị trong đối tượng đích không cần thay đổi, bạn không cần phải gọi rõ ràng giá trị đó trong đối tượng nguồn.

Object.assign(hpChar, {
 	firstName: 'Hermione',
 	lastName: 'Grainger',
 	pet: {
   		name: 'Crookshanks',
   		animal: 'cat'
 	}
}
 
);

Lần thứ hai chúng tôi ghi kết quả vào bảng điều khiển, nó trả về đối tượng đích, ghi đè các thuộc tính bằng các giá trị mới. Bây giờ bảng điều khiển của chúng tôi trông như thế này:

{ firstName: 'Hermione',
  lastName: 'Grainger',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Crookshanks', animal: 'cat' } }

Đây là những gì hợp nhất hai đối tượng có cùng thuộc tính trông như thế nào. Bây giờ điều gì sẽ xảy ra nếu chúng ta hợp nhất ba đối tượng có các thuộc tính khác nhau? Bạn mong đợi điều gì sẽ xảy ra?

var obj1 = {
 foo: 1
}
 
var obj2 = {
 bar: 2
}
 
var obj3 = {
 baz: 3
}
 
Object.assign(obj1, obj2, obj3)
 
console.log(obj1);

Obj1 là đối tượng mục tiêu của chúng tôi. Obj2 và obj3 là các đối tượng nguồn của chúng tôi. Những thứ đó sẽ được hợp nhất vào đối tượng mục tiêu của chúng tôi. Bởi vì không có thuộc tính nào trùng lặp, tất cả các thuộc tính sẽ được hợp nhất thành obj1 với các giá trị tương ứng của chúng.

{ foo: 1, bar: 2, baz: 3 }

Đây là bạn có nó! Một triển khai hoạt động của Object.assign (). Khi bạn hiểu các khái niệm ở đây, bạn đang tiến gần hơn một bước đến việc học khung JavaScript!

Sẵn sàng để biết thêm?

Hãy xem các hướng dẫn này để tiếp tục nghiên cứu…

JavaScript Object.keys ()

Hướng dẫn từng bước về JavaScript Let

JavaScript typeof

Chuỗi JavaScript chứa:Hướng dẫn từng bước

Các biến JavaScript