Giải cấu trúc JavaScript

Cú pháp giải phóng gán

Cú pháp giải phóng gán sẽ giải nén thuộc tính đối tượng vào biến:

let {firstName, lastName} = person;

Nó còn có thể giải nén mảng và bất kỳ đối tượng có thể lặp lại nào khác:

let [firstName, lastName] = person;

Giải phóng đối tượng

Ví dụ

// Tạo một đối tượng
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Cấu trúc
let {firstName, lastName} = person;

Thử ngay

Thứ tự thuộc tính không quan trọng:

Ví dụ

// Tạo một đối tượng
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Cấu trúc
let {lastName, firstName} = person;

Thử ngay

Giá trị mặc định đối tượng

Đối với các thuộc tính có thể bị thiếu, chúng ta có thể đặt giá trị mặc định:

Ví dụ

// Tạo một đối tượng
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Cấu trúc
let {firstName, lastName, country = "US"} = person;

Thử ngay

Tên thuộc tính đối tượng

Ví dụ

// Tạo một đối tượng
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Cấu trúc
let {lastName: name} = person;

Thử ngay

Giải phóng chuỗi

Một用途 của giải phóng là giải nén các ký tự chuỗi.

Ví dụ

// Tạo một chuỗi
let name = "W3Schools";
// Cấu trúc
let [a1, a2, a3, a4, a5] = name;

Thử ngay

Giải phóng mảng

Chúng ta có thể lấy biến mảng vào biến của riêng mình:

Ví dụ

// Tạo một mảng
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Cấu trúc
let [fruit1, fruit2] = fruits;

Thử ngay

Bỏ qua giá trị mảng

Chúng ta có thể sử dụng hai hoặc nhiều dấu phẩy để bỏ qua giá trị mảng:

Ví dụ

// Tạo một mảng
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Cấu trúc
let [fruit1,,,fruit2] = fruits;

Thử ngay

Vị trí chỉ số của mảng

Chúng ta có thể lấy giá trị từ vị trí chỉ số cụ thể của mảng:

Ví dụ

// Tạo một mảng
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Cấu trúc
let {[0]: fruit1, [1]: fruit2} = fruits;

Thử ngay

Thuộc tính dư

Bạn có thể sử dụng thuộc tính dư ở cuối cấu trúc giải phóng.

Cú pháp này sẽ lưu trữ tất cả các giá trị còn lại vào một mảng mới: }}

Ví dụ

// Tạo một mảng
const numbers = [10, 20, 30, 40, 50, 60, 70];
// Cấu trúc
const [a, b, ...rest] = numbers;

Thử ngay

Cấu trúc Map

Ví dụ

// Tạo một Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  
]
// Cấu trúc
let text = "";
for (const [key, value] of fruits) {
  text += key + " is " + value;
}

Thử ngay

Đổi biến JavaScript

Sử dụng cấu trúc gán để đổi giá trị của hai biến:

Ví dụ

let firstName = "Bill";
let lastName = "Gates";
// Cấu trúc
[firstName, lastName] = [lastName, firstName];

Thử ngay