Destructuring trong JavaScript

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:

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:

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:

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ụ:

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:

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:

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”.

>>Xem thêm: Tìm hiểu setTimeout() và setInterval()

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:

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:

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:

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.