Destructuring là một tính năng mạnh mẽ của JavaScript được giới thiệu trong ES6 (ECMAScript 2015). Nó giúp việc trích xuất giá trị từ mảng hoặc thuộc tính từ đối tượng và gán chúng vào biến trở nên dễ dàng và rõ ràng hơn.
Hãy cùng tìm hiểu cách destructuring hoạt động và khám phá các trường hợp sử dụng qua các ví dụ.
Destructuring là gì?
Destructuring là một kỹ thuật cho phép bạn giải nén các giá trị từ mảng hoặc đối tượng vào các biến riêng biệt.
Quá trình này bao gồm việc phân rã cấu trúc dữ liệu phức tạp thành các phần đơn giản hơn, làm cho việc làm việc với chúng trở nên dễ dàng hơn.
Destructuring Mảng
Hãy bắt đầu với destructuring mảng. Chúng ta sẽ sử dụng ví dụ sau.
Không sử dụng destructuring, việc trích xuất giá trị từ mảng có thể rất dài dòng:
javascript
const hobbies = ["Đọc sách", "Lập trình", "Đi bộ đường dài"];
const firstHobby = hobbies[0];
const secondHobby = hobbies[1];
const thirdHobby = hobbies[2];
console.log(firstHobby); // Output: Đọc sách
console.log(secondHobby); // Output: Lập trình
console.log(thirdHobby); // Output: Đi bộ đường dài
Ở đây, bạn đang truy cập từng phần tử của mảng hobbies sử dụng chỉ số và gán chúng vào các biến riêng lẻ.
Destructuring đơn giản hóa quá trình này thành một dòng code, như sau:
javascript
const hobbies = ["Đọc sách", "Lập trình", "Đi bộ đường dài"];
const [firstHobby, secondHobby, thirdHobby] = hobbies;
console.log(firstHobby); // Output: Đọc sách
console.log(secondHobby); // Output: Lập trình
console.log(thirdHobby); // Output: Đi bộ đường dài
Trong ví dụ này, bạn đang trích xuất các giá trị từ mảng hobbies và gán chúng vào các biến firstHobby, secondHobby và thirdHobby tương ứng.
Bỏ Qua Các Phần Tử Trong Mảng
Bạn có thể chọn bỏ qua một số phần tử bằng cách không đưa chúng vào mô hình destructuring:
javascript
const hobbies = ["Đọc sách", "Lập trình", "Đi bộ đường dài"];
const [firstHobby, , thirdHobby] = hobbies;
console.log(firstHobby); // Output: Đọc sách
console.log(thirdHobby); // Output: Đi bộ đường dài
Trong ví dụ này, bạn đang destructuring mảng hobbies nhưng chỉ gán giá trị cho các biến firstHobby và thirdHobby. Bạn bỏ qua phần tử thứ hai trong mảng bằng cách đặt dấu phẩy mà không có tên biến giữa firstHobby và thirdHobby. Điều này cho phép bạn trích xuất các phần tử cụ thể từ mảng trong khi bỏ qua những phần tử khác, cung cấp sự linh hoạt và kiểm soát hơn trong mô hình destructuring của bạn.
Destructuring Mảng Lồng Nhau
Destructuring mảng cũng có thể được lồng nhau. Dưới đây là một ví dụ:
javascript
const nestedArray = [1, [2, 3], 4];
const [firstValue, [secondValue, thirdValue], fourthValue] = nestedArray;
console.log(firstValue); // Output: 1
console.log(secondValue); // Output: 2
console.log(thirdValue); // Output: 3
console.log(fourthValue); // Output: 4
Trong đoạn code này, chúng ta có một mảng lồng nestedArray. Sử dụng destructuring mảng lồng nhau, bạn đang trích xuất giá trị từ cả mảng bên ngoài và bên trong và gán chúng vào các biến firstValue, secondValue, thirdValue và fourthValue.
Destructuring Đối Tượng
Chuyển sang destructuring đối tượng, xem xét đối tượng sau:
javascript
const person = {
name: "John Doe",
age: 30,
city: "New York",
occupation: "Kỹ sư phần mềm",
hobbies: ["Đọc sách", "Lập trình", "Đi bộ đường dài"]
};
Destructuring Thông Thường
Destructuring đối tượng cho phép bạn trích xuất các thuộc tính từ đối tượng:
javascript
const { name, age, city } = person;
console.log(name); // Output: John Doe
console.log(age); // Output: 30
console.log(city); // Output: New York
Trong ví dụ này, { name, age, city }
là cú pháp destructuring. Nó có nghĩa là bạn đang trích xuất các thuộc tính name, age và city từ đối tượng person và gán chúng vào các biến cùng tên. Vì vậy, name sẽ có giá trị "John Doe", age sẽ có 30 và city sẽ có "New York".
Destructuring Với Tên Biến Khác
Bạn có thể gán các thuộc tính đã trích xuất vào các biến với tên khác:
javascript
const { name: personName, age: personAge, city: personCity } = person;
console.log(personName); // Output: John Doe
console.log(personAge); // Output: 30
console.log(personCity); // Output: New York
Trong ví dụ này, bạn đang sử dụng cú pháp như { name: personName, age: personAge, city: personCity }
cho phép bạn gán các thuộc tính đã trích xuất vào các biến với tên khác. Ở đây, name từ đối tượng person được gán cho personName, age được gán cho personAge và city được gán cho personCity.
Có Giá Trị Mặc Định Khi Destructuring
Bạn cũng có thể cung cấp giá trị mặc định cho các thuộc tính của đối tượng:
javascript
const { name, age, gender = "Không xác định" } = person;
console.log(gender); // Output: Không xác định
Ở đây, bạn đang cung cấp giá trị mặc định "Không xác định" cho thuộc tính gender trong trường hợp nó không có mặt trong đối tượng person. Nếu gender không được định nghĩa trong person, biến gender sẽ mặc định là "Không xác định".
Đối Tượng Lồng Nhau
Destructuring đối tượng hỗ trợ đối tượng lồng nhau:
javascript
const { name, address: { city, country } } = person;
console.log(city); // Output: New York
console.log(country); // Output: undefined (giả sử thuộc tính address không có thuộc tính country)
Trong ví dụ này, { name, address: { city, country } }
là cú pháp destructuring. Bạn đang trích xuất thuộc tính name trực tiếp từ đối tượng person. Sau đó, trong đối tượng address, bạn đang trích xuất các thuộc tính city và country. Vì vậy, city sẽ có giá trị "New York", và country sẽ mặc định là undefined giả sử address không có thuộc tính country.
Kết Luận
Đó là tất cả! Bạn nên đã có một hiểu biết tốt về cách hoạt động của destructuring JavaScript cho mảng và đối tượng.