1. Khởi tạo mảng

Trong JavaScript, có hai cách phổ biến để khai báo một mảng. Cách đầu tiên là sử dụng ký hiệu mảng literal, cách thứ hai là dùng constructor.

// Cách 1: Sử dụng dấu ngoặc vuông
const danhSachSo = [10, 20, 30];

// Cách 2: Sử dụng từ khóa new
const danhSachMoi = new Array(10, 20, 30); // Từ khóa new có thể bỏ qua

Lưu ý quan trọng: Nếu constructor chỉ nhận một tham số là số nguyên, ví dụ new Array(5), nó sẽ tạo ra một mảng có độ dài là 5 chứ không phải chứa phần tử giá trị 5.

2. Thuộc tính length và các thao tác liên quan

Thuộc tính length không chỉ dùng để đọc số lượng phần tử mà còn có thể dùng để thay đổi kích thước mảng trực tiếp.

const monAn = ['Phở', 'Bún Chả', 'Bánh Mì', 'Cơm Tấm', 'Hủ Tiếu'];

// Cắt bớt mảng bằng cách giảm length
monAn.length = 3;
console.log(monAn); // Kết quả: ['Phở', 'Bún Chả', 'Bánh Mì']

// Mở rộng mảng bằng cách gán vào chỉ mục lớn hơn length
monAn[monAn.length] = 'Bún Bò';
console.log(monAn); // Thêm phần tử vào cuối

// Tạo mảng sparse (thưa)
monAn[10] = 'Cháo Lòng';
console.log(monAn.length); // Kết quả: 11, các vị trí giữa sẽ là empty

Phương pháp làm rỗng mảng:

• Cách 1: arr.length = 0; (Nhanh và trực tiếp).
• Cách 2: arr = []; (Tạo tham chiếu mới, hiệu suất tốt trong nhiều trường hợp).

3. Phương thức thêm phần tử

Để bổ sung dữ liệu vào mảng, ta có thể sử dụng hai phương thức chính tùy thuộc vào vị trí muốn thêm.

const soNguyen = [1, 2, 3];

// Thêm vào cuối mảng (Stack)
const doDaiMoi = soNguyen.push('GiaTriMoi');
console.log(doDaiMoi); // Trả về độ dài mới: 4
console.log(soNguyen); // [1, 2, 3, 'GiaTriMoi']

// Thêm vào đầu mảng (Queue)
const doDaiSau = soNguyen.unshift('DauTien');
console.log(soNguyen); // ['DauTien', 1, 2, 3, 'GiaTriMoi']

Cả hai phương thức đều trả về độ dài mới của mảng sau khi thêm. Lưu ý rằng unshift() có thể gặp vấn đề tương thích trên các trình duyệt rất cũ (IE7 trở xuống).

4. Phương thức xóa phần tử

Ngược lại với việc thêm, ta có thể loại bỏ phần tử ở đầu hoặc cuối mảng.

const gioHang = ['Táo', 'Cam', 'Nho', 'Xoài', 'Dưa'];

// Xóa phần tử cuối cùng
const cuoiCung = gioHang.pop();
console.log(cuoiCung); // 'Dưa'
console.log(gioHang); // ['Táo', 'Cam', 'Nho', 'Xoài']

// Xóa phần tử đầu tiên
const dauTien = gioHang.shift();
console.log(dauTien); // 'Táo'
console.log(gioHang); // ['Cam', 'Nho', 'Xoài']

Khác với push và unshift, hai phương thức này trả về giá trị của phần tử đã bị xóa.

5. Phương thức splice() đa năng

splice() là công cụ mạnh mẽ nhất để xử lý mảng, cho phép xóa, chèn hoặc thay thế phần tử tại bất kỳ vị trí nào. Phương thức này luôn trả về một mảng chứa các phần tử đã bị xóa.

const sanPham = ['Laptop', 'Chuot', 'BanPhim', 'ManHinh', 'TaiNghe'];

// Xóa: Bắt đầu từ vị trí 0, xóa 2 phần tử
const daXoa = sanPham.splice(0, 2);
console.log(daXoa); // ['Laptop', 'Chuot']
console.log(sanPham); // ['BanPhim', 'ManHinh', 'TaiNghe']

// Chèn: Tại vị trí 1, xóa 0 phần tử, chèn 'Webcam', 'DienThoai'
sanPham.splice(1, 0, 'Webcam', 'DienThoai');
console.log(sanPham); // ['BanPhim', 'Webcam', 'DienThoai', 'ManHinh', 'TaiNghe']

// Thay thế: Tại vị trí 2, xóa 1 phần tử, chèn 'MayIn'
sanPham.splice(2, 1, 'MayIn');
console.log(sanPham); // ['BanPhim', 'Webcam', 'MayIn', 'ManHinh', 'TaiNghe']

6. Kỹ thuật loại bỏ phần tử trùng lặp

Một bài toán thường gặp là làm sạch mảng khỏi các giá trị bị lặp. Dưới đây là cách thực hiện bằng cách kiểm tra chỉ mục xuất hiện đầu tiên.

const duLieuGoc = [1, 5, 5, 8, 7, 4, 5];
const duLieuSach = [];

for (let i = 0; i < duLieuGoc.length; i++) {
    // Chỉ thêm vào nếu chưa tồn tại trong mảng mới
    if (duLieuSach.indexOf(duLieuGoc[i]) === -1) {
        duLieuSach.push(duLieuGoc[i]);
    }
}

console.log(duLieuSach); // Kết quả: [1, 5, 8, 7, 4]

7. Sắp xếp và đảo ngược mảng

JavaScript cung cấp sẵn các phương thức để thay đổi thứ tự phần tử.

reverse(): Đảo ngược thứ tự hiện tại của mảng.

const danhSachHonHop = [1, 2, 8, 4, 5, 'bb', '123', 32];
console.log(danhSachHonHop.reverse()); 
// Kết quả đảo ngược hoàn toàn dãy phần tử

sort(): Mặc định sắp xếp theo thứ tự từ điển (string). Để sắp xếp số chính xác, cần cung cấp hàm so sánh.

// Hàm so sánh tăng dần
const sapXepTang = (a, b) => a - b;

// Hàm so sánh giảm dần
const sapXepGiam = (a, b) => b - a;

const conSo = [10, 2, 80, 4, 5, 32];

console.log(conSo.sort(sapXepTang)); // [2, 4, 5, 10, 32, 80]
console.log(conSo.sort(sapXepGiam)); // [80, 32, 10, 5, 4, 2]

Hàm so sánh trả về giá trị âm nếu phần tử thứ nhất nên đứng trước, dương nếu đứng sau và 0 nếu bằng nhau.

8. Nối mảng với concat()

Phương thức concat() tạo ra một mảng mới bằng cách ghép mảng hiện tại với các giá trị hoặc mảng khác được truyền vào, không làm thay đổi mảng gốc.

const mauCoBan = ['do', 'xanh-la', 'xanh-duong'];
const mauBoSung = mauCoBan.concat('vang', ['den', 'nau']);

console.log(mauBoSung); 
// ['do', 'xanh-la', 'xanh-duong', 'vang', 'den', 'nau']
console.log(mauCoBan); 
// Mảng gốc không thay đổi: ['do', 'xanh-la', 'xanh-duong']