Mảng trong JavaScript

Trong lập trình, dữ liệu không phải lúc nào cũng nằm gọn trong từng biến riêng lẻ như student1, student2, ... Đặt tên kiểu đó cho 20 học viên trong lớp thì mệt lắm, đúng không? Đây là lúc mảng (Array) trong JavaScript phát huy tác dụng: một kiểu dữ liệu giúp bạn gom tất cả vào một danh sách, dễ quản lý và truy xuất.

1. Mảng là gì?

Mảng (Array) trong JavaScript là một kiểu dữ liệu dùng để lưu trữ nhiều giá trị trong một biến duy nhất, được gọi là tên mảng (ví dụ: cars, students). Mỗi giá trị trong mảng là một phần tử (element), và các phần tử được truy cập thông qua chỉ số (index) – một số nguyên bắt đầu từ 0. Thuộc tính length của mảng cho biết tổng số phần tử có trong nó.

Ví dụ, bạn có một danh sách xe hơi:

Copycopy code to clipboard
let cars = ['Toyota', 'Subaru', 'BMW'];
console.log(cars[0]); // "Toyota" – Phần tử đầu tiên
console.log(cars[2]); // "BMW" – Phần tử thứ ba
console.log(cars.length); // 3 – Tổng số phần tử

Chỉ số của mảng bắt đầu từ 0, nên phần tử đầu tiên có chỉ số là 0, và phần tử cuối cùng có chỉ số là length - 1. Điều này giúp bạn dễ dàng quản lý và thao tác trên tập hợp dữ liệu lớn.

2. Khai báo mảng trong JavaScript

Trong JavaScript, mảng có thể được khai báo bằng hai cách phổ biến:

Dùng dấu ngoặc vuông [] (Cách phổ biến nhất)

Copycopy code to clipboard
let cars = ['Toyota', 'Subaru', 'BMW'];

Đây là cách khai báo mảng phổ biến nhất, sử dụng cú pháp dấu ngoặc vuông []. Các phần tử được liệt kê bên trong, cách nhau bằng dấu phẩy. Phương pháp này ngắn gọn, dễ đọc và được sử dụng rộng rãi trong lập trình JavaScript.

Dùng từ khóa new Array() (Không khuyến khích)

Copycopy code to clipboard
let cars = new Array('Toyota', 'Subaru', 'BMW');

Cách khai báo này sử dụng từ khóa new Array() để tạo mảng, với các phần tử được truyền vào dưới dạng tham số. Tuy nhiên, phương pháp này không được khuyến khích do có thể gây nhầm lẫn trong một số trường hợp. Ví dụ:

Copycopy code to clipboard
let arr1 = new Array(5);
console.log(arr1); // [undefined, undefined, undefined, undefined, undefined] – Mảng 5 phần tử trống
console.log(arr1.length); // 5

let arr2 = new Array('5');
console.log(arr2); // ['5'] – Mảng chứa một phần tử là chuỗi '5'
console.log(arr2.length); // 1

Đời lập trình đã đủ phức tạp rồi, sao phải tự làm khó mình, đúng không? So với cú pháp [], cách dùng new Array() kém rõ ràng hơn và dễ dẫn đến lỗi khi sử dụng. Vì vậy, cú pháp [] thường được ưu tiên trong lập trình JavaScript do tính đơn giản và nhất quán.

Ví dụ:

Thay vì: let arr = new Array(1, 2, 3);

Hãy sử dụng: let arr = [1, 2, 3];

3. Các thao tác cơ bản với mảng

Học mảng không phải là ngồi đọc lý thuyết – bạn phải thử, phải nghịch! Dưới đây là vài cách cơ bản để "vọc" mảng.

Thêm phần tử

• Thêm vào cuối: push()

  Copycopy code to clipboard
  let cars = ['Toyota', 'Subaru'];
  cars.push('BMW');
  console.log(cars); // ["Toyota", "Subaru", "BMW"]

• Thêm vào đầu: unshift()

  Copycopy code to clipboard
  cars.unshift('Ferrari');
  console.log(cars); // ["Ferrari", "Toyota", "Subaru", "BMW"]

Xóa phần tử

• Xóa phần tử cuối: pop()

  Copycopy code to clipboard
  cars.pop();
  console.log(cars); // ["Ferrari", "Toyota", "Subaru"]

• Xóa phần tử đầu: shift()

  Copycopy code to clipboard
  cars.shift();
  console.log(cars); // ["Toyota", "Subaru"]

4. Duyệt mảng với vòng lặp

Để truy cập và xử lý từng phần tử trong mảng, bạn có thể sử dụng vòng lặp.

Duyệt mảng 1 chiều

Giả sử chúng ta có một danh sách số:

Copycopy code to clipboard
let numbers = [1, 2, 3, 4, 5];

Cách duyệt qua từng phần tử:

Copycopy code to clipboard
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

Hoặc sử dụng forEach() nếu bạn thích sự hiện đại:

Copycopy code to clipboard
numbers.forEach((num) => console.log(num));

Duyệt mảng 2 chiều

Mảng 2 chiều là mảng chứa các mảng con bên trong. Đây là cách tổ chức dữ liệu phổ biến khi làm việc với bảng dữ liệu hoặc ma trận.

Ví dụ:

Copycopy code to clipboard
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

Để duyệt qua từng phần tử trong mảng 2 chiều, chúng ta cần sử dụng hai vòng lặp lồng nhau:

Copycopy code to clipboard
for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]);
  }
}

Thử chạy code này đi – bạn sẽ thấy từng số hiện lên.

Lý do chúng ta sử dụng vòng lặp for thay vì while hoặc do...while khi duyệt mảng là vì số lần lặp được xác định trước dựa trên thuộc tính length của mảng. Với for, bạn khai báo rõ ràng điểm bắt đầu, điều kiện dừng (thường là i < array.length), và bước lặp trong một dòng, giúp mã nguồn ngắn gọn và dễ đọc.

Ngược lại, while và do...while đòi hỏi bạn tự quản lý điều kiện dừng bằng cách cập nhật biến đếm bên trong vòng lặp. Nếu quên tăng biến đếm hoặc đặt sai điều kiện, vòng lặp có thể chạy vô hạn, gây lỗi chương trình – ví dụ, treo ứng dụng hoặc tiêu tốn tài nguyên không cần thiết. Với mảng, khi số phần tử đã biết trước qua length, việc dùng for giảm thiểu rủi ro này và đảm bảo vòng lặp chỉ chạy đúng số lần cần thiết.

Sắp xếp mảng

Mảng không chỉ là nơi chứa dữ liệu – nó còn giúp bạn tổ chức chúng.

• Sắp xếp theo thứ tự chữ cái: sort()

  Copycopy code to clipboard
  let cars = ['Toyota', 'Subaru', 'BMW'];
  cars.sort();
  console.log(cars); // ["BMW", "Subaru", "Toyota"]

• Đảo ngược thứ tự: reverse()

  Copycopy code to clipboard
  cars.reverse();
  console.log(cars); // ["Toyota", "Subaru", "BMW"]

• Sắp xếp mảng số:

  Copycopy code to clipboard
  let numbers = [40, 100, 1, 5, 25, 10];
  numbers.sort((a, b) => a - b); // Tăng dần
  console.log(numbers); // [1, 5, 10, 25, 40, 100]

5. Lưu ý quan trọng về sort()

Hàm sort() trong JavaScript mặc định sắp xếp theo thứ tự chữ cái. Khi sắp xếp số, bạn cần cung cấp một hàm so sánh để chỉ định cách sắp xếp. Dưới đây là ví dụ dùng cú pháp arrow function:

Copycopy code to clipboard
let numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b); // Sắp xếp tăng dần
console.log(numbers); // [1, 5, 10, 25, 40, 100]

Cú pháp (a, b) => a - b là một arrow function (hàm mũi tên), một cách viết ngắn gọn để định nghĩa hàm trong JavaScript.

Quy tắc:

• Nếu a - b trả về số âm → a đứng trước b
• Nếu a - b trả về số dương → b đứng trước a
• Nếu a - b bằng 0 → giữ nguyên thứ tự

Nếu bạn chưa quen với arrow function, đây là cách tương đương dùng anonymous function (hàm nặc danh):

Copycopy code to clipboard
let numbers = [40, 100, 1, 5, 25, 10];
numbers.sort(function (a, b) {
  return a - b;
});
console.log(numbers); // [1, 5, 10, 25, 40, 100]

Chúng ta sẽ tìm hiểu chi tiết về hàm, bao gồm arrow function và anonymous function, ở bài học sau. Hiện tại, hãy nhớ rằng hàm so sánh là cần thiết để sort() hoạt động đúng với mảng số.

Kết luận

Mảng trong JavaScript không chỉ là một kiểu dữ liệu – nó là cánh cửa để trở thành lập trình viên. Nắm vững cách khai báo, truy xuất, và thao tác với mảng sẽ giúp code của bạn gọn gàng, hiệu quả, và bớt nhức đầu khi sửa lỗi sau này.

Như Andy Hunt từng nói: "Học lập trình không chỉ là học cú pháp, mà là học cách tư duy về dữ liệu và giải quyết vấn đề". Vì vậy, đừng chỉ đọc lý thuyết – hãy mở ngay VS Code hoặc WebStorm, tạo một danh sách tên học viên và viết một đoạn code sắp xếp chúng theo bảng chữ cái. Học lập trình là phải thực hành thì mới thấm!