JavaScript - Tách mảng: Mở hộp phép thuật của các mảng

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 đầy thú vị vào thế giới của Tách mảng (Array Destructuring). Đừng lo lắng nếu nó听起来 phức tạp - vào cuối bài học này, bạn sẽ tách mảng như một chuyên gia! Hãy lấy键盘 (keyboards) vô hình của bạn và cùng nhau lặn vào!

Tách mảng là gì?

Hãy tưởng tượng bạn có một hộp quà tặng được bao gói đẹp mắt (đó là mảng của chúng ta) đầy các món quà khác nhau (các phần tử của mảng). Tách mảng giống như mở hộp quà tặng một cách kỳ diệu và sắp xếp tất cả các món quà trên bàn, mỗi món ở vị trí đặc biệt của nó. Đây là cách để unpack các giá trị từ mảng vào các biến riêng biệt. Đúng là tuyệt vời phải không?

Hãy bắt đầu với một ví dụ đơn giản:

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 lấy mảng fruits và unpack các giá trị của nó vào ba biến riêng biệt. Giống như nói, "Hey JavaScript, lấy những quả này và đưa cho tôi quả đầu tiên, quả thứ hai và quả thứ ba riêng biệt!"

Bỏ qua các phần tử của mảng khi tách mảng

Bây giờ, giả sử bạn đang ăn kiêng và muốn bỏ qua quả chuối? Không có vấn đề gì! Tách mảng cho phép bạn bỏ qua các phần tử bạn không muốn. Dưới đây là cách thực hiện:

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

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

Thấy rằng dấu phẩy thêm giữa firstFruit và thirdFruit không? Đó là chúng tôi đang nói với JavaScript, "Bỏ qua phần tử thứ hai, vui lòng!" Giống như chọn chỉ những quả bạn muốn từ bát trái cây.

Tách mảng và toán tử Rest

Nhưng đợi đã, còn nhiều hơn nữa! Giả sử bạn muốn quả đầu tiên, nhưng muốn bỏ tất cả phần còn lại vào một giỏ khác? Đó là khi toán tử rest (...) phát huy tác dụng:

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
const [firstFruit, ...restOfFruits] = fruits;

console.log(firstFruit);    // Output: 'apple'
console.log(restOfFruits);  // Output: ['banana', 'cherry', 'date', 'elderberry']

Ở đây, firstFruit nhận 'apple', và restOfFruits nhận tất cả phần còn lại. Giống như nói, "Đưa tôi quả đầu tiên, sau đó gom tất cả phần còn lại vào này giỏ!"

Tách mảng và giá trị mặc định

Đôi khi, hộp trái cây của chúng ta có thể không có tất cả các trái cây chúng ta mong đợi. Trong trường hợp đó, chúng ta có thể đặt giá trị mặc định:

const [apple = 'red apple', banana = 'yellow banana'] = ['green apple'];

console.log(apple);   // Output: 'green apple'
console.log(banana);  // Output: 'yellow banana'

Trong ví dụ này, chúng ta đang nói, "Nếu không có apple, hãy sử dụng 'red apple', và nếu không có banana, hãy sử dụng 'yellow banana'." Nhưng vì chúng ta có 'green apple', đó là gì chúng ta nhận được cho apple, trong khi banana sử dụng giá trị mặc định.

Đổi giá trị các biến bằng cách tách mảng

Đây là một trick hay: chúng ta có thể sử dụng tách mảng để đổi giá trị các biến mà không cần biến tạm. Giống như một trick ma thuật!

let a = 'first';
let b = 'second';

[a, b] = [b, a];

console.log(a);  // Output: 'second'
console.log(b);  // Output: 'first'

Woa! Chúng ta đã đổi giá trị của a và b chỉ trong một dòng. Giống như chúng đã đổi chỗ với nhau ngay lập tức!

Tách mảng từ mảng trả về bởi một hàm

Cuối cùng, chúng ta có thể sử dụng tách mảng trên các mảng trả về từ các hàm. Giả sử chúng ta có một hàm trả về một mảng dữ liệu thời tiết:

function getWeather() {
return ['sunny', 25, '10%'];
}

const [sky, temperature, humidity] = getWeather();

console.log(sky);         // Output: 'sunny'
console.log(temperature); // Output: 25
console.log(humidity);    // Output: '10%'

Ở đây, chúng ta đang bắt mảng trả về và ngay lập tức unpack nó vào các biến riêng biệt. Giống như hàm đang ném cho chúng ta một gói, và chúng ta unpack nó trên không!

Tóm tắt các phương pháp tách mảng

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

Phương pháp	Mô tả	Ví dụ
Tách mảng cơ bản	Unpack các phần tử của mảng vào các biến	const [a, b, c] = [1, 2, 3]
Bỏ qua các phần tử	Bỏ qua các phần tử không mong muốn khi tách mảng	const [a, , c] = [1, 2, 3]
Toán tử Rest	Gom các phần tử còn lại vào một mảng	const [a, ...rest] = [1, 2, 3, 4]
Giá trị mặc định	Đặt giá trị mặc định cho các phần tử thiếu	const [a = 1, b = 2] = [3]
Đổi giá trị các biến	Đổi giá trị các biến mà không cần biến tạm	[a, b] = [b, a]
Tách mảng từ hàm trả về	Tách mảng từ các mảng trả về bởi các hàm	const [a, b] = getArray()

Và thế là bạn đã học được nghệ thuật tách mảng trong JavaScript. Nhớ rằng, thực hành là cách tốt nhất để thành thạo, vì vậy đừng ngần ngại chơi với các khái niệm này. Trước khi bạn biết, bạn sẽ tách mảng trong giấc ngủ!

Ai ngờ unpacking mảng lại có thể thú vị như vậy? Bây giờ hãy đi tiếp và tách mảng với tự tin! Chúc mừng coding, và hy vọng các mảng của bạn luôn được unpack một cách ngăn nắp!

Credits: Image by storyset