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ị khỏi các mảng hoặc thuộc tính từ các đối tượng, thành các biến riêng biệt.destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. Các biểu thức theo nghĩa đen của đố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 ad hoc. Bài tập phá hủy sử dụng cú pháp tương tự, nhưng ở phía bên trái của nhiệm vụ để xác định những giá trị nào để giải nén khỏi biến có nguồn gốc. Tương tự, bạn có thể phá hủy các đối tượng ở phía bên trái của nhiệm vụ. 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 [Thử nó
Cú pháp
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];
Sự mô tả
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: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
Ràng buộc và chuyển nhượng
0, const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
1 hoặc const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
2]. Sau đó, mỗi thuộc tính riêng lẻ phải được liên kết với một biến hoặc bị phá hủy hơn nữa.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 tuyên bố, vì vậy nếu bạn muốn một số biến được chỉ định lại nhưng các biến khác chỉ được đọc, bạn có thể phải phá hủy 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`
1, 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`
2.const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable
Trong các mẫu gán, mẫu không bắt đầu với một từ khóa. Mỗi thuộc tính bị phá hủy được gán cho mục tiêu 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`
0 hoặc const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
1 hoặc là thuộc tính của một đối tượng khác-nói chung, bất cứ điều gì có thể xuất hiện ở phía bên trái của biểu thức gán.const numbers = [];
const obj = { a: 1, b: 2 };
[{ a: numbers[0], b: numbers[1] } = obj];
// The properties `a` and `b` are assigned to properties of `numbers`
LƯU Ý: Các dấu ngoặc đơn
7 xung quanh câu lệnh gán được yêu cầu khi sử dụng nhiệm vụ phá hủy theo nghĩa đen của đối tượng mà không cần khai báo. The parentheses 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`
7 around the assignment statement are required when using object literal destructuring assignment without a declaration.const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
8 không phải là cú pháp độc lập hợp lệ, vì const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
9 ở 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. Tuy nhiên, const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable
0 là hợp lệ, cũng như const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable
1.Nếu phong cách mã hóa của bạn không bao gồm dấu chấm phẩy kéo dài, biểu thức
const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`
7 cần được đi trước bởi dấu chấm phẩy hoặc nó có thể được sử dụng để thực thi một hàm trên dòng trước.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 numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
// This is equivalent to:
// const numbers[0] = obj.a;
// const numbers[1] = obj.b;
// Which definitely is not valid.
Giá trị mặc định
Mỗi thuộc tính bị phá hủy 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 obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable
3. Nó không được sử dụng nếu thuộc tính có giá trị const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable
4.const [a = 1] = []; // a is 1
const { b = 2 } = { b: undefined }; // b is 2
const { c = 2 } = { c: null }; // c is null
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 { b = console.log["hey"] } = { b: 2 };
// Does not log anything, because `b` is defined and there's no need
// to evaluate the default value.
Tài sản nghỉ ngơi
Bạn có thể kết thúc một mô hình phá hủy với thuộc tính REST
const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable
5. Mẫu này sẽ lưu trữ tất cả các thuộc tính còn lại của đối tượng hoặc mảng vào một đối tượng hoặc mảng mới.const x = [1, 2, 3, 4, 5];
0Thuộc tính còn lại phải là cuối cùng trong mẫu và không phải có dấu phẩy kéo dài.
const x = [1, 2, 3, 4, 5];
1Các mô hình phá hủy với các cú pháp khác
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ột mẫu phá hủy. Bao gồm các:
- Biến vòng lặp của vòng lặp
6 vàconst obj = { a: 1, b: { c: 2 } }; const { a } = obj; // a is constant let { b: { c: d } } = obj; // d is re-assignable
7;const obj = { a: 1, b: { c: 2 } }; const { a } = obj; // a is constant let { b: { c: d } } = obj; // d is re-assignable
- Tham số chức năng;
- Biến liên kết
8.const obj = { a: 1, b: { c: 2 } }; const { a } = obj; // a is constant let { b: { c: d } } = obj; // d is re-assignable
Đối với các tính năng cụ thể để 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.
Ví dụ
Mảng phá hủy
Bài tập biến cơ bản
const x = [1, 2, 3, 4, 5];
2Phá 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 độ dài n được chỉ định ở phía bên phải của gán, nếu số lượng biến được chỉ định ở phía bên trái của gán lớn hơn n, chỉ có các biến N đầu tiên được gán giá trị. Các 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];
3Trao đổ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 có sự phân công phá hủy, trao đổ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 trao đổi XOR].
const x = [1, 2, 3, 4, 5];
4Phân tích một mảng được trả về từ một hàm
Luôn luôn có thể trả lại một mảng từ một hàm. Phá hủy có thể làm cho 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 obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable
9 trả về các giá trị const numbers = [];
const obj = { a: 1, b: 2 };
[{ a: numbers[0], b: numbers[1] } = obj];
// The properties `a` and `b` are assigned to properties of `numbers`
0 làm đầu ra của nó, có thể được phân tích cú pháp trong một dòng duy nhất với sự phá hủy.const x = [1, 2, 3, 4, 5];
5Bỏ qua một số giá trị được 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];
6Bạn cũng có thể bỏ qua tất cả các giá trị được trả về:
Sử dụng một mẫu ràng buộc làm thuộc tính còn lại
Tính chất còn lại của gán phá hủy mảng có thể là một mẫu liên kết hoặc mảng khác. Điều này cho phép bạn đồng thời giải nén các thuộc tính và chỉ số của mảng.
const x = [1, 2, 3, 4, 5];
7const x = [1, 2, 3, 4, 5];
8Các mẫu ràng buộc này thậm chí có thể được lồng, miễn là mỗi thuộc tính REST là cuối cùng trong danh sách.
const x = [1, 2, 3, 4, 5];
9Mặt khác, phá hủy đối tượng chỉ có thể có một đị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
0Giải nén các giá trị khỏi một biểu thức phù hợp thông thường
Khi phương thức biểu thức chính quy
const numbers = [];
const obj = { a: 1, b: 2 };
[{ a: numbers[0], b: numbers[1] } = obj];
// The properties `a` and `b` are assigned to properties of `numbers`
1 tìm thấy một khớp, nó sẽ trả về một mảng chứa đầu tiên toàn bộ phần phù hợp của chuỗi và sau đó các phần của chuỗi khớp với từng nhóm dấu ngoặc đơn trong biểu thức chính quy. Bài tập phá hủy cho phép bạn giải nén các bộ phận ra khỏi mảng này một cách dễ dàng, bỏ qua toàn bộ trận đấu nếu không cần thiết.const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
1Sử dụng phá hủy mảng trên bất kỳ điều gì có thể
Array phá hủy gọi giao thức có thể lặp lại của phía bên phải. Do đó, bất kỳ mảng có thể lặp lại, không nhất thiết, có thể được phá hủy.
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
2Không có thiết lập không thể được phá hủy 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
3Tererables chỉ được lặp lại cho đến khi tất cả các ràng buộc được gán.
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
4Các 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 điều khác nhau.
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
5Đối tượng phá hủy
Bài tập cơ bản
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
6Gán cho các 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 đối tượng.
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
7Ở đây, ví dụ,
const numbers = [];
const obj = { a: 1, b: 2 };
[{ a: numbers[0], b: numbers[1] } = obj];
// The properties `a` and `b` are assigned to properties of `numbers`
2 lấy từ đối tượng const numbers = [];
const obj = { a: 1, b: 2 };
[{ a: numbers[0], b: numbers[1] } = obj];
// The properties `a` and `b` are assigned to properties of `numbers`
3 thuộc tính có tên const numbers = [];
const obj = { a: 1, b: 2 };
[{ a: numbers[0], b: numbers[1] } = obj];
// The properties `a` and `b` are assigned to properties of `numbers`
4 và gán nó cho một biến cục bộ có tên const numbers = [];
const obj = { a: 1, b: 2 };
[{ a: numbers[0], b: numbers[1] } = obj];
// The properties `a` and `b` are assigned to properties of `numbers`
5.Gán cho các tên biến mới và cung cấp các 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à được gán cho một biến có tên khác.
- Được chỉ định một giá trị mặc định trong trường hợp giá trị chưa đóng gói là
3.const obj = { a: 1, b: { c: 2 } }; const { a } = obj; // a is constant let { b: { c: d } } = obj; // d is re-assignable
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
8Giải nén các thuộc tính khỏi các đối tượng được truyền dưới dạng tham số hàm
Các đối tượng được truyền vào các tham số chức năng cũng có thể được giải nén thành các biến, sau đó có thể được truy cập trong cơ thể hàm. Đối với 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 một tên khác với thuộc tính gốc và gán các giá trị mặc định cho trường hợp khi đối tượng gốc không xác định thuộc tính.
Hãy xem xét đối tượng này, trong đó chứa thông tin về người dùng.
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log[y]; // 1
console.log[z]; // 2
9Ở đây chúng tôi chỉ ra 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 numbers = [];
const obj = { a: 1, b: 2 };
[{ a: numbers[0], b: numbers[1] } = obj];
// The properties `a` and `b` are assigned to properties of `numbers`
7 chỉ ra rằng thuộc tính const numbers = [];
const obj = { a: 1, b: 2 };
[{ a: numbers[0], b: numbers[1] } = obj];
// The properties `a` and `b` are assigned to properties of `numbers`
8 của đối tượng được truyền vào hàm phải được giải nén vào một biến có cùng tên, sau đó có thể được sử dụng trong hàm.const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
0Bạ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 tài sản có tên
const numbers = [];
const obj = { a: 1, b: 2 };
[{ a: numbers[0], b: numbers[1] } = obj];
// The properties `a` and `b` are assigned to properties of `numbers`
9 và đổi tên nó thành const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
// This is equivalent to:
// const numbers[0] = obj.a;
// const numbers[1] = obj.b;
// Which definitely is not valid.
0 để sử dụng trong cơ thể chức năng.const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
1Cá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 numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
// This is equivalent to:
// const numbers[0] = obj.a;
// const numbers[1] = obj.b;
// Which definitely is not valid.
1 được giải nén vào một biến gọi là const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
// This is equivalent to:
// const numbers[0] = obj.a;
// const numbers[1] = obj.b;
// Which definitely is not valid.
2.const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
2Đặt giá trị mặc định của tham số chức năng
Các giá trị mặc định có thể được chỉ định bằng cách sử dụng
const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
// This is equivalent to:
// const numbers[0] = obj.a;
// const numbers[1] = obj.b;
// Which definitely is not valid.
3 và sẽ được sử dụng làm giá trị biến nếu một thuộc tính được chỉ định không tồn tại trong đối tượng được truyền.Dưới đây chúng tôi hiển thị một hàm trong đó kích thước mặc định là
const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
// This is equivalent to:
// const numbers[0] = obj.a;
// const numbers[1] = obj.b;
// Which definitely is not valid.
4, các tọa độ mặc định là const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
// This is equivalent to:
// const numbers[0] = obj.a;
// const numbers[1] = obj.b;
// Which definitely is not valid.
5 và bán kính mặc định là 25.const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
3Trong chữ ký chức năng cho
const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
// This is equivalent to:
// const numbers[0] = obj.a;
// const numbers[1] = obj.b;
// Which definitely is not valid.
6 ở trên, phía bên trái bị phá hủy có giá trị mặc định của một đối tượng trống const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
// This is equivalent to:
// const numbers[0] = obj.a;
// const numbers[1] = obj.b;
// Which definitely is not valid.
7.Bạn cũng có thể đã viết chức năng mà không có mặc định đó. Tuy nhiên, nếu bạn bỏ đi 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 của nó, bạn có thể gọi
const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
// This is equivalent to:
// const numbers[0] = obj.a;
// const numbers[1] = obj.b;
// Which definitely is not valid.
8 mà không cần cung cấp bất kỳ tham số nào. Nếu không, bạn cần ít nhất cung cấp một đối tượng trống theo nghĩa đen.Để biết thêm thông tin, hãy xem tham số mặc định> Tham số bị phá hủy với gán giá trị mặc định.
Đố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;
4Cho 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;
5Tên thuộc tính đối tượng được tính toán và phá hủy
Tên tài sản được tính toán, giống như trên các chữ cái đối tượng, có thể được sử dụng với sự phá hủy.
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
6Định danh JavaScript không hợp lệ làm tên thuộc tính
Phá hủy có thể được sử dụng với các tên thuộc tính không phải là định danh JavaScript hợp lệ bằng cách cung cấp một đị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;
7Kết hợp mảng và phá hủy đối tượng
Mảng và phá hủy đố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 numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
// This is equivalent to:
// const numbers[0] = obj.a;
// const numbers[1] = obj.b;
// Which definitely is not valid.
9 bên dưới và sau đó bạn muốn thuộc tính const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
// This is equivalent to:
// const numbers[0] = obj.a;
// const numbers[1] = obj.b;
// Which definitely is not valid.
2 trong đối tượng, bạn có thể làm như sau:const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
8Chuỗi nguyên mẫu được tra cứu khi đối tượng được giải mã
Khi giải mã một đối tượng, nếu một thuộc tính không được truy cập, nó sẽ tiếp tục tìm kiếm dọc theo chuỗi nguyên mẫu.
const obj = { a: 1, b: 2 };
const { a, b } = obj;
// is equivalent to:
// const a = obj.a;
// const b = obj.b;
9Thông số kỹ thuật
Thông số kỹ thuật ngôn ngữ Ecmascript # Sec-Destructuring-Bán # sec-destructuring-assignment |
Thông số kỹ thuật ngôn ngữ Ecmascript # Sec-Destructuring Binding-Botherns # sec-destructuring-binding-patterns |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt