Toàn tập về Destructuring Arrays

Destructuring là một cú pháp đặc biệt cho phép bạn "mở gói" 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.

Hãy tưởng tượng thế này: Bạn có một cái hộp (mảng) chứa nhiều món đồ bên trong. Thay vì mang theo cả cái hộp chỉ để lấy một món, destructuring cho phép bạn với tay vào và lấy chính xác món bạn cần, và đặt cho nó một cái tên.

Cách "cũ" (Không dùng Destructuring)

Trước khi có destructuring, nếu bạn muốn lấy phần tử thứ nhất và thứ hai của một mảng và gán chúng vào biến, bạn phải làm thế này:

const userProfile = ['John', 'Doe', 30, 'Developer']; // Accessing elements by their index number
const firstName = userProfile[0]; // 'John'
const lastName = userProfile[1]; // 'Doe'
const age = userProfile[2]; // 30 console.log(firstName); // Output: John
console.log(lastName); // Output: Doe

Cách này hoạt động bình thường, nhưng khá lặp lại, đặc biệt nếu bạn cần truy cập nhiều phần tử.

Cách "mới" (Dùng Array Destructuring)

Array destructuring cho phép bạn làm điều tương tự chỉ trong một dòng mã gọn gàng:

const userProfile = ['John', 'Doe', 30, 'Developer']; // Destructuring the array
const [firstName, lastName, age] = userProfile; console.log(firstName); // Output: John
console.log(lastName); // Output: Doe
console.log(age); // Output: 30

Cách hoạt động:

• Ở phía bên trái dấu =, bạn khai báo các biến mới bên trong dấu [].

• JavaScript sẽ gán giá trị từ mảng tương ứng với vị trí (index).

  • firstName nhận giá trị ở vị trí đầu tiên (userProfile[0])
  • lastName nhận giá trị thứ hai (userProfile[1])

• Và cứ thế tiếp tục.

Tính năng nổi bật và các trường hợp sử dụng

1. Bỏ qua phần tử

Giả sử bạn chỉ muốn lấy phần tử thứ nhất và thứ ba? Bạn có thể dùng dấu , để bỏ qua phần tử không cần:

const numbers = [10, 20, 30, 40, 50]; // We want the first, third, and fifth elements
const [first, , third, , fifth] = numbers; console.log(first); // Output: 10
console.log(third); // Output: 30
console.log(fifth); // Output: 50

2. Toán tử Rest (...)

Đây là một tính năng cực kỳ mạnh mẽ. Rest cho phép bạn lấy vài phần tử đầu thành biến riêng, phần còn lại gom vào một mảng mới:

const scores = [98, 85, 76, 64, 55, 43]; // Get the top two scores, and put the rest in a separate array
const [goldMedal, silverMedal, ...everyoneElse] = scores; console.log(goldMedal); // Output: 98
console.log(silverMedal); // Output: 85
console.log(everyoneElse); // Output: [76, 64, 55, 43]

⚠️ Lưu ý: Toán tử ...rest luôn phải đặt ở cuối trong biểu thức destructuring.

3. Giá trị mặc định

Nếu bạn cố gắng phân rã một phần tử không tồn tại trong mảng, mặc định biến sẽ có giá trị undefined. Nhưng bạn có thể gán giá trị mặc định:

const settings = ['dark']; // We expect a theme and a font size.
// If fontSize is not found in the array, it will default to 16.
const [theme, fontSize = 16] = settings; console.log(theme); // Output: 'dark'
console.log(fontSize); // Output: 16 (the default value was used) const anotherSetting = ['light', 18];
const [newTheme, newFontSize = 16] = anotherSetting;
console.log(newFontSize); // Output: 18 (the value from the array was used)

4. Hoán đổi giá trị biến

Destructuring cho phép bạn hoán đổi giá trị hai biến chỉ trong một dòng, mà không cần biến tạm:

let a = 5;
let b = 10; // The old way to swap:
// let temp = a;
// a = b;
// b = temp; // The new, destructuring way to swap:
[a, b] = [b, a]; console.log(a); // Output: 10
console.log(b); // Output: 5

Tại sao điều này lại quan trọng trong React?

Bạn có thể đã sử dụng destructuring trong React mà không để ý! Ví dụ rõ nhất là hook useState:

import { useState } from 'react'; // useState returns an array with two elements:
// 1. The current state value
// 2. A function to update that value
const stateArray = useState(0);
const count = stateArray[0];
const setCount = stateArray[1]; // But with destructuring, we can write it much more cleanly:
const [count, setCount] = useState(0);

Nhưng khi dùng destructuring, đoạn mã trở nên ngắn gọn và rõ ràng hơn:

const [count, setCount] = useState(0);

Bạn chỉ đang phân rã mảng mà useState trả về. Điều này giúp bạn truy cập trực tiếp giá trị state và hàm cập nhật (setter) với tên biến rõ ràng, dễ hiểu.

Tổng kết

Destructuring là một tính năng hiện đại của JavaScript giúp mã ngắn gọn hơn, dễ đọc hơn, và mạnh mẽ hơn trong việc thao tác với mảng.

Nếu bạn làm việc với React hoặc các project JS hiện đại, nắm vững destructuring sẽ giúp bạn viết code chuyên nghiệp hơn rất nhiều.