JavaScript - Gỡ rối phức tạp

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của gỡ rối phức tạp. Đừng lo lắng nếu điều đó听起来 có vẻ đáng sợ - tôi hứa rằng cuối bài học này, bạn sẽ gỡ rối các cấu trúc phức tạp như một chuyên gia!

Gỡ rối phức tạp

Trước khi chúng ta nhảy vào sâu, hãy nhanh chóng ôn lại什么是析构 (destructured). Hãy tưởng tượng bạn có một hộp (một đối tượng hoặc một mảng) đầy những món quà, và bạn muốn lấy ra những món đồ cụ thể. Gỡ rối giống như把手伸 vào hộp và lấy chính xác những gì bạn cần trong một lần. Đ简单, phải không?

Bây giờ, gỡ rối phức tạp là khi chúng ta có những hộp trong hộp, và chúng ta muốn lấy ra những món đồ từ những hộp bên trong nữa. Nó giống như một bộ Doll Matryoshka của dữ liệu!

Hãy bắt đầu với một số ví dụ đơn giản và dần dần làm khó hơn.

Gỡ rối đối tượng phức tạp

Hãy tưởng tượng bạn đang xây dựng một trò chơi video, và bạn có một đối tượng người chơi với một số thông tin phức tạp. Đây là cách chúng ta có thể gỡ rối nó:

const player = {
name: "Mario",
game: "Super Mario Bros",
details: {
age: 35,
occupation: "Thợ sửa ống nước"
}
};

const { name, details: { age } } = player;

console.log(name);  // Output: Mario
console.log(age);   // Output: 35

Trong ví dụ này, chúng ta đang把手 vào đối tượng player, lấy name từ cấp độ顶层, và sau đó nhảy vào đối tượng details để lấy age. Nó giống như nói, "Cho tôi tên, và oh, khi bạn làm việc đó, hãy lấy tuổi từ bên trong chi tiết."

Hãy thử một điều gì đó phức tạp hơn:

const game = {
title: "Final Fantasy VII",
platform: "PlayStation",
characters: {
protagonist: {
name: "Cloud Strife",
weapon: "Buster Sword"
},
antagonist: {
name: "Sephiroth",
weapon: "Masamune"
}
}
};

const { title, characters: { protagonist: { name: heroName, weapon: heroWeapon } } } = game;

console.log(title);       // Output: Final Fantasy VII
console.log(heroName);    // Output: Cloud Strife
console.log(heroWeapon);  // Output: Buster Sword

Ở đây, chúng ta đang nhảy hai cấp độ sâu! Chúng ta lấy title từ cấp độ顶层, sau đó vào characters, sau đó vào protagonist, và cuối cùng lấy name và weapon. Chúng ta cũng đổi tên chúng thành heroName và heroWeapon để rõ ràng hơn.

Gỡ rối mảng phức tạp

Mảng cũng có thể được nhúng! Hãy xem một ví dụ:

const coordinates = [10, 20, [30, 40]];

const [x, y, [z, w]] = coordinates;

console.log(x);  // Output: 10
console.log(y);  // Output: 20
console.log(z);  // Output: 30
console.log(w);  // Output: 40

Trong trường hợp này, chúng ta đang gỡ rối một mảng nhúng. Đối tượng thứ ba của mảng coordinates là một mảng khác, vì vậy chúng ta sử dụng một bộ dấu ngoặc vuông khác để gỡ rối nó.

Hãy thử một điều gì đó phức tạp hơn:

const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];

const [[a, b, c], [d, e, f], [g, h, i]] = matrix;

console.log(a, e, i);  // Output: 1 5 9

Ở đây, chúng ta đang gỡ rối một ma trận 3x3. Mỗi mảng nhúng trong mẫu gỡ rối tương ứng với một hàng trong ma trận của chúng ta.

Mảng trong đối tượng - Gỡ rối phức tạp

Bây giờ, hãy trộn một chút. What if we have an array inside an object?

const student = {
name: "Alice",
age: 20,
grades: [85, 90, 92]
};

const { name, grades: [firstGrade, ...otherGrades] } = student;

console.log(name);         // Output: Alice
console.log(firstGrade);   // Output: 85
console.log(otherGrades);  // Output: [90, 92]

Trong ví dụ này, chúng ta lấy name từ đối tượng, và sau đó gỡ rối mảng grades. Chúng ta lấy điểm đầu tiên riêng lẻ, và sau đó sử dụng toán tử rest (...) để thu thập các điểm còn lại vào một mảng mới.

Đối tượng trong mảng - Gỡ rối phức tạp

Cuối cùng, hãy xem xét việc gỡ rối một đối tượng trong một mảng:

const team = [
{ name: "John", role: "Developer" },
{ name: "Jane", role: "Designer" },
{ name: "Jack", role: "Manager" }
];

const [{ name: firstName }, , { role }] = team;

console.log(firstName);  // Output: John
console.log(role);       // Output: Manager

Ở đây, chúng ta đang gỡ rối đối tượng đầu tiên và thứ ba trong mảng. Chúng ta lấy name từ đối tượng đầu tiên (và đổi tên thành firstName), bỏ qua đối tượng thứ hai hoàn toàn (chú ý đến dấu phẩy bổ sung), và sau đó lấy role từ đối tượng thứ ba.

Bảng tóm tắt phương pháp

Dưới đây là bảng tóm tắt các phương pháp chúng ta đã covered:

Phương pháp	Mô tả	Ví dụ
Gỡ rối đối tượng	Lấy giá trị từ đối tượng	const { name, age } = person;
Gỡ rối mảng	Lấy giá trị từ mảng	const [x, y] = coordinates;
Gỡ rối đối tượng phức tạp	Lấy giá trị từ đối tượng nhúng	const { details: { age } } = player;
Gỡ rối mảng phức tạp	Lấy giá trị từ mảng nhúng	const [x, [y, z]] = nestedArray;
Gỡ rối hỗn hợp	Kết hợp gỡ rối đối tượng và mảng	const { grades: [firstGrade] } = student;
Đổi tên	Gán giá trị析构 thành tên biến khác	const { name: firstName } = person;
Toán tử rest	Thu thập giá trị còn lại vào một mảng	const [first, ...rest] = numbers;

Và đó là tất cả, các bạn! Bạn đã nâng cấp kỹ năng JavaScript của mình với gỡ rối phức tạp. Nhớ rằng, thực hành là chìa khóa, vì vậy đừng ngại thử nghiệm các khái niệm này trong mã của riêng bạn. Chúc các bạn may mắn!

Credits: Image by storyset