Phá hủy JavaScript

Phép gán 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ừ đối tượng thành các biến riêng biệt. Dữ liệu có thể được trích xuất từ ​​mảng, đối tượng, đối tượng lồng nhau và gán cho biến. Trong Bài tập hủy cấu trúc ở phía bên trái đã xác định giá trị nào sẽ được giải nén khỏi biến nguồn. Nói chung, cách thực hiện trích xuất mảng như dưới đây. Thí dụ.  

jav




var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
4

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
5
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
6
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
7
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
1
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
3
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
4

 

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
5
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
6

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
5
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
8

 

[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
60

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
61
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
62

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
63

đầu ra

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
0

cú pháp

  • Phá hủy mảng
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
  • hoặc là
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
  • phá hủy đối tượng
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
6
  • hoặc là
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
4

Phá hủy mảng. Sử dụng Bài tập hủy cấu trúc trong các tình huống có thể xảy ra với mảng JavaScript, tất cả các ví dụ được liệt kê bên dưới

  • ví dụ 1. Khi sử dụng phép gán hủy, việc trích xuất tương tự có thể được thực hiện bằng cách sử dụng các triển khai bên dưới.  

jav




var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
4

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
5
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
6
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
7
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
1
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
3
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
4

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
5
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
46

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
47

[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
60

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
61
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
62

 

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
32

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
5
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
34
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
7_______08
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
1
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
3
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
4

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
43

[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
60

_______161____547

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
63

  • đầu ra
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
3
  • ví dụ 2. Các phần tử mảng cũng có thể được bỏ qua bằng cách sử dụng dấu phân cách dấu phẩy. Có thể sử dụng một dấu phẩy để bỏ qua một phần tử mảng. Một điểm khác biệt chính giữa toán tử trải rộng và phá hủy mảng là toán tử trải rộng giải nén tất cả các phần tử mảng thành một danh sách được phân tách bằng dấu phẩy, danh sách này không cho phép chúng ta chọn hoặc chọn phần tử nào chúng ta muốn gán cho biến. Để bỏ qua toàn bộ mảng, có thể thực hiện bằng cách sử dụng số lượng dấu phẩy vì có một số phần tử mảng.  

jav




var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
4

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
5
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
31____07
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
1
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
3
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
4

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
43

[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
60

[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
53
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
54

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
63

  • đầu ra
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
4
  • ví dụ 3. Để gán một số phần tử mảng cho biến và phần còn lại của các phần tử mảng cho chỉ một biến duy nhất có thể đạt được bằng cách sử dụng toán tử phần còn lại […] như cách triển khai bên dưới. Nhưng một hạn chế của toán tử còn lại là nó chỉ hoạt động chính xác với các phần tử cuối cùng có nghĩa là không thể lấy được một mảng con để lại phần tử cuối cùng trong mảng.  

jav




var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
4

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
5
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
58____07
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
1____08
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
3
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
4

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
43

[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
60

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
00
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
01

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
63

  • đầu ra
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
3
  • Ví dụ 4. Các giá trị cũng có thể được hoán đổi bằng cách sử dụng phép gán hủy như bên dưới.  

jav




var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
4

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
5
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
6
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
7
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
1
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
3
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
4

 

[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
60

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
61
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
62

 

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
18

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
19

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
47

[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
62

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
61
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
60

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
63

  • đầu ra
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
5
  • Ví dụ 5. Dữ liệu cũng có thể được trích xuất từ ​​một mảng được trả về từ một hàm. Một lợi thế của việc sử dụng phép gán hủy cấu trúc là không cần phải thao tác toàn bộ đối tượng trong một hàm mà chỉ có thể sao chép các trường được yêu cầu bên trong hàm.  

jav




var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
4

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
27
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
28

var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
43
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
30
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
31
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
7
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
9
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
1
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
8
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log[x]; // 10
console.log[y]; // 20
console.log[restof]; // [30, 40, 50]
3
var x, y;
[x, y] = [10, 20];
console.log[x]; // 10
console.log[y]; // 20
39

Phá hủy trong JavaScript là gì?

Phá hủy cấu trúc đối tượng JavaScript là cú pháp trích xuất các giá trị từ một thuộc tính đối tượng và gán chúng cho một biến . Việc phá hủy cũng có thể thực hiện được đối với Mảng JavaScript. Theo mặc định, tên khóa đối tượng trở thành biến chứa giá trị tương ứng.

Làm cách nào để sử dụng phá hủy trong JavaScript?

Dưới đây là cách hủy cấu trúc các giá trị từ một đối tượng. .
var employee = { // Đối tượng chúng tôi muốn hủy cấu trúc. tên đầu tiên. 'Jon', họ. 'Tuyết',.
var employee = { // Đối tượng chúng tôi muốn hủy cấu trúc. tên đầu tiên. 'Jon', họ. 'Tuyết',.
var employee = { // Đối tượng chúng tôi muốn hủy cấu trúc. tên đầu tiên. 'Jon', họ. 'Tuyết',

Tại sao sử dụng phá hủy?

Gán cấu trúc là một cú pháp đặc biệt cho phép chúng ta “giải nén” các mảng hoặc đối tượng thành một loạt các biến , vì đôi khi điều đó thuận tiện hơn. Việc hủy cấu trúc cũng hoạt động hiệu quả với các hàm phức tạp có nhiều tham số, giá trị mặc định, v.v.

Chúng ta có thể hủy cấu trúc đối tượng trong JavaScript không?

Kể từ ECMAScript 6 [hay gọi tắt là ES6], bạn có thể giải cấu trúc các đối tượng trong JavaScript . Là một nhà phát triển JavaScript, bạn có thể sẽ hủy cấu trúc các đối tượng như một phần công việc hàng ngày của mình. Hãy tìm hiểu về lý do tại sao chúng ta sử dụng cấu trúc hủy và sau đó chúng ta sẽ tìm hiểu cách hủy cấu trúc các đối tượng JavaScript.

Chủ Đề