Mảng trong JavaScript

3. 11 hàm xử lý mảng trong JavaScript thông dụng

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

Bạn đang đọc: Mảng trong JavaScript

let sinhVien = [” Trần Văn A “, ” Nguyễn Văn B “, ” Ngô Minh C “];
 

/ / Tính số thành phần trong mảng

let soPhanTuTrongMang = sinhVien.length;
 

/ / In tác dụng ra màn hình hiển thị console

console.log(soPhanTuTrongMang); / / Kết quả : 3
 

Bạn cũng hoàn toàn 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:trong JavaScript có công dụng gộp tổng thể các thành phần 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. 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 thi gộp các thành phần thành một chuỗi như sau :

/ / Gộp các thành phần mảng thành một chuỗi duy nhất

let chuoi1 = sinhVien.join();

/ / In hiệu quả ra màn hình hiển thị 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 hiển thị 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ỏ thành phần sau cuối khỏi mảng

let x = sinhVien.pop();

/ / In mảng ra màn hình hiển thị 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ề thành phần vừa bị vô hiệu. 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 thành phần 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 hiển thị 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 thành phần đầu mảng

let x = sinhVien.shift();

/ / In mảng ra màn hình hiển thị 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 thành phần vừa bị vô hiệu 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 thành phần đầu mảng

let x = sinhVien.unshift(” NIIT “);

/ / In mảng ra màn hình hiển thị console

console.

log

Xem thêm: Hỏi đáp Y học: Bệnh cơ loạn dưỡng Duchenne

(sinhVien);
 

Kết quả :

[“NIIT”, “Trần Văn A”, “Nguyễn Văn B”, “Ngô Minh C”]
 

Gần tương tự như như hàm push ( ), hàm unshift ( ) sau khi thêm thành phần 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 thành phần 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 thành phần vào từ vị trí thứ 1 và đẩy các thành phần ra sau ( Vì tất cả chúng ta truyền tham số thứ 2 là 0 nên không xóa đi thành phần 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, tất cả chúng ta hoàn toàn có thể sẽ cần tạo một biến để tàng 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 hiệu quả ra màn hình hiển thị 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 thi 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 tác dụng ra màn hình hiển thị

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 hiệu quả ra màn hình hiển thị

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 hiển thị 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 hiển thị console

console.

log

Xem thêm: Chuyển đổi số là gì?

(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”]
 

Source: https://suachuatulanh.org
Category : Hỏi Đáp Chuyên Gia