Giới Thiệu

Mảng là một trong những cấu trúc dữ liệu quan trọng nhất trong JavaScript. Dù bạn đang làm việc với ES5 (cú pháp cũ) hay ES6+ (cú pháp hiện đại), việc nắm vững tất cả các thao tác trên mảng là điều cần thiết để có mã sạch, hiệu quả và không có lỗi.

Hướng dẫn này sẽ cung cấp tất cả các phương thức mảng trong JavaScript với cả cú pháp cũ và mới — kèm theo những giải thích ngắn gọn và ví dụ cụ thể.

Mục Lục

1. Các Thao Tác Cơ Bản trên Mảng
2. Tìm Kiếm & Kiểm Tra
3. Lặp Qua & Biến Đổi
4. Thêm, Xóa, Sao Chép
5. Sắp Xếp & Đảo Ngược
6. Phương Thức Tiện Ích
7. Phương Thức Mảng Không Thay Đổi (ES2023+)
8. Câu Hỏi Thường Gặp
9. Thực Hành Tốt Nhất & Lưu Ý

Các Thao Tác Cơ Bản trên Mảng

1. push() → Thêm phần tử vào cuối

• Cú pháp cũ: arr.push(10);
• Cú pháp mới (Spread): arr = [...arr, 10]; Thêm phần tử mới vào cuối mảng.

2. pop() → Xóa phần tử ở cuối

• Cú pháp cũ: arr.pop();
• Cú pháp mới (Destructuring): [...rest, last] = arr; Xóa phần tử cuối và trả về nó.

3. shift() → Xóa phần tử ở đầu

• Cú pháp cũ: arr.shift();
• Cú pháp mới (Destructuring): [first, ...rest] = arr; Xóa phần tử đầu và dịch chuyển các phần tử còn lại sang trái.

4. unshift() → Thêm phần tử vào đầu

• Cú pháp cũ: arr.unshift(5);
• Cú pháp mới (Spread): arr = [5, ...arr]; Thêm phần tử vào đầu mảng.

Tìm Kiếm & Kiểm Tra

5. indexOf() → Tìm chỉ số của phần tử

• Cú pháp cũ: arr.indexOf(3);
• Cú pháp mới (findIndex): arr.findIndex(x => x === 3); Trả về chỉ số của lần xuất hiện đầu tiên.

6. lastIndexOf() → Tìm chỉ số cuối

• Cú pháp cũ: arr.lastIndexOf(3);
• Cú pháp mới (findLastIndex ES2023): arr.findLastIndex(x => x === 3); Tìm chỉ số của lần xuất hiện cuối.

7. includes() (ES6)

• Cú pháp cũ (Thủ công): arr.indexOf(3) !== -1;
• Cú pháp mới: arr.includes(3); Kiểm tra xem phần tử có tồn tại hay không.

8. at() (ES2022)

• Cú pháp cũ: arr[arr.length - 1];
• Cú pháp mới: arr.at(-1); Truy cập phần tử với chỉ số dương/âm.

Lặp Qua & Biến Đổi

9. forEach() → Lặp qua mảng

• Cú pháp cũ:

for (let i=0; i<arr.length; i++) console.log(arr[i]);

• Cú pháp mới: arr.forEach(item => console.log(item)); Lặp qua các phần tử.

10. map() → Biến đổi từng phần tử

• Cú pháp cũ:

let doubled = [];
for (let i=0; i<arr.length; i++) doubled.push(arr[i]*2);

• Cú pháp mới: arr.map(x => x*2); Trả về một mảng mới với các giá trị đã biến đổi.

11. filter() → Lọc các phần tử

• Cú pháp cũ:

let even = [];
for (let i of arr) if (i%2===0) even.push(i);

• Cú pháp mới: arr.filter(x => x%2===0); Giữ lại các phần tử thỏa mãn điều kiện.

12. reduce() → Tích lũy giá trị

• Cú pháp cũ:

let sum = 0;
for (let i of arr) sum += i;

• Cú pháp mới: arr.reduce((a,b)=>a+b, 0); Giảm mảng về một giá trị duy nhất.

13. reduceRight() → Tích lũy từ bên phải

• Cú pháp cũ: Reverse + reduce.
• Cú pháp mới: arr.reduceRight((a,b)=>a-b); Giống reduce nhưng từ phải sang trái.

Thêm, Xóa, Sao Chép

14. splice() → Thêm/Xóa tại chỉ số

• Cú pháp cũ: arr.splice(2,1,"new");
• Cú pháp mới (spread + slice):

arr = [...arr.slice(0,2), "new", ...arr.slice(3)];

Chèn, xóa hoặc thay thế các phần tử.

15. slice() → Sao chép một phần của mảng

• Cú pháp cũ: arr.slice(1,3);
• Cú pháp mới: [...arr].slice(1,3); Trả về bản sao nông từ chỉ số bắt đầu đến chỉ số kết thúc.

16. concat() → Gộp mảng

• Cú pháp cũ: arr.concat(arr2);
• Cú pháp mới: [...arr, ...arr2]; Kết hợp nhiều mảng.

17. flat() (ES2019) → Làm phẳng mảng

• Cú pháp cũ: arr.reduce((a,b)=>a.concat(b), []);
• Cú pháp mới: arr.flat(); Làm phẳng các mảng lồng nhau.

18. flatMap() (ES2019)

• Cú pháp cũ: arr.map(fn).flat();
• Cú pháp mới: arr.flatMap(fn); Kết hợp map và flatten trong một bước.

Sắp Xếp & Đảo Ngược

19. sort()

• Cú pháp cũ: arr.sort();
• Cú pháp mới: arr.toSorted(); // ES2023 Sắp xếp mảng tại chỗ (hoặc không thay đổi với toSorted).

20. reverse()

• Cú pháp cũ: arr.reverse();
• Cú pháp mới: arr.toReversed(); // ES2023 Đảo ngược thứ tự của mảng.

Phương Thức Tiện Ích

21. join() → Chuyển mảng thành chuỗi

• Cú pháp cũ: arr.join(",");
• Cú pháp mới: [...arr].join(" - "); Kết hợp các phần tử với dấu phân cách.

22. toString()

• Cú pháp cũ: arr.toString();
• Cú pháp mới: ${arr} Chuyển mảng thành chuỗi.

23. from() (ES6)

• Cú pháp cũ: [].slice.call("hello");
• Cú pháp mới: Array.from("hello"); Chuyển đổi iterable thành mảng.

24. isArray()

• Cú pháp cũ: obj instanceof Array;
• Cú pháp mới: Array.isArray(obj); Kiểm tra xem giá trị có phải là mảng hay không.

25. keys(), values(), entries()

• Cú pháp cũ: Vòng lặp thủ công.
• Cú pháp mới:

for (let [i,v] of arr.entries()) console.log(i,v);

Iterators cho chỉ số, giá trị, cặp khóa-giá trị.

Phương Thức Mảng Không Thay Đổi (ES2023+)

• toSorted() → Sắp xếp không thay đổi
• toReversed() → Đảo ngược không thay đổi
• with(index, value) → sao chép với thay thế. Các phương thức an toàn hơn so với các phương thức thay đổi truyền thống.

Câu Hỏi Thường Gặp

Q1. Những phương thức mảng nào phổ biến nhất trong JavaScript?
Push, pop, shift, unshift, map, filter, reduce, slice, splice, concat, includes.

Q2. Sự khác biệt giữa cú pháp cũ và mới của mảng là gì?
Cú pháp cũ sử dụng vòng lặp và các phương thức thay đổi, trong khi cú pháp mới (ES6+) sử dụng map, filter, spread và các phương thức không thay đổi (toSorted, with).

Q3. Làm thế nào để kiểm tra xem một giá trị có phải là mảng trong JavaScript?
Sử dụng Array.isArray(value) thay vì instanceof.

Q4. Các phương thức mảng không thay đổi là gì?
Các phương thức mới trong ES2023 như toSorted(), toReversed(), with() trả về một mảng mới thay vì sửa đổi mảng gốc.

Q5. Tại sao chúng ta nên ưu tiên cú pháp hiện đại?
Nó làm cho mã sạch hơn, chức năng hơn, không thay đổi và an toàn hơn cho các ứng dụng lớn.

JavaScript arrays rất mạnh mẽ, và với các tính năng hiện đại ES6+, việc làm việc với chúng dễ dàng hơn bao giờ hết. Từ push/pop đến flatMap, at(), toSorted, hướng dẫn này bao gồm tất cả các thao tác mảng cũ và mới — rất phù hợp cho việc học, phỏng vấn và phát triển chuyên nghiệp trong 2025.