Cú pháp gán phá hủy 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
const [a, b] = array;
const [a, , b] = array;
const [a = aDefault, b] = array;
const [a, b, ...rest] = array;
const [a, , b, ...rest] = array;
const [a, b, ...{ pop, push }] = array;
const [a, b, ...[c, d]] = array;
const { a, b } = obj;
const { a: a1, b: b1 } = obj;
const { a: a1 = aDefault, b = bDefault } = obj;
const { a, b, ...rest } = obj;
const { a: a1, b: b1, ...rest } = obj;
const { [key]: a } = obj;
let a, b, a1, b1, c, d, rest, pop, push;
[a, b] = array;
[a, , b] = array;
[a = aDefault, b] = array;
[a, b, ...rest] = array;
[a, , b, ...rest] = array;
[a, b, ...{ pop, push }] = array;
[a, b, ...[c, d]] = array;
[{ a, b } = obj]; // brackets are required
[{ a: a1, b: b1 } = obj];
[{ a: a1 = aDefault, b = bDefault } = obj];
[{ a, b, ...rest } = obj];
[{ a: a1, b: b1, ...rest } = obj];
Các biểu thức đối tượng và mảng cung cấp một cách dễ dàng để tạo các gói dữ liệu đặc biệt
const x = [1, 2, 3, 4, 5];
Phép gán phá hủy sử dụng cú pháp tương tự, nhưng ở phía bên trái của phép gán để xác định giá trị nào cần giải nén từ biến nguồn
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Tương tự, bạn có thể hủy cấu trúc các đối tượng ở phía bên trái của bài tập
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
Khả năng này tương tự như các tính năng có trong các ngôn ngữ như Perl và Python
Đối với cả phá hủy đối tượng và mảng, có hai loại mẫu phá hủy. mẫu liên kết và mẫu gán, với các cú pháp hơi khác nhau
Trong các mẫu liên kết, mẫu bắt đầu bằng từ khóa khai báo [
const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
Tất cả các biến chia sẻ cùng một khai báo, vì vậy nếu bạn muốn một số biến có thể gán lại nhưng những biến khác ở dạng chỉ đọc, bạn có thể phải hủy cấu trúc hai lần — một lần với
const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
const x = [1, 2, 3, 4, 5];
Trong các mẫu gán, mẫu không bắt đầu bằng từ khóa. Mỗi thuộc tính bị hủy cấu trúc được gán cho một mục tiêu của phép gán — có thể được khai báo trước bằng
const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
const x = [1, 2, 3, 4, 5];
Ghi chú. Dấu ngoặc đơn
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
Nếu kiểu viết mã của bạn không bao gồm dấu chấm phẩy ở cuối, thì biểu thức
const x = [1, 2, 3, 4, 5];
Lưu ý rằng mẫu liên kết tương đương của mã ở trên không phải là cú pháp hợp lệ
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Mỗi thuộc tính bị hủy cấu trúc có thể có một giá trị mặc định. Giá trị mặc định được sử dụng khi thuộc tính không có hoặc có giá trị
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Giá trị mặc định có thể là bất kỳ biểu thức nào. Nó sẽ chỉ được đánh giá khi cần thiết
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Bạn có thể kết thúc một mẫu phá hủy bằng thuộc tính còn lại
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
Thuộc tính còn lại phải là thuộc tính cuối cùng trong mẫu và không được có dấu phẩy ở cuối
const x = [1, 2, 3, 4, 5];
Trong nhiều cú pháp mà ngôn ngữ liên kết một biến cho bạn, bạn cũng có thể sử dụng mẫu phá hủy. Bao gồm các
- Biến lặp của vòng lặp
30 vàconst x = [1, 2, 3, 4, 5];
31;const x = [1, 2, 3, 4, 5]; - Tham số chức năng;
- Biến ràng buộc
32const x = [1, 2, 3, 4, 5];
Để biết các tính năng dành riêng cho việc phá hủy mảng hoặc đối tượng, vui lòng tham khảo các ví dụ riêng lẻ bên dưới
gán biến cơ bản
const x = [1, 2, 3, 4, 5];
Phá hủy với nhiều yếu tố hơn nguồn
Trong một mảng phá hủy từ một mảng có độ dài N được chỉ định ở phía bên phải của phép gán, nếu số lượng biến được chỉ định ở phía bên trái của phép gán lớn hơn N, thì chỉ N biến đầu tiên được gán giá trị. Giá trị của các biến còn lại sẽ không được xác định
const x = [1, 2, 3, 4, 5];
Hoán đổi biến
Hai giá trị biến có thể được hoán đổi trong một biểu thức phá hủy
Không hủy phép gán, hoán đổi hai giá trị yêu cầu một biến tạm thời [hoặc, trong một số ngôn ngữ cấp thấp, thủ thuật hoán đổi XOR]
const x = [1, 2, 3, 4, 5];
Phân tích một mảng được trả về từ một hàm
Luôn luôn có thể trả về một mảng từ một hàm. Việc hủy cấu trúc có thể giúp làm việc với một giá trị trả về mảng ngắn gọn hơn
Trong ví dụ này,
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
Bỏ qua một số giá trị trả về
Bạn có thể bỏ qua các giá trị trả về mà bạn không quan tâm
const x = [1, 2, 3, 4, 5];
Bạn cũng có thể bỏ qua tất cả các giá trị trả về
const x = [1, 2, 3, 4, 5];
Sử dụng một mẫu liên kết làm thuộc tính còn lại
Thuộc tính còn lại của phép gán phá hủy mảng có thể là một mẫu liên kết mảng hoặc đối tượng khác. Điều này cho phép bạn giải nén đồng thời các thuộc tính và chỉ số của mảng
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
Các mẫu liên kết này thậm chí có thể được lồng vào nhau, miễn là mỗi thuộc tính còn lại là thuộc tính cuối cùng trong danh sách
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Mặt khác, việc hủy đối tượng chỉ có thể có một mã định danh là thuộc tính còn lại
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Giải nén các giá trị từ đối sánh cụm từ thông dụng
Khi phương thức
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Sử dụng phá hủy mảng trên bất kỳ lần lặp nào
Phá hủy mảng gọi giao thức lặp lại của phía bên tay phải. Do đó, bất kỳ mảng nào có thể lặp lại, không nhất thiết phải là mảng, đều có thể bị hủy cấu trúc
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Không thể lặp lại không thể bị hủy cấu trúc dưới dạng mảng
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Iterables chỉ được lặp lại cho đến khi tất cả các ràng buộc được chỉ định
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Ràng buộc còn lại được đánh giá một cách háo hức và tạo ra một mảng mới, thay vì sử dụng lần lặp cũ
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
nhiệm vụ cơ bản
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Gán tên biến mới
Một thuộc tính có thể được giải nén từ một đối tượng và được gán cho một biến có tên khác với thuộc tính của đối tượng
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Ví dụ, ở đây,
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
Gán tên biến mới và cung cấp giá trị mặc định
Một tài sản có thể là cả hai
- Giải nén từ một đối tượng và gán cho một biến có tên khác
- Đã gán giá trị mặc định trong trường hợp giá trị được giải nén là
07const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Giải nén các thuộc tính từ các đối tượng được truyền dưới dạng tham số chức năng
Các đối tượng được truyền vào các tham số hàm cũng có thể được giải nén thành các biến, sau đó có thể được truy cập trong phần thân hàm. Đối với việc gán đối tượng, cú pháp phá hủy cho phép biến mới có cùng tên hoặc khác tên với thuộc tính ban đầu và gán giá trị mặc định cho trường hợp khi đối tượng ban đầu không xác định thuộc tính
Hãy xem xét đối tượng này, chứa thông tin về người dùng
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
Ở đây chúng tôi trình bày cách giải nén một thuộc tính của đối tượng được truyền vào một biến có cùng tên. Giá trị tham số
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
Bạn có thể xác định tên của biến giải nén. Ở đây chúng tôi giải nén thuộc tính có tên là
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
Các đối tượng lồng nhau cũng có thể được giải nén. Ví dụ dưới đây cho thấy thuộc tính
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
Đặt giá trị mặc định của tham số chức năng
Giá trị mặc định có thể được chỉ định bằng cách sử dụng
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Dưới đây, chúng tôi hiển thị một hàm có kích thước mặc định là
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
Trong chữ ký hàm cho
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Bạn cũng có thể đã viết hàm mà không có mặc định đó. Tuy nhiên, nếu bạn bỏ qua giá trị mặc định đó, hàm sẽ tìm kiếm ít nhất một đối số được cung cấp khi được gọi, trong khi ở dạng hiện tại, bạn có thể gọi
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
Để biết thêm thông tin, xem
Đối tượng lồng nhau và phá hủy mảng
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
Đối với phép lặp và phá hủy
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
Tên thuộc tính đối tượng được tính toán và phá hủy
Tên thuộc tính được tính toán, như on , có thể được sử dụng với tính năng hủy
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
Mã định danh JavaScript không hợp lệ làm tên thuộc tính
Có thể sử dụng tính năng hủy cấu trúc với tên thuộc tính không phải là mã định danh JavaScript hợp lệ bằng cách cung cấp mã định danh thay thế hợp lệ
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
Phá hủy đối tượng gần như tương đương với truy cập thuộc tính. Điều này có nghĩa là nếu bạn cố gắng hủy một giá trị nguyên thủy, giá trị đó sẽ được gói vào đối tượng trình bao tương ứng và thuộc tính được truy cập trên đối tượng trình bao
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
Giống như truy cập các thuộc tính, phá hủy
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
Điều này xảy ra ngay cả khi mẫu trống
const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
Kết hợp mảng và phá hủy đối tượng
Phá hủy mảng và đối tượng có thể được kết hợp. Giả sử bạn muốn phần tử thứ ba trong mảng
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
Chuỗi nguyên mẫu được tra cứu khi đối tượng được giải cấu trúc
Khi giải cấu trúc một đối tượng, nếu một thuộc tính không được truy cập vào chính nó, nó sẽ tiếp tục tìm kiếm dọc theo chuỗi nguyên mẫu