Cách hủy cấu trúc mảng và đối tượng trong JavaScript

JavaScript hiện đại có nhiều tính năng mới giúp dễ dàng viết mã theo cách đơn giản và có cấu trúc. Một trong những tính năng hiện đại tiện dụng có sẵn trong ES6+ là phá hủy mảng và đối tượng.

Các khung JavaScript như React.js và Angular khuyến khích sử dụng kỹ thuật này. Vì vậy, điều cần thiết là phải hiểu tất cả những gì về phá hủy và cách sử dụng nó trong khi viết mã.

Phá hủy đối tượng và mảng trong JavaScript là gì?

Phá hủy cấu trúc trong JavaScript đề cập đến quá trình giải nén các giá trị từ một mảng hoặc đối tượng. Nó cung cấp một cách ngắn gọn hơn để nhận các giá trị từ mảng hoặc đối tượng mà không cần phải nâng nhiều khi bạn quan tâm đến các mục hoặc giá trị mảng riêng lẻ trong một đối tượng.

Nó cũng hữu ích khi xử lý các giá trị trả về từ một hàm hoặc biểu thức phức tạp. Khái niệm này là một trong những phương pháp hay nhất bạn nên tuân theo khi viết mã React.

Cách hủy cấu trúc mảng

Đây là một mã mẫu để có được cảm giác phá hủy mảng:

 const arr = [1, 2];
const [a, b] = arr;
console.log(a) 
console.log(b) 
 

Mã này sử dụng phá hủy để gán các giá trị từ mảng—1 và 2—đến các biến Một Và b, tương ứng. Đây là khái niệm cơ bản đằng sau sự phá hủy. Bạn có một mảng hoặc đối tượng ở phía bên tay phải và bạn giải nén các mục và gán chúng cho các biến riêng lẻ ở phía bên trái.

Tóm lại, JavaScript sao chép các giá trị từ mảng và gán chúng cho các biến ở phía bên tay trái như sau:

 const arr = [1,2];
const a = arr[0];
const b = arr[1];
 

Như bạn có thể thấy, phá hủy là một cách ngắn gọn hơn để thực hiện việc này, không giống như sử dụng ký hiệu đối tượng hoặc dấu ngoặc. Tuy nhiên, cú pháp này có thể sẽ hữu ích khi làm việc với các mảng hoặc hàm phức tạp trả về mảng hoặc chuỗi.

Kiểm tra mã mẫu dưới đây:

 const [day, month, date, year, time, timezone] = Date().split(' ')

console.log(day) 
console.log(month) 
console.log(date) 
 

Trong mẫu mã này, chúng tôi đang tạo một chuỗi mới với ngày hiện tại bằng cách gọi Ngày(). Tiếp theo, chúng tôi sử dụng tách ra()một phương thức chuỗi JavaScript, để phân tách các mục trong chuỗi bằng dấu cách làm dấu phân cách. tách ra(‘ ‘) trả về một mảng và chúng tôi sử dụng hàm hủy để gán giá trị cho các biến riêng lẻ.

Hãy nhớ rằng nếu mảng của bạn chứa nhiều mục hơn mức bạn giải nén, thì JavaScript sẽ bỏ qua các mục thừa.

 const arr = [1, 2, 3, 4];
const [a, b] = arr;
console.log(a) 
console.log(b) 
 

Trong trường hợp này, nếu bạn muốn lưu trữ các mục còn lại trong một biến, hãy sử dụng tham số còn lại như sau:

 const arr = [1, 2, 3, 4];
const [a, b, ...rest] = arr;
console.log(rest) 
 

Đôi khi, bạn có thể không quan tâm đến một mặt hàng cụ thể. Mẫu phá hủy của JavaScript cũng cho phép bạn bỏ qua một số phần tử nhất định bằng cách sử dụng dấu phẩy trống.

 const arr = [1, 2, 3, 4];
const [a, , c] = arr;
console.log(c) 
 

Đoạn mã trên sử dụng khoảng trống để bỏ qua giá trị 2 trong mảng mảng. Thay vì gán giá trị 2 để biến c, nó bỏ qua mục tiếp theo trong mảng. Nó cũng bỏ qua giá trị thứ tư vì nó không chỉ định một biến để lưu trữ nó.

Ngược lại, nếu bạn cần ít mặt hàng hơn số lượng bạn đang giải nén, quy trình sẽ chỉ định không xác định giá trị cho các biến phụ đó.

 const arr = [1];
const [a, b] = arr;
console.log(a) 
console.log(b) 
 

Để tránh việc các biến không được xác định, bạn có thể đặt giá trị mặc định nếu bạn không chắc chắn về độ dài mảng như sau (gán giá trị mặc định không phải là yêu cầu):

 const arr = [1];
const [a = '10', b = 'not provided'] = arr;
console.log(a) 
console.log(b) 
 

Việc phá hủy này gán giá trị 1 để biến Một, ghi đè lên giá trị mặc định của nó. Biến đổi b giữ mặc định vì giá trị không được cung cấp.

Cách hủy cấu trúc đối tượng

Phá hủy các đối tượng không quá khác biệt so với mảng. Sự khác biệt duy nhất là các mảng có thể lặp lại được còn các đối tượng thì không, dẫn đến cách thực hiện hơi khác một chút.

Khi làm việc với các đối tượng, các biến ở vế trái của toán tử gán cũng được khởi tạo giống như các đối tượng:

 const person = {name: 'Alvin', age: 10, height: 1};
const {name, age, height} = person;
console.log(name) 
console.log(height) 
 

Từ mã, chúng tôi đang sử dụng tên thuộc tính từ người sự vật. Tuy nhiên, bạn không phải sử dụng tên thuộc tính chính xác trong đối tượng. Bạn có thể hủy cấu trúc và lưu trữ các giá trị trong các tên biến khác nhau như sau:

 const person = {name: 'Alvin', age: 10, height: 1};
const {name: firstName, age: years, height: currentHeight} = person;
console.log(firstName) 
console.log(currentHeight) 
 

Bạn bắt đầu bằng cách chỉ định giá trị thuộc tính mà bạn muốn hủy cấu trúc, sau đó chỉ định tên biến mà bạn sẽ sử dụng để lưu trữ giá trị sau dấu hai chấm. Và giống như mảng, việc hủy một tên thuộc tính không tồn tại sẽ là không xác định.

Để xử lý việc này, bạn có thể chỉ định các giá trị mặc định tương tự trong trường hợp tên thuộc tính mà bạn muốn gán cho một biến không có sẵn:

 const person = {name: 'Alvin', age: 10, height: 1};
const {name, age, height, location='Worldwide'} = person;
console.log(name) 
console.log(location) 
 

Thứ tự của các biến ở phía bên trái không quan trọng đối với một đối tượng vì các đối tượng lưu trữ các giá trị theo cặp khóa-giá trị. Như vậy, đoạn mã sau sẽ mang lại kết quả tương tự:

 const person = {name: 'Alvin', age: 10, height: 1};
const {age, height, name} = person;
console.log(name) 
console.log(height) 
 

Cuối cùng, tương tự như mảng, bạn cũng có thể sử dụng tham số còn lại để hủy cấu trúc một số giá trị trong một biến như sau:

 const person = {name: 'Alvin', age: 10, height: 1};
const {name, ...rest} = person;
console.log(name) 
console.log(rest) 
 

Chỉ cần lưu ý rằng tham số còn lại phải luôn xuất hiện sau cùng. Nếu không, JavaScript sẽ đưa ra một ngoại lệ.

Cải thiện chất lượng mã của bạn với tính năng hủy cấu trúc của JavaScript

Các tính năng hiện đại của Javascript, như phá hủy, cho phép bạn viết mã dễ đọc. Sử dụng tính năng hủy, bạn có thể nhanh chóng giải nén các giá trị khỏi mảng và đối tượng. Việc hủy cấu trúc cũng có thể hữu ích trong các tình huống khác, chẳng hạn như hoán đổi giá trị của hai biến. Hy vọng rằng bây giờ bạn đã hiểu phá hủy nghĩa là gì trong JavaScript và bạn có thể sử dụng nó khi viết mã.