Trong hướng dẫn này, bạn sẽ tìm hiểu về phép gán cấu trúc JavaScript với sự trợ giúp của các ví dụ.
Cấu trúc JavaScript
Phép gán cấu trúc được giới thiệu trong ES6 giúp dễ dàng gán giá trị mảng và thuộc tính đối tượng cho các biến riêng biệt. Ví dụ,
Trước ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Từ ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Lưu ý : Thứ tự của tên không quan trọng trong cấu trúc đối tượng.
Ví dụ, bạn có thể viết chương trình trên dưới dạng:
let ( age, gender, name ) = person; console.log(name); // Sara
Lưu ý : Khi cấu trúc các đối tượng, bạn nên sử dụng cùng một tên cho biến làm khóa đối tượng tương ứng.
Ví dụ,
let (name1, age, gender) = person; console.log(name1); // undefined
Nếu bạn muốn gán các tên biến khác nhau cho khóa đối tượng, bạn có thể sử dụng:
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // using different variable names let ( name: name1, age: age1, gender:gender1 ) = person; console.log(name1); // Sara console.log(age1); // 25 console.log(gender1); // female
Cấu trúc mảng
Bạn cũng có thể thực hiện tái cấu trúc mảng theo cách tương tự. Ví dụ,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, y, z) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Gán giá trị mặc định
Bạn có thể gán các giá trị mặc định cho các biến trong khi sử dụng hàm hủy. Ví dụ,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
Trong chương trình trên, arrValue chỉ có một phần tử. Vì thế,
- biến x sẽ là 10
- biến y nhận giá trị mặc định 7
Trong cấu trúc đối tượng, bạn có thể chuyển các giá trị mặc định theo cách tương tự. Ví dụ,
const person = ( name: 'Jack', ) // assign default value 26 to age if undefined const ( name, age = 26) = person; console.log(name); // Jack console.log(age); // 26
Hoán đổi các biến
Trong ví dụ này, hai biến được hoán đổi bằng cách sử dụng cú pháp gán hủy cấu trúc.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Bỏ qua các mục
Bạn có thể bỏ qua các mục không mong muốn trong một mảng mà không cần gán chúng cho các biến cục bộ. Ví dụ,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
Trong chương trình trên, phần tử thứ hai bị bỏ qua bằng cách sử dụng dấu phân cách bằng dấu phẩy ,.
Gán các phần tử còn lại cho một biến đơn
Bạn có thể gán các phần tử còn lại của mảng cho một biến bằng cách sử dụng cú pháp lây lan … . Ví dụ,
const arrValue = ('one', 'two', 'three', 'four'); // destructuring assignment in arrays // assigning remaining elements to y const (x,… y) = arrValue; console.log(x); // one console.log(y); // ("two", "three", "four")
Ở đây, oneđược gán cho biến x. Và phần còn lại của các phần tử mảng được gán cho biến y.
Bạn cũng có thể gán phần còn lại của các thuộc tính đối tượng cho một biến duy nhất. Ví dụ,
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // assigning remaining properties to rest let ( name,… rest ) = person; console.log(name); // Sara console.log(rest); // (age: 25, gender: "female")
Lưu ý : Biến có cú pháp spread không được có dấu phẩy ở cuối ,. Bạn nên sử dụng phần tử còn lại này (biến có cú pháp lây lan) làm biến cuối cùng.
Ví dụ,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Chuyển nhượng cơ cấu hủy lồng nhau
Bạn có thể thực hiện cấu trúc hủy lồng nhau cho các phần tử mảng. Ví dụ,
// nested array elements const arrValue = ('one', ('two', 'three')); // nested destructuring assignment in arrays const (x, (y, z)) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Ở đây, biến y và z được gán các phần tử lồng nhau twovà three.
Để thực hiện phép gán cấu trúc hủy lồng nhau, bạn phải đặt các biến trong cấu trúc mảng (bằng cách đặt bên trong ()).
Bạn cũng có thể thực hiện tái cấu trúc lồng nhau cho các thuộc tính đối tượng. Ví dụ,
const person = ( name: 'Jack', age: 26, hobbies: ( read: true, playGame: true ) ) // nested destructuring const (name, hobbies: (read, playGame)) = person; console.log(name); // Jack console.log(read); // true console.log(playGame); // true
Để thực hiện phép gán cấu trúc hủy lồng nhau cho các đối tượng, bạn phải bao bọc các biến trong cấu trúc đối tượng (bằng cách đặt bên trong ()).
Lưu ý : Tính năng gán cấu trúc đã được giới thiệu trong ES6 . Một số trình duyệt có thể không hỗ trợ việc sử dụng lệnh hủy cấu trúc. Truy cập hỗ trợ Hủy cấu trúc Javascript để tìm hiểu thêm.
