HomeLập trìnhJavaScriptCách sử dụng...

Cách sử dụng phá hủy trong JavaScript để viết mã sạch hơn, mạnh hơn


bởi Ashay Mandwarya ?️??

5ZtyOZGxxb7NmMshfaWOKsRIDkNU03jmUXrp
Ảnh của Scott Rodgerson trên Bapt

Đôi khi bạn phải phá hủy để xây dựng một cái gì đó mới.

-Mistborn: Người hùng của mọi thời đại

ES6 đã giới thiệu cho chúng tôi một trong những tính năng JavaScript được chờ đợi nhất: phá hủy. Về mặt khái niệm, Destructuring không phải là mới hay đột phá và một số ngôn ngữ đã có Destructuring(??) từ rất lâu trước đó. Nhưng đó là một tính năng rất cần thiết và được yêu cầu trong JavaScript.

Destructuring là quá trình phá vỡ một cấu trúc. Trong ngữ cảnh lập trình, cấu trúc là cấu trúc dữ liệu và việc phá hủy các cấu trúc dữ liệu này có nghĩa là giải nén các giá trị riêng lẻ khỏi cấu trúc dữ liệu. Trong JavaScript, việc phá hủy có thể được áp dụng cho một Đối tượng hoặc một Mảng.

Phá hủy làm cho, phá vỡ bất cứ điều gì…. chúng ta có ích lợi gì cho nó??

Trước khi trả lời câu hỏi đó, chúng ta hãy có một định nghĩa chính thức cho Destructuring. MDN để giải cứu!

Các nhiệm vụ phá hủy cú pháp 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. -MDN

Hãy xem xét một số ví dụ để hiểu rõ hơn về những điều cơ bản của phá hủy.

Mảng

Mẫu 1:

vctLJdok3mwgR0m8Fsg3rQnc1Zt-0IdW1BY6

Khi tôi nhìn thấy đoạn mã đơn giản này lần đầu tiên, tôi đã rất bối rối. Tôi không hiểu chuyện gì đã xảy ra. Nếu bạn giống như tôi, hãy để tôi thử và giải thích.

Trong dòng 1, chúng tôi xác định 2 biến ab . Trong dòng tiếp theo, cả hai biến đều nằm trong một mảng ở phía bên trái, mảng này lần lượt tương đương với một mảng thực tế ở phía bên tay đi xe. Trong các dòng tiếp theo, chúng tôi in các giá trị của a & b và chúng tôi nhận được 7 và 8 tương ứng là các phần tử trong mảng RHS. Phép thuật xảy ra ở dòng 2 được gọi là phá hủy.

LHS hủy cấu trúc RHS và các giá trị thu được từ việc giải nén các phần tử được gán cho các biến theo thứ tự.

Nhưng tại sao LHS lại nằm trong một mảng???

Phép gán hủy sử dụng cú pháp tương tự, trên LHS so với RHS để xác định giá trị nào cần giải nén từ biến nguồn.

Mẫu 2:

XLVhZxEiMUW3ZcImmob74XfJ35XNICjLHorK

Ở đây chúng tôi đã giới thiệu một biến khác leftout trong mã bây giờ. Chúng tôi có 2 loại sử dụng khác nhau của leftout trong mã.

  • [a,b,leftout]-> Cái này gán phần tử thứ ba trong mảng to leftra như mong đợi.
  • [a,b,…leftout]-> Điều này mang lại 2 giá trị đầu tiên toaandb tương ứng và phần còn lại của mảng được gán cho the leftobiến ut.
Đọc thêm  JS Sao chép một đối tượng – Cách sao chép một Obj trong JavaScript

Giải pháp nằm ở nhà điều hành. Toán tử này thu gọn tất cả các đối số còn lại (còn lại) thành một mảng. Ở điểm thứ hai, 2 phần tử mảng đầu tiên được gán cho a & b tương ứng, và phần còn lại của các đối số được thu gọn thành một mảng (có thể tái cấu trúc??) và được gán cho leftout Biến đổi. Chúng ta có thể xác minh điều tương tự bằng cách nhìn vào đầu ra.

Các đối tượng

Mẫu 1:

0IP9fC5h8SaQgOfRupMy3VrAprZD8Y7Ruuis

Việc hủy cấu trúc hoạt động giống nhau đối với đối tượng và mảng. Đối tượng trong LHS có thuộc tính a & b được gán tương ứng cho các thuộc tính a & b của đối tượng RHS. Chúng tôi nhận được 1 & 2 tương ứng bằng cách in chúng.

Một điều cần chú ý (nếu bạn có) là có một chút thay đổi trong cú pháp (bây giờ bạn có).

wysq-sQxfF1KgL4u4RzGzyLeJJh2Xm6ayZIi

Trong Phá hủy đối tượng, toàn bộ LHS & RHS được bao bọc bên trong ()

AevjPd-JS4LSFQKNPgft2P1HoBu6CsnZ6EXD

Chúng tôi có thể thấy lỗi mà chúng tôi gặp phải khi chúng tôi không bọc nó bên trong (). Nó nói tuyên bố của tuyên bố dự kiến.

Điều đang thực sự xảy ra là đặt một cái gì đó trong dấu ngoặc nhọn {} khiến JavaScript nhầm lẫn để nó coi nó là một khối chứ không phải Đối tượng. Do đó, nó đang tìm kiếm một khai báo cho khối (khai báo hàm), vì vậy chúng tôi đính kèm mã trong (). Điều này làm cho nó trở thành một biểu thức chứ không phải là một khối và chúng tôi nhận được kết quả của mình.

Mẫu 2:

3VZxBELTjXt0s9TT4XPe9QgKblm-U2wLmocM

một lần nữa rest nhà điều hành. Hoạt động giống như trong mảng, ngoại trừ lần này các giá trị còn lại được thu gọn bên trong một đối tượng vì cấu trúc được sử dụng được xác định bởi LHS.

Phá hủy được sử dụng để làm gì?

Như đã thấy từ các ví dụ trên, bây giờ chúng ta biết tầm quan trọng của việc phá hủy. Có rất nhiều cách sử dụng và các trường hợp khác nhau về cách sử dụng phá hủy cho cả Đối tượng và Mảng. Chúng tôi sẽ thử một số trong số họ. (tái bút — các ví dụ hợp lệ cho cả đối tượng và mảng trừ khi được đề cập khác.)

gán biến

Chúng ta đã thấy cách các biến được gán trong các ví dụ trên, vì vậy hãy xem một ví dụ khác.

qucTgfx8ChDUFSt5e23j9ZC-H-ytxvsm9df1

Trong ví dụ này, một mảng đã được tạo sẽ được chỉ định trực tiếp để phá hủy. Tuy nhiên, các giá trị được gán cho các biến.

Điều tương tự cũng xảy ra với Đối tượng.

Giá trị mặc định

Đôi khi nó có thể xảy ra mà chúng tôi xác định n số lượng biến để lấy giá trị từ việc phá hủy, nhưng mảng/đối tượng chỉ có thể có n-x phần tử. Trong trường hợp này x các biến sẽ được gán undefined.

bKDR20pG1uWtpsmLS1HBudY4Gqa7aMhWqb97

Chúng tôi có thể thấy điều đó b không được xác định vì đơn giản là mảng không có nhiều phần tử để hủy cấu trúc và gán cho mọi biến.

Đọc thêm  Cách sao chép một mảng trong JavaScript
cwlRrrmE9KClkUQTlv-QZy9yLLnnhUU1ok8K

Giải pháp cho vấn đề đó là cung cấp các giá trị mặc định cho các biến, vì vậy nếu không có đủ phần tử, các biến sẽ lấy các giá trị mặc định thay vì không xác định.

hoán đổi

Hoán đổi là quá trình trao đổi giá trị giữa 2 hoặc nhiều biến. Một cách tiêu chuẩn để thực hiện hoán đổi là sử dụng biến tạm thời hoặc sử dụng XOR. Trong JavaScript, điều tương tự có thể được thực hiện bằng cách sử dụng phá hủy.

tLDijuHCnuduNyMosckz9Duuw6-kx90Qg5wc
Sử dụng biến tạm thời
ODUhWbdggQIzMq8eFQMwQaDrQU6JeUJetUs6
sử dụng phá hủy

Hoán đổi bằng cách sử dụng một biến tạm thời. Mã này là tự giải thích.

Sử dụng phá hủy, chúng ta chỉ cần hoán đổi vị trí của các phần tử và Voilà! Trao đổi xong.

Bỏ qua các giá trị

Chúng tôi chỉ có thể nắm bắt và sử dụng các giá trị được yêu cầu và từ chối hoặc bỏ qua các giá trị không cần thiết.

zIJpQ2bE1p6MFfkierxlodGv1zvAGjxSmFEa

Ở đây, chúng ta có thể thấy rằng chúng ta đã bỏ qua giá trị ở giữa bằng cách không gán nó cho bất kỳ biến nào, do đó giúp chúng ta tránh được rắc rối.

Gán gián tiếp một hàm trả về

vw5YPLogWb2GhazAyBcLhlqEmpVQq7pN8pL0

Ở đây chúng ta có thể thấy rằng hàm x trả về một mảng. Trên dòng 4, nơi chúng tôi hủy cấu trúc, chúng tôi cung cấp lệnh gọi hàm trả về mảng chứ không phải mảng trực tiếp. Nó làm cho mã gọn gàng, dễ đọc và dễ hiểu.

Gán cho các biến mới

Các 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.

mdhZkJwQQ8sUBjGxMGB0-q1mRY40hNHuRN90

Chúng ta có thể thấy rằng các giá trị cho các thuộc tính cũng là các biến mà các giá trị được gán cho chúng thông qua việc phá hủy.

Đối tượng lồng nhau và phá hủy mảng

EDN-Rs05z2noXItyxqtnPY9fIo9G3fYZ5p5J

Như chúng ta có thể thấy, dữ liệu đó là một đối tượng có thuộc tính được gọi là vị trí, thuộc tính này chứa một mảng có các phần tử là đối tượng.

Với việc phá hủy, chúng ta phải lấy các giá trị của tất cả các thuộc tính có bên trong đối tượng bên trong mảng vị trí.

Vì vậy, chúng tôi đã tạo một đối tượng gọi là obj chứa cấu trúc giống như đối tượng dữ liệu và các giá trị mà chúng tôi muốn giải nén được cung cấp dưới dạng các biến (mylatitude,mylongitude,mycity). Đến lượt chúng được đánh đồng với mảng dữ liệu (giống như cú pháp phá hủy trước đó). Khi các biến được in ra, chúng ta sẽ nhận được các giá trị tương ứng.

Hủy cấu trúc với vòng lặp for-of

ZMbT6bd6j3NX79H9wD5MwfUR4dpfw-TcKZ5S

Trong đoạn mã trên, chúng ta có một mảng người gồm các đối tượng có các thuộc tính lần lượt chứa một đối tượng (người > đối tượng >gia đình). Bây giờ chúng tôi muốn giải nén một số giá trị từ đối tượng bằng cách sử dụng vòng lặp for..of.

Đọc thêm  Cách xây dựng Máy tính tiền boa bằng HTML, CSS và JavaScript

Trong vòng lặp, chúng ta đã gán một biến đối tượng, với cấu trúc giống như trong mảng người, bỏ qua các giá trị mà chúng ta không cần. Chúng tôi đã gán các biến n & m tương ứng cho tên và thuộc tính mẹ, bởi vì đây là những giá trị mà chúng tôi muốn giải nén. Trong vòng lặp, chúng tôi in các biến và chúng tôi nhận được các giá trị cần thiết.

Bức tranh lớn.

1qA678ILbFdyrsQbPU23KMUDk6KCS5g30XFC
Ảnh của Jeremy Bishop trên Bapt

Bạn phải sử dụng phá hủy trong mã của mình hoặc thực hành nó để thực sự hiểu rõ về nó. Nó có vẻ đơn giản trong các ví dụ bởi vì các ví dụ chỉ để giúp bạn hiểu những điều cơ bản. Với các thao tác phức tạp/nhiều (reduce()!), việc mô tả cấu trúc có thể nhanh chóng trở nên khó hiểu, điều mà chúng tôi không muốn!

Hơn nữa, bạn cũng có thể nghĩ việc phá hủy chỉ là cú pháp đường để thực hiện một tập hợp các tác vụ (giống như chúng ta có thể cung cấp cho các biến giá trị của từng phần tử từ một mảng bằng cách sử dụng vòng lặp for). Ở một mức độ nào đó, chúng ta có thể nói đó là đường, nhưng khi nhìn vào bức tranh rộng hơn ‘Bức tranh lớn’, chúng ta sẽ hiểu tại sao việc phá hủy lại có nhiều giá trị hơn là chỉ là một công cụ giảm thiểu mã.

JavaScript có nhiều thao tác để trích xuất cũng như xây dựng dữ liệu, nhưng tất cả chúng đều hoạt động trên một phần tử tại một thời điểm.

Để xây dựng

QZXe1vAOI2Ej9qAbqIh6Wy-jGFquOKRXRQoP

Để giải nén (vẫn từng cái một)

u4ESs-rTstc3LGGnOC-pZMNU0Coi1vq-wlxD

Mặc dù có một cú pháp để xây dựng nhiều thuộc tính cùng một lúc, nhưng nó chỉ có thể được sử dụng tại thời điểm gán — nó không thể được sử dụng để thay đổi một đối tượng hiện có.

g07Cm8JHppxOkVc7xSyb08lJtJWIgGCjWc7L

Trước khi ES6 được giới thiệu, không có cơ chế trích xuất tất cả dữ liệu cùng một lúc. Đó là nơi mà sự hủy diệt đã thực sự tỏa sáng. Nó cho phép bạn trích xuất nhiều thuộc tính từ một đối tượng. Chúng ta đã thấy điều này trong các ví dụ trên.

cạm bẫy

Tôi chỉ có thể nghĩ ra một điều duy nhất và chúng tôi đã thảo luận về nó:

  • Một câu lệnh không nên bắt đầu bằng dấu ngoặc nhọn {

Phần kết luận

Tôi đã cố gắng đơn giản hóa việc hủy bằng cách trình bày càng nhiều trường hợp sử dụng hủy càng tốt. Tôi hy vọng nó làm cho khái niệm này rõ ràng với bạn. Giờ đây, bạn có thể sử dụng tính năng hủy để viết mã mạnh mẽ và rõ ràng.

sUivtdGf22RnNFYooZCq1j0mWzsiOTnKt0yk
Google



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status