Nhiệm vụ phá hủy là một tính năng thú vị đi kèm với ES6. Phá hủy cấu trúc là một biểu thức JavaScript cho phép giải nén các giá trị từ mảng hoặc thuộc tính từ các đối tượng thành các biến riêng biệt. Tức là chúng ta có thể trích xuất dữ liệu từ mảng và đối tượng và gán chúng cho các biến.
Tại sao điều này là cần thiết?
Hãy tưởng tượng chúng ta muốn trích xuất dữ liệu từ một mảng. Trước đây, điều này sẽ được thực hiện như thế nào?
let introduction = ["Hello", "I" , "am", "Sarah"];
let greeting = introduction[0];
let name = introduction[3];
console.log(greeting);//"Hello"
console.log(name);//"Sarah"
Ta có thể thấy khi muốn lấy dữ liệu từ một mảng thì phải làm đi làm lại nhiều lần.
Phép gán hủy cấu trúc ES6 giúp trích xuất dữ liệu này dễ dàng hơn. Làm thế nào là điều này như vậy? Đầu tiên, chúng ta sẽ thảo luận về phép gán phá hủy với mảng. Sau đó, chúng ta sẽ chuyển sang phần phá hủy đối tượng.
Bắt đầu nào.
Phá hủy mảng cơ bản
Nếu chúng ta muốn trích xuất dữ liệu từ mảng, nó khá đơn giản bằng cách sử dụng phép gán phá hủy.
Hãy tham khảo ví dụ đầu tiên của chúng tôi về mảng. Thay vì trải qua quá trình lặp đi lặp lại đó, chúng tôi sẽ làm điều này:
let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;
console.log(greeting);//"Hello"
console.log(pronoun);//"I"
Chúng tôi cũng có thể làm điều này với kết quả tương tự.
let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];
console.log(greeting);//"Hello"
console.log(pronoun);//"I"Khai báo biến trước khi gán
Các biến có thể được khai báo trước khi được gán như thế này:
let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];
console.log(greeting);//"Hello"
console.log(pronoun);//"I"
Lưu ý rằng các biến được đặt từ trái sang phải. Vì vậy, biến đầu tiên lấy phần tử đầu tiên trong mảng, biến thứ hai lấy phần tử thứ hai trong mảng, v.v.
Bỏ qua các mục trong một mảng
Điều gì sẽ xảy ra nếu chúng ta muốn lấy mục đầu tiên và mục cuối cùng trên mảng thay vì mục đầu tiên và mục thứ hai và chúng ta chỉ muốn gán hai biến? Điều này cũng có thể được thực hiện. Nhìn vào ví dụ dưới đây:
let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"];
console.log(greeting);//"Hello"
console.log(name);//"Sarah"
Điều gì vừa xảy ra?
Nhìn vào mảng ở phía bên trái của phép gán biến. Lưu ý rằng thay vì chỉ có một dấu phẩy, chúng ta có ba dấu phẩy. Dấu phân cách dấu phẩy được sử dụng để bỏ qua các giá trị trong một mảng. Vì vậy, nếu bạn muốn bỏ qua một mục trong một mảng, chỉ cần sử dụng dấu phẩy.
Hãy làm một cái khác. Hãy bỏ qua mục đầu tiên và mục thứ ba trong danh sách. Làm thế nào chúng ta sẽ làm điều này?
let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"];
console.log(pronoun);//"I"
console.log(name);//"Sarah"
Vì vậy, dấu phân cách dấu phẩy thực hiện phép thuật. Vì vậy, nếu chúng tôi muốn bỏ qua tất cả các mục, chúng tôi chỉ cần làm điều này:
let [,,,,] = ["Hello", "I" , "am", "Sarah"];
Chỉ định phần còn lại của một mảng
Điều gì sẽ xảy ra nếu chúng ta muốn gán một số mảng cho các biến và phần còn lại của các mục trong mảng cho một biến cụ thể? Trong trường hợp đó, chúng tôi sẽ làm điều này:
let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"];
console.log(greeting);//"Hello"
console.log(intro);//["I", "am", "Sarah"]
Sử dụng mẫu này, bạn có thể giải nén và gán phần còn lại của mảng cho một biến.
Phân hủy cấu trúc với các chức năng
Chúng ta cũng có thể trích xuất dữ liệu từ một mảng được trả về từ một hàm. Giả sử chúng ta có một hàm trả về một mảng như ví dụ bên dưới:
function getArray() {
return ["Hello", "I" , "am", "Sarah"];
}
let [greeting,pronoun] = getArray();
console.log(greeting);//"Hello"
console.log(pronoun);//"I"
Chúng tôi nhận được kết quả tương tự.
Sử dụng giá trị mặc định
Các giá trị mặc định có thể được gán cho các biến chỉ trong trường hợp giá trị được trích xuất từ mảng là undefined:
let [greeting = "hi",name = "Sarah"] = ["hello"];
console.log(greeting);//"Hello"
console.log(name);//"Sarah"
Cho nên name rơi trở lại “Sarah” vì nó không được xác định trong mảng.
Trao đổi các giá trị bằng cách sử dụng Bài tập hủy cấu trúc
Một điều nữa. Chúng ta có thể sử dụng phép gán hủy để hoán đổi giá trị của các biến:
let a = 3;
let b = 6;
[a,b] = [b,a];
console.log(a);//6
console.log(b);//3
Tiếp theo, hãy chuyển sang phần Phá hủy đối tượng.
Phá hủy đối tượng
Đầu tiên, hãy xem tại sao cần phải phá hủy đối tượng.
Giả sử chúng ta muốn trích xuất dữ liệu từ một đối tượng và gán cho các biến mới. Trước ES6, điều này sẽ được thực hiện như thế nào?
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let name = person.name;
let country = person.country;
let job = person.job;
console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"
Xem nó tẻ nhạt như thế nào để trích xuất tất cả dữ liệu. Chúng tôi phải lặp đi lặp lại điều tương tự. Phá hủy ES6 thực sự tiết kiệm trong ngày. Hãy nhảy ngay vào nó.
Phá hủy đối tượng cơ bản
Hãy lặp lại ví dụ trên với ES6. Thay vì gán từng giá trị một, chúng ta có thể sử dụng đối tượng bên trái để trích xuất dữ liệu:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name, country, job} = person;
console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"
Bạn sẽ nhận được kết quả tương tự. Cũng hợp lệ khi gán các biến cho một đối tượng chưa được khai báo:
let {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"};
console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"
Các biến được khai báo trước khi được gán
Các biến trong các đối tượng có thể được khai báo trước khi được gán với hàm hủy. Hãy thử điều đó:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let name, country, job;
{name, country, job} = person;
console.log(name);// Error : "Unexpected token ="
Đợi đã, chuyện gì vừa xảy ra vậy?! Ồ, chúng tôi quên thêm () trước dấu ngoặc nhọn.
Các ( ) xung quanh câu lệnh gán là cú pháp bắt buộc khi sử dụng phép gán phá hủy theo nghĩa đen của đối tượng mà không cần khai báo. Điều này là do {} ở phía bên trái được coi là một khối và không phải là một đối tượng theo nghĩa đen. Vì vậy, đây là cách để làm điều này đúng cách:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let name, country, job;
({name, country, job} = person);
console.log(name);//"Sarah"
console.log(job);//"Developer"
Cũng cần lưu ý rằng khi sử dụng cú pháp này, () nên đứng trước dấu chấm phẩy. Nếu không, nó có thể được sử dụng để thực thi một chức năng từ dòng trước.
Lưu ý rằng các biến trong đối tượng ở phía bên trái phải có cùng tên với khóa thuộc tính trong đối tượng person. Nếu các tên khác nhau, chúng tôi sẽ nhận được undefined:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name, friends, job} = person;
console.log(name);//"Sarah"
console.log(friends);//undefined
Nhưng nếu chúng ta muốn sử dụng một tên biến mới, chúng ta có thể.
Sử dụng một tên biến mới
Nếu chúng ta muốn gán giá trị của một đối tượng cho một biến mới thay vì sử dụng tên của thuộc tính, chúng ta có thể làm như sau:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name: foo, job: bar} = person;
console.log(foo);//"Sarah"
console.log(bar);//"Developer"
Vì vậy, các giá trị được trích xuất được chuyển đến các biến mới foo và bar.
Sử dụng giá trị mặc định
Các giá trị mặc định cũng có thể được sử dụng trong việc phá hủy đối tượng, chỉ trong trường hợp một biến là undefined trong một đối tượng mà nó muốn trích xuất dữ liệu từ:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name = "myName", friend = "Annie"} = person;
console.log(name);//"Sarah"
console.log(friend);//"Annie"
Vì vậy, nếu giá trị không được xác định, biến sẽ lưu trữ giá trị được trích xuất từ đối tượng như trong trường hợp name. Mặt khác, nó đã sử dụng giá trị mặc định như nó đã làm cho friend.
Chúng ta cũng có thể đặt giá trị mặc định khi gán giá trị cho một biến mới:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name:foo = "myName", friend: bar = "Annie"} = person;
console.log(foo);//"Sarah"
console.log(bar);//"Annie"
Cho nên name được chiết xuất từ person và được gán cho một biến khác. friendmặt khác, là undefined Trong personvì vậy biến mới bar được gán giá trị mặc định.
Tên thuộc tính được tính toán
Tên thuộc tính được tính toán là một tính năng theo nghĩa đen khác của đối tượng cũng hoạt động để phá hủy. Bạn có thể chỉ định tên của một thuộc tính thông qua một biểu thức nếu bạn đặt nó trong dấu ngoặc vuông:
let prop = "name";
let {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"};
console.log(foo);//"Sarah"
Kết hợp mảng với đối tượng
Mảng cũng có thể được sử dụng với các đối tượng trong quá trình phá hủy đối tượng:
let person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]};
let {name:foo, friends: bar} = person;
console.log(foo);//"Sarah"
console.log(bar);//["Annie", "Becky"]
Làm tổ trong cấu trúc đối tượng
Các đối tượng cũng có thể được lồng vào nhau khi phá hủy:
let person = {
name: "Sarah",
place: {
country: "Nigeria",
city: "Lagos" },
friends : ["Annie", "Becky"]
};
let {name:foo,
place: {
country : bar,
city : x}
} = person;
console.log(foo);//"Sarah"
console.log(bar);//"Nigeria"
Nghỉ ngơi trong Object Destructuring
Cú pháp còn lại cũng có thể được sử dụng để chọn các khóa thuộc tính chưa được chọn bởi mẫu phá hủy. Các khóa đó và giá trị của chúng được sao chép vào một đối tượng mới:
let person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]};
let {name, friends, ...others} = person;
console.log(name);//"Sarah"
console.log(friends);//["Annie", "Becky"]
console.log(others);// {country: "Nigeria", job: "Developer"}
Ở đây, các thuộc tính còn lại có khóa không phải là một phần của tên biến được liệt kê đã được gán cho biến others. Cú pháp còn lại ở đây là ...others. others có thể được đổi tên thành bất kỳ biến nào bạn muốn.
Một điều cuối cùng – hãy xem cách sử dụng tính năng Hủy đối tượng trong hàm.
Cấu trúc đối tượng và chức năng
Object Destructuring có thể được sử dụng để gán tham số cho hàm:
function person({name: x, job: y} = {}) {
console.log(x);
}
person({name: "Michelle"});//"Michelle"
person();//undefined
person(friend);//Error : friend is not defined
chú ý {} ở phía bên tay phải của đối tượng tham số. Nó giúp chúng ta có thể gọi hàm mà không cần chuyển bất kỳ đối số nào. Đó là lý do tại sao chúng tôi có undefined. Nếu chúng tôi xóa nó, chúng tôi sẽ nhận được thông báo lỗi.
Chúng ta cũng có thể gán giá trị mặc định cho các tham số:
function person({name: x = "Sarah", job: y = "Developer"} = {}) {
console.log(x);
}
person({name});//"Sarah"
Chúng ta có thể làm rất nhiều thứ với Array và Object Destructuring như chúng ta đã thấy trong các ví dụ trên.
Cảm ơn bạn đã đọc. 🙂
