Như bạn đã biết, mảng là một kiểu dữ liệu rất nhiều hữu ích, có rất nhiều việc cần dùng đến. Vì thế, JavaScript cung cấp sẵn một số hàm xử lý mảng giúp giảm thời gian làm việc.
Bên dưới đây là một số hàm xử lý mảng thông dụng nhất.
Hãy cùng học và luyện tập sử dụng chúng nhé.
3.1. Thuộc tính length: Tính số phần tử trong mảng
Đây không được coi là một hàm nhưng nó cực kỳ quan trọng. Do đó mình sẽ giới thiệu đầu tiên.
Thực tế, length là thuộc tính trong mảng, nó trả về số lượng phần tử đang có trong mảng.
Cách thực hiện như trong ví dụ sau:
// Tạo một mảng đơn giản
let sinhVien = ["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C"];
// Tính số phần tử trong mảng
let soPhanTuTrongMang = sinhVien.length;
// In kết quả ra màn hình console
console.log(soPhanTuTrongMang); // Kết quả: 3
Bạn cũng có thể đặt nó vào trong một hàm khác, như thế này;
console.log(sinhVien.length); // Kết quả: 3
3.2. Hàm join(): Gộp tất cả các phần tử trong mảng
Hàm join() trong JavaScript có tác dụng gộp tất cả các phần tử trong mảng thành một chuỗi. Có thể hiểu hàm này ngược lại với hàm split() trong String.
> Đọc thêm: String trong JavaScript
Chúng ta có một mảng:
let sinhVien = ["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C", ""];
Ta thực hiện gộp các phần tử thành một chuỗi như sau:
// Gộp các phần tử mảng thành một chuỗi duy nhất
let chuoi1 = sinhVien.join();
// In kết quả ra màn hình console
console.log(chuoi1);
// Kết quả: Trần Văn A,Nguyễn Văn B,Ngô Minh C,
Theo mặc định, các phần tử sẽ được phân tách bởi dấu phảy ,
Bởi vì phần tử cuối cùng là một rỗng nên chúng ta vẫn có dấu phân tách ở cuối như kết quả trên.
Tuy nhiên, bạn cũng có thể sửa đổi nó bằng cách truyền dấu phân tách vào hàm join() như sau:
console.log(sinhVien.join(' - '));
// Kết quả: Trần Văn A - Nguyễn Văn B - Ngô Minh C -
3.3. Hàm pop(): Loại bỏ phần tử ở cuối mảng
Hàm pop() trong JavaScript loại bỏ phần tử ở cuối màng và đồng thời trả về phần tử vừa bị loại bỏ đó.
Ví dụ:
let sinhVien = ["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C"];
// In mảng ra màn hình console
console.log(sinhVien);
Kết quả ta được:
["Trần văn A", "Nguyễn Văn B", "Ngô Minh C"]
Bây giờ ta sử dụng hàm pop() với kỳ vọng là xóa đi phần tử cuối cùng trong mảng sinhVien:
// Loại bỏ phần tử cuối cùng khỏi mảng
let x = sinhVien.pop();
// In mảng ra màn hình console
console.log(sinhVien);
Kết quả ta được:
["Trần Văn A", "Nguyễn Văn B"]
Như đã nói ở trên, hàm pop() sẽ trả về phần tử vừa bị loại bỏ. Do đó, ta thử kiểm tra xem thế nào nhé:
console.log(x);
Kết quả:
Ngô Minh C
Bạn đã hiểu cách sử dụng hàm pop() chưa?
Nếu chưa thì luyện tập lại vài lần nhé.
Loại bỏ thì ok rồi, nhưng nếu muốn thêm phần tử vào cuối mảng thì sao?
3.4. Hàm push(): Thêm phần tử vào cuối mảng
Hàm push() trong JavaScript được sử dụng để thêm phần tử vào cuối mảng, sau khi thay đổi mảng nó sẽ trả về độ dài mới của mảng.
Cú pháp:
tenMang.push(giaTri1, giaTri2, giaTriN,...);
Trong đó:
-
tenMang: là tên mảng cần thêm các phần tử vào
-
giaTri1, giaTri2, giaTriN ... là các phần tử cần thêm vào cuối mảng
Ví dụ:
let sinhVien = ["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C"];
// Thêm phần tử vào cuối mảng
let x = sinhVien.push("NIIT", "Học Lập trình");
// In mảng ra màn hình console
console.log(sinhVien);
Kết quả ta được:
["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C", "NIIT", "Học Lập trình"]
Ok, như đã nói, sau khi thêm danh sách các phần tử vào cuối mảng thì hàm push() sẽ trả về độ dài mới của mảng.
Bây giờ chúng ta thử xem biến x có giá trị gì nhé.
// Độ dài mới của mảng
console.log(x); // Kết quả: 5
Thử chạy ngay ví dụ trong IDE (hoặc trình soạn thảo) của bạn để kiểm chứng nhé.
Hãy nhớ, học lập trình phải vừa học kiến thức, vừa thực hành ngay và luôn.
3.5. Hàm shift(): Xóa phần tử đầu mảng
Ngược lại với pop(), hàm shift() trong JavaScript sẽ xóa phần tử đầu mảng, đồng thời trả về phần tử vừa bị loại bỏ đó.
Ví dụ:
let sinhVien = ["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C"];
// Xóa phần tử đầu mảng
let x = sinhVien.shift();
// In mảng ra màn hình console
console.log(sinhVien);
Kết quả:
["Nguyễn Văn A", "Ngô Minh C"]
Bây giờ, thử kiểm tra xem biến x có đang chứa phần tử vừa bị loại bỏ không nhé:
console.log(x);
Kết quả đúng như mong đợi:
Trần Văn A
3.6. Hàm unshift() thêm một hoặc nhiều phần tử vào đầu mảng
Cú pháp hàm unshift():
tenMang.unshift(giaTri1, giaTri2, giaTriN,...);
Trong đó:
-
tenMang: là tên của mảng cần thêm phần tử
-
giaTri1, giaTri2, giaTriN là danh sách các phần tử cần thêm vào đầu mảng
Ví dụ:
let sinhVien = ["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C"];
// Xóa phần tử đầu mảng
let x = sinhVien.unshift("NIIT");
// In mảng ra màn hình console
console.log(sinhVien);
Kết quả:
["NIIT", "Trần Văn A", "Nguyễn Văn B", "Ngô Minh C"]
Gần tương tự như hàm push(), hàm unshift() sau khi thêm phần tử vào đầu mảng, nó cũng sẽ trả về độ dài mới của mảng.
// Độ dài mới của mảng
console.log(x); // Kết quả: 4
3.7. Hàm splice(): Chèn phần tử vào vị trí chỉ định
Chúng ta đã biết thêm phần tử vào đầu và cuối mảng. Câu hỏi đặt ra là có thể thêm phần tử vào giữa mảng, ở vị trí chỉ định được không?
Câu trả lời là hoàn toàn được với hàm splice().
Cú pháp hàm splice() như sau:
tenMang.splice(viTriBatDau, soPhanTuMuonXoa, giaTri1, giaTri2, ...);
Trong đó:
-
tenMang: Là tên của mảng mà bạn muốn thêm phần tử vào
-
viTriBatDau: Là vị trí bắt đầu thêm phần tử vào mảng (Nhớ là vị trí phần tử trong mảng bắt đầu đếm từ 0 nhé)
-
soPhanTuMuonXoa: Là số phần tử bạn muốn xóa. Nếu không thì để là 0
-
giaTri1, giaTri2... : Là các giá trị bạn muốn thêm vào mảng
Ví dụ:
let sinhVien = ["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C"];
// Thêm phần tử vào từ vị trí thứ 1
sinhVien.splice(1,0, "NIIT", "Học lập trình");
console.log(sinhVien);
Kết quả nhận được là:
["Trần Văn A", "NIIT", "Học lập trình", "Nguyễn Văn B", "Ngô Minh C"]
Như bạn thấy đó, hàm splice() ở trên thêm 2 phần tử vào từ vị trí thứ 1 và đẩy các phần tử ra sau (Vì chúng ta truyền tham số thứ 2 là 0 nên không xóa đi phần tử nào)
3.8. Hàm concat(): Nối 2 mảng lại với nhau
Hàm concat() trong JavaScript cho phép chúng ta nối 2 mảng lại với nhau.
Cú pháp:
tenMang1.concat(tenMang2)
Sử dụng hàm concat() trên, mảng tenMang2 sẽ được thêm vào cuối của mảng tenMang1. Kết quả sẽ trả về một mảng mới.
Do đó, muốn nhận mảng mới, chúng ta có thể sẽ cần tạo một biến để lưu trữ nó.
Ví dụ:
let sinhVien = ["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C"];
let niit = ["NIIT", "Học lập trình"]
// Ghép mảng sinhVien với mảng niit
// Đồng thời gán cho mảng mangMoi
let mangMoi = sinhVien.concat(niit);
// In kết quả ra màn hình console
console.log(mangMoi);
Kết quả:
["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C", "NIIT", "Học lập trình"]
Hàm concat() thì không thay đổi mảng ban đầu. Do đó, mảng sinhVien hay niit vẫn giữ nguyên như lúc được khởi tạo.
3.9. Hàm slice(): Cắt ra một mảng
Hàm slice() được sử dụng để trích xuất (cắt) ra một mảng con từ mảng cho sẵn.
Nó cho phép bạn truyền 2 tham số để xác định vị trí cần trích xuất.
Cú pháp:
mangBanDau.slice(viTriBatDau, viTriKetThuc);
Trong đó:
-
mangBanDau: Là mảng ban đầu mà ta sẽ trích xuất từ nó
-
viTriBatDau: Vị trí bắt đầu cắt (index)
-
viTriKetThuc: Vị trí kết thúc (Không bao gồm phần tử ở vị trí đó).
Ta sẽ thực hiện ví dụ để hiểu rõ hơn hàm slice() này:
// Khai báo, khởi tạo mảng
let sinhVien = ["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C", "NIIT", "Học lập trình"];
// Thực hiện cắt mảng
let mangDuocTrichXuat = sinhVien.slice(1,3);
// In kết quả ra màn hình
console.log(mangDuocTrichXuat);
Kết quả ta được:
["Nguyễn Văn B", "Ngô Minh C"]
Như bạn thấy, ta truyền 2 tham số là 1 và 3 vào hàm slice(). Và ta được kết quả nhận được không bao gồm phần tử ở vị trí có chỉ số index bằng 3.
> Lưu ý: Phương thức slice() không thay đổi mảng ban đầu.
Nếu bạn bỏ quên tham số thứ hai thì nó tự động cắt đến cuối mảng, như sau:
// Khai báo, khởi tạo mảng
let sinhVien = ["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C", "NIIT", "Học lập trình"];
let mangDuocTrichXuat = sinhVien.slice(1);
// In kết quả ra màn hình
console.log(mangDuocTrichXuat);
Kết quả:
["Nguyễn Văn B", "Ngô Minh C", "NIIT", "Học lập trình"]
3.10. Hàm sort(): Sắp xếp mảng
Hàm sort() trong JavaScript có tác dụng sắp xếp lại mảng theo chiều tăng dần, nếu là số thì từ bé đến lớn, nếu là ký tự thì xếp từ a - z.
Cú pháp:
tenMang.sort();
Ví dụ:
// Khai báo, khởi tạo mảng
let sinhVien = ["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C", "NIIT", "Học lập trình"];
// Sắp xếp mảng
sinhVien.sort();
// In mảng đã sắp xếp ra màn hình console
console.log(sinhVien);
Kết quả ta nhận được:
["Học lập trình", "NIIT", "Nguyễn Văn B", "Ngô Minh C", "Trần Văn A"]
3.11. Hàm reverse(): Đảo ngược mảng
Hàm reverse() có tác dụng đảo ngược vị trí các phần tử của mảng (lưu ý là đảo ngược chớ không phải là sắp xếp ngược lại của hàm sort() nha các bạn).
Cú pháp:
tenMang.reverse();
Ví dụ:
// Khai báo, khởi tạo mảng
let sinhVien = ["Trần Văn A", "Nguyễn Văn B", "Ngô Minh C", "NIIT", "Học lập trình"];
// Đảo ngược mảng
sinhVien.reverse();
// In mảng đã đảo ngược ra màn hình console
console.log(sinhVien);
Kết quả ta được:
["Học lập trình", "NIIT", "Ngô Minh C", "Nguyễn Văn B", "Trần Văn A"]