Phía dưới là bảng tra cứu đầy đủ 36 phương thức Array của JavaScript, được nhóm theo 5 hành động cơ bản: thêm – xoá – sửa – tra cứu – kiểm tra. Bên cạnh đó, bài viết cũng liệt kê các API đã lỗi thời hoặc không còn được khuyên dùng, cùng với những phương thức "phi phá hoại" mới trong ES2023 (toReversed(), toSorted(), toSpliced(), with()) để thay thế.
Bảng tham khảo nhanh: 36 phương thức Array
| Nhóm | Phương thức | Tham số chính | Giá trị trả về |
|---|---|---|---|
| Thêm | concat | ...arrays | Mảng mới sau khi nối |
| push | ...items | Độ dài mới của mảng | |
| unshift | ...items | Độ dài mới của mảng | |
| Xoá | pop | – | Phần tử bị loại bỏ |
| shift | – | Phần tử bị loại bỏ | |
| slice | start?, end? | Mảng cắt lát (shallow copy) | |
| splice | start, deleteCount?, ...items | Mảng chứa các phần tử đã xoá | |
| Sửa | from | arrayLike, mapFn? | Mảng mới |
| of | ...items | Mảng mới | |
| copyWithin | target, start, end? | Mảng đã bị sửa (cùng tham chiếu) | |
| fill | value, start?, end? | Mảng đã bị sửa (cùng tham chiếu) | |
| flat | depth? | Mảng đã "dẹp" (flatten) | |
| sort | compareFn? | Mảng đã sắp xếp (cùng tham chiếu) | |
| reverse | – | Mảng đảo ngược (cùng tham chiếu) | |
| Chuyển đổi | join | separator? | Chuỗi |
| toString | – | Chuỗi | |
| toLocaleString | – | Chuỗi địa phương hoá | |
| Tra cứu / Duyệt | forEach | callback | undefined |
| map | callback | Mảng kết quả ánh xạ | |
| flatMap | callback | Mảng kết quả ánh xạ + flatten 1 cấp | |
| filter | callback | Mảng kết quả lọc | |
| find | callback | Phần tử tìm thấy hoặc undefined | |
| findIndex | callback | Chỉ số hoặc -1 | |
| indexOf | search, fromIndex? | Chỉ số hoặc -1 | |
| lastIndexOf | search, fromIndex? | Chỉ số hoặc -1 | |
| at | index | Phần tử hoặc undefined | |
| keys / values / entries | – | Iterator | |
| Kiểm tra | includes | search, fromIndex? | boolean |
| some | callback | boolean | |
| every | callback | boolean | |
| Array.isArray | value | boolean | |
| Gộp / Tính toán | reduce | callback, initial? | Kết quả cuối cùng |
| reduceRight | callback, initial? | Kết quả cuối cùng (duyệt phải → trái) |
Phân loại giá trị trả về
- Mảng mới:
map,filter,slice,concat,flat,flatMap,from,of→ không thay đổi mảng gốc. - Mảng gốc:
push,pop,shift,unshift,splice,sort,reverse,copyWithin,fill→ phá hoại (mutate) mảng gốc. - boolean:
includes,some,every,Array.isArray. - Chỉ số / phần tử:
indexOf,lastIndexOf,findIndex,find,at. - Chuỗi:
join,toString,toLocaleString. - Iterator:
keys,values,entries. - Giá trị tích luỹ:
reduce,reduceRight. - undefined:
forEach.
Những API & kỹ thuật nên tránh
| Kỹ thuật / API | Vấn đề | Thay thế hiện đại |
|---|---|---|
Array.observe, Array.unobserve | Đã gỡ bỏ hoàn toàn | Proxy |
Gọi phương thức dạng staticArray.slice(arr, …) | Không còn tồn tại | arr.slice(…) |
for…in trên mảng | Duyệt cả prototype, thứ tự không đảm bảo | for…of, for, forEach |
reverse(), sort(), splice() | Phá hoại mảng gốc → khó debug trong React/Vue | toReversed(), toSorted(), toSpliced() |
Gán trực tiếp arr[i] = x | Phá hoại mảng gốc | arr.with(i, x) |
Chuỗi filter().map().slice() dài | Tạo nhiều mảng trung gian, tốn bộ nhớ | Dùng vòng lặp thuần hoặc iterator helpers (lazy) |
flatMap() – ánh xạ & dẹp trong một lần duyệt
const nums = [1, 2, 3];
// ánh xạ thành [x, x*2] rồi dẹp 1 cấp
const res = nums.flatMap(n => [n, n * 2]);
console.log(res); // [1, 2, 2, 4, 3, 6]
// so với map().flat()
const res2 = nums.map(n => [n, n * 2]).flat();
console.log(res2); // cùng kết quả nhưng chậm hơn
Ứng dụng thực tế
// 1. Tách câu thành từ
const sentences = ['Xin chào thế giới', 'JavaScript thật tuyệt'];
const words = sentences.flatMap(s => s.split(' '));
console.log(words); // ["Xin","chào","thế","giới","JavaScript","thật","tuyệt"]
// 2. Gộp tags từ danh sách user
const users = [
{ name: 'An', tags: ['js', 'web'] },
{ name: 'Bình', tags: ['python', 'data'] },
{ name: 'Chi', tags: [] }
];
const allTags = users.flatMap(u => u.tags);
console.log(allTags); // ["js","web","python","data"]
reduce() – gộp mảng thành một giá trị
const carts = [
{ item: 'Book', price: 120 },
{ item: 'Pen', price: 15 },
{ item: 'Ruler', price: 5 }
];
// Tính tổng giá trị
const total = carts.reduce((sum, { price }) => sum + price, 0);
console.log(total); // 140
// Gom thành object
const byItem = carts.reduce((acc, { item, price }) => {
acc[item] = price;
return acc;
}, {});
console.log(byItem); // { Book: 120, Pen: 15, Ruler: 5 }
Lưu ý với initialValue
const empty = [];
// ❌ empty.reduce((a, b) => a + b); // TypeError
// ✅
const safe = empty.reduce((a, b) => a + b, 0);
console.log(safe); // 0