JavaScript - Gán Giá Trị Phân Rã

Xin chào các bạn lập trình viên JavaScript! Hôm nay, chúng ta sẽ cùng nhau khám phá một trong những tính năng mạnh mẽ và tiện lợi nhất của JavaScript hiện đại: Gán giá trị phân rã (Destructuring Assignment). Đừng để cái tên sang trọng này làm bạn e ngại - đến cuối bài học này, bạn sẽ thành thạo việc phân rã và tự hỏi làm thế nào bạn có thể sống thiếu nó!

Gán giá trị phân rã là gì?

Hãy tưởng tượng bạn có một hộp quà tặng được gói đẹp. Phân rã giống như mở hộp đó và lấy ra những món đồ cụ thể bạn muốn, tất cả chỉ trong một động tác nhanh chóng. Trong thuật ngữ JavaScript, nó là một cách hay để unpack giá trị từ các mảng hoặc thuộc tính từ các đối tượng vào các biến riêng biệt. Đẹp phải không?

Hãy bắt đầu từ cơ bản và dần dần đi vào các ví dụ phức tạp hơn.

Gán giá trị phân rã với mảng

Gán giá trị phân rã với mảng cho phép bạn trích xuất các giá trị từ một mảng và gán chúng vào các biến chỉ trong một dòng mã. Nó giống như把手 vào túi đầy kẹo hỗn hợp và chọn ra chính xác những hương vị bạn muốn!

Gán giá trị phân rã cơ bản với mảng

const fruits = ['apple', 'banana', 'cherry'];
const [firstFruit, secondFruit, thirdFruit] = fruits;

console.log(firstFruit);  // Output: 'apple'
console.log(secondFruit); // Output: 'banana'
console.log(thirdFruit);  // Output: 'cherry'

Trong ví dụ này, chúng ta đang unpack mảng fruits vào ba biến riêng biệt. Thứ tự rất quan trọng ở đây - firstFruit nhận phần tử đầu tiên, secondFruit nhận phần tử thứ hai, và vân vân.

Bỏ qua các phần tử

Nếu bạn chỉ muốn một số phần tử cụ thể, không có vấn đề gì! Bạn có thể bỏ qua các phần tử bạn không cần:

const colors = ['red', 'green', 'blue', 'yellow'];
const [primaryColor, , , accentColor] = colors;

console.log(primaryColor); // Output: 'red'
console.log(accentColor);  // Output: 'yellow'

Ở đây, chúng ta đã sử dụng dấu phẩy để bỏ qua các phần tử thứ hai và thứ ba. Nó giống như nói với đầu bếp JavaScript, "Tôi sẽ lấy món đầu tiên và món thứ tư, xin hãy!"

Sử dụng toán tử rest

Đôi khi bạn muốn lấy một số phần tử đầu tiên riêng lẻ và sau đó gom lại phần còn lại. Đây là lúc toán tử rest (...) xuất hiện:

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...theRest] = numbers;

console.log(first);    // Output: 1
console.log(second);   // Output: 2
console.log(theRest);  // Output: [3, 4, 5]

Toán tử rest giống như nói, "Đưa tôi hai phần tử đầu tiên, và để phần còn lại vào túi!"

Đổi vị trí các biến

Đây là một mẹo hay - bạn có thể sử dụng phân rã để đổi vị trí các biến mà không cần biến tạm:

let hot = 'summer';
let cold = 'winter';

[hot, cold] = [cold, hot];

console.log(hot);  // Output: 'winter'
console.log(cold); // Output: 'summer'

Nó giống như một trò ma thuật nơi bạn đổi nội dung của hai ly mà không cần ly thứ ba!

Gán giá trị phân rã với đối tượng

Bây giờ, hãy chuyển sang phân rã đối tượng. Điều này đặc biệt hữu ích khi làm việc với các API hoặc cấu trúc dữ liệu phức tạp.

Gán giá trị phân rã cơ bản với đối tượng

const person = {
name: 'Alice',
age: 30,
city: 'Wonderland'
};

const { name, age, city } = person;

console.log(name); // Output: 'Alice'
console.log(age);  // Output: 30
console.log(city); // Output: 'Wonderland'

Ở đây, chúng ta đang kéo ra các thuộc tính cụ thể từ đối tượng person. Điều tuyệt vời là các tên biến phải khớp với tên thuộc tính (trừ khi chúng ta chỉ định khác đi, điều chúng ta sẽ thấy sau).

Gán cho các biến khác tên

Nếu bạn muốn sử dụng các tên biến khác, đừng lo lắng:

const book = {
title: 'The Hitchhiker\'s Guide to the Galaxy',
author: 'Douglas Adams',
year: 1979
};

const { title: bookName, author: writer, year: publicationYear } = book;

console.log(bookName);        // Output: 'The Hitchhiker\'s Guide to the Galaxy'
console.log(writer);          // Output: 'Douglas Adams'
console.log(publicationYear); // Output: 1979

Nó giống như đặt biệt danh cho các thuộc tính bạn đang trích xuất!

Giá trị mặc định

Đôi khi, một đối tượng có thể không có tất cả các thuộc tính bạn đang tìm kiếm. Bạn có thể đặt giá trị mặc định để xử lý điều này:

const car = {
make: 'Toyota',
model: 'Corolla'
};

const { make, model, year = 2023 } = car;

console.log(make);  // Output: 'Toyota'
console.log(model); // Output: 'Corolla'
console.log(year);  // Output: 2023

Nếu year không có trong đối tượng car, nó sẽ mặc định là 2023. Nó giống như có một kế hoạch dự phòng!

Phân rã đối tượng嵌套

Đối tượng có thể được nhúng, và phân rã cũng có thể!

const student = {
name: 'Bob',
scores: {
math: 95,
english: 88,
science: 92
}
};

const { name, scores: { math, english, science } } = student;

console.log(name);    // Output: 'Bob'
console.log(math);    // Output: 95
console.log(english); // Output: 88
console.log(science); // Output: 92

Điều này giống như mở một con dolls Nga - bạn đang unpack các đối tượng trong các đối tượng!

Kết hợp phân rã mảng và đối tượng

Bạn thậm chí có thể kết hợp phân rã mảng và đối tượng để tạo ra các biểu thức rất mạnh mẽ:

const forecast = [
{ day: 'Monday', temp: 22 },
{ day: 'Tuesday', temp: 25 },
{ day: 'Wednesday', temp: 20 }
];

const [, { temp: tuesdayTemp }] = forecast;

console.log(tuesdayTemp); // Output: 25

Ở đây, chúng ta đã bỏ qua đối tượng đầu tiên trong mảng, sau đó phân rã thuộc tính temp từ đối tượng thứ hai, tất cả trong một động tác!

Cái gì tiếp theo?

Bây giờ bạn đã thành thạo nghệ thuật phân rã, bạn sẽ thấy nó vô cùng hữu ích trong hành trình JavaScript của mình. Nó là một công cụ tuyệt vời cho việc làm việc với các cấu trúc dữ liệu phức tạp, làm cho mã của bạn sạch sẽ và dễ đọc hơn.

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

Phương pháp	Mô tả
Phân rã mảng	Unpacking các phần tử mảng vào các biến
Bỏ qua các phần tử mảng	Sử dụng dấu phẩy để bỏ qua các phần tử không cần
Toán tử rest trong mảng	Gom lại các phần tử còn lại vào một mảng
Đổi vị trí các biến	Đổi vị trí các biến mà không cần biến tạm
Phân rã đối tượng	Trích xuất các thuộc tính đối tượng vào các biến
Đặt tên biến khác	Gán các thuộc tính đối tượng vào các biến có tên khác
Giá trị mặc định	Đặt giá trị mặc định cho các thuộc tính không xác định
Phân rã đối tượng嵌套	Phân rã các đối tượng trong các đối tượng

Nhớ rằng, thực hành làm cho hoàn hảo! Hãy thử sử dụng phân rã trong các dự án của bạn, và sớm nó sẽ trở thành bản năng thứ hai. Chúc các bạn may mắn và mong rằng các biến của bạn luôn được unpack một cách ngăn nắp! ??

Credits: Image by storyset