Mảng trong JavaScript

Ngày đăng: 29/09/2020   -    Cập nhật: 02/10/2020


Mảng (Array) là một kiểu dữ liệu được sử dụng rất rộng rãi trong lập trình JavaScript. Hôm nay chúng ta cùng tìm hiểu cách khai báo, khởi tạoxử lý mảng bạn nhé.

Mảng trong JavaScript

Mảng trong JavaScript

1. Mảng trong JavaScript là gì?


Mảng là một kiểu dữ liệu đặc biệt, có thể chứa nhiều hơn một giá trị vào một thời điểm.

Khi chưa biết đến mảng, nếu bạn có một danh mục sản phẩm (ví dụ như sách họ tên sinh viên), bạn có thể lưu trữ lại trong một danh sách đơn như này:



// Trước khi biết tới mảng
let SV_1 = "Trần Văn A";
let SV_2 = "Nguyễn Văn B";
let SV_3 = "Ngô Minh C A";
 

Lưu trữ vậy thì cũng được đó, nhưng mà danh sách là 1.000, hay 100.000 sinh viên thì sao?

Chẳng lẽ ngồi gõ từng biến SV_1, SV_2, SV_3.... SV_100000 ?

Không, chúng ta sẽ không làm như thế.

Lập trình sinh ra để tối ưu hóa các công việc lặp đi lặp lại cơ mà.

Giải pháp ở đây là sử dụng đến mảng, ví dụ như thế này:



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

Với mảng, bạn không tạo từng biến như trên nữa, vừa tiết kiệm bộ nhớ lại có thể truy cập đến bất cứ phần tử nào trong mảng một cách nhanh chóng.

Mảng có thể lưu trữ nhiều giá trị trong một biến duy nhất bạn có thể truy cập gái trị đó bằng cách liên kết với chỉ số (index).


2. Cách khai báo, khởi tạo mảng trong JS


Mình có 3 cách tạo mảng trong JavaScript (thực ra thì JavaScript hỗ trợ 3 cách chứ mình đâu tự tạo được 😊)))):

  • Khai báo và khởi tạo dữ liệu mảng
  • Khai báo và sau đó khởi tạo dữ liệu mảng
  • Khai báo mảng thông qua đối tượng Array

2.1. Khai báo và khởi tạo dữ liệu mảng luôn


Cú pháp:


let tenMang = [giaTri0giaTri1giaTri2giaTriN, ...];
 

Ví dụ tạo một mảng có tên là sinhVien:


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

Truy cập vào giá trị của mảng:


// Truy cập giá trị của mảng
console.log(sinhVien[0]); // Trần Văn A
console.log(sinhVien[1]); // Nguyễn Văn B
console.log(sinhVien[2]); // Ngô Minh C
console.log(sinhVien[3]); //
console.log(sinhVien[4]); // underfined
 

Lưu ý: Mảng đếm từ 0 nên phần tử đầu tiên của mảng có index là 0.

Ví dụ đánh số chỉ mục (index) trong mảng

Ví dụ đánh số chỉ mục (index) trong mảng

Do đó, trong ví dụ trên mình đã tạo ra mảng có tên là sinhVien và truy xuất giá trị của phần tử của mảng sinhVien. sinhVien[0] chính là phần tử đầu tiên của mảng có giá trị là: Trần Văn A

2.1. Khai báo mảng rồi sau đó khởi tạo dữ liệu


Cú pháp:


// Khai báo mảng
let tenMang = [];

// Khởi tạo dữ liệu mảng
tenMang[0] = giaTri0;
tenMang[1] = giaTri1;
tenMang[2] = giaTri2;
...
tenMang[N] = giaTriN;
 

Ví dụ:


// Khai báo một mảng
let sinhVien = [];

// Khởi tạo dữ liệu cho mảng sinhVien
tenMang[0] = "Trần Văn A";
tenMang[1] = "Nguyễn Văn B";
tenMang[2] = "Ngô Minh C";
tenMang[3] = "";
 

Bây giờ chúng ta thử in mảng ra màn hình console xem như thế nào nhé:


// In mảng ra màn hình console
console.log(sinhVien);
 

Kết quả nhận được là:


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

2.2. Khai báo mảng bằng đối tượng Array()


Cú pháp:


tenMang = new Array();
 

Ví dụ:

Khai báo một mảng có tên là sinhVien thông qua đối tượng Array:



// Khai báo mảng bằng đối tượng Array
sinhVien = new Array();
 

Khai báo và khởi tạo dữ liệu ban đầu luôn:


// Khai báo mảng và khởi tạo dữ liệu
sinhVien = new Array("Trần Văn A""Nguyễn Văn B""Ngô Minh C");
 

Và chúng ta cũng có thể làm như thế này:


// Khai báo mảng bằng đối tượng Array
sinhVien = new Array();

// Khởi tạo dữ liệu cho mảng
sinhVien[0] = "Trần Văn A";
sinhVien[1] = "Nguyễn Văn B";
sinhVien[2] = "Ngô Minh C";
 

> Lưu ý: Khi sử dụng từ khóa let nên không cho phép khai báo trùng tên, thế nên  bạn sử dụng tên mảng khác đi nhé. Mình sử dụng như vậy để nhất quán, giúp bạn dễ theo dõi thôi.

> Lưu ý: Bạn nên tránh sử dụng từ khóa new để khai báo mảng. Hay nói cách khác là không sử dụng hàm tạo Array() để khai báo mảng trong JavaScript.


let mangDemo = new Array();     // Bad
let mangDemo = [];              // Good
 

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ế, lengththuộ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(giaTri1giaTri2giaTriN,...);
 

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(giaTri1giaTri2giaTriN,...);
 

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(viTriBatDausoPhanTuMuonXoagiaTri1giaTri2, ...);
 

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(viTriBatDauviTriKetThuc);
 

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"]
 

Tổng kết


Vậy là mình vừa hướng dẫn bạn một số điều cơ bản về mảng trong JavaScript, các bài viết sau sẽ sử dụng và nâng cao hơn.

Trong bất kỳ ngôn ngữ lập trình nào dù là JS, PHP hay Java ... thì mảng đều là phần kiến thức rất quan trọng.

Do đó, bạn hãy đọc lại giải thích và luyện tập các cách khai báo, truy xuất đến các phần tử và các hàm làm việc với mảng nhé.

Hẹn gặp lại bạn ở bài học tiếp theo.


Bình luận Facebook
Đăng ký tư vấn
Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký
Được cập nhật các ưu đãi sớm nhất
Hotline: 0383180086
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội
top
Đóng lại Đăng ký học tại NIIT - ICT Hà Nội
6260+ học viên đã theo học tại NIIT - ICT Hà Nội và có việc làm tốt trong ngành lập trình. Nắm lấy cơ hội ngay hôm nay!
Chọn khóa học
  • KHÓA HỌC LẬP TRÌNH FRONT END VỚI REACT.JS
  • KHÓA HỌC LẬP TRÌNH PHP WEB
  • Khóa học PHP Full stack [2023] cho người mới bắt đầu
  • Khóa học BIG DATA với Hadoop và Spark
  • Khóa học Lập trình Android tại Hà Nội
  • [Tuyển sinh 2023] Lập trình viên Quốc tế DigiNxt
  • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại Hà Nội
  • LẬP TRÌNH GAME
    • Khóa học Lập trình Game Unity
  • LẬP TRÌNH WEB FRONT END
    • KHÓA HỌC PYTHON HƯỚNG ĐỐI TƯỢNG
    • KHÓA HỌC ANGULAR & TYPESCRIPT (FRONT END)
  • LẬP TRÌNH WEB BACK END
    • LẬP TRÌNH JAVA WEB VỚI FRAME WORK
    • Lập trình Web với Django
    • Lập trình PHP với Laravel Framework
  • CHƯƠNG TRÌNH ĐÀO TẠO ỨNG DỤNG CÔNG NGHỆ
    • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại TP HCM
  • LẬP TRÌNH WEB FULL STACK
    • Khóa học Java Full stack (IJFD)
  • LẬP TRÌNH MOBILE
    • FRONT-END VỚI REACTJS VÀ REACT NATIVE
    • Lập trình Android Nâng cao
  • ĐÀO TẠO CHO DOANH NGHIỆP
    • KHÓA HỌC BUSINESS ANALYSIC TỪ CƠ BẢN ĐẾN NÂNG CAO 2023
    • Khóa học Magento: Làm chủ CMS TMĐT lớn nhất
    • Khóa học IOT: Xây dựng Sản phẩm IOT với Raspberry Pi
    • Khóa học Automation Testing Chuyên nghiệp
  • KHÓA HỌC DỰ ÁN
    • Học sử dụng bộ Office: Word, Excel, Power Point, Mail chuyên nghiệp
  • KHÓA HỌC KHÁC
    • VBA Excel Toàn Tập (Cơ Bản - Nâng Cao)
    • VBA Excel Nâng cao
    • Khóa học JMeter: Performance Testing
    • Khóa học Tester đạt chuẩn Quốc tế ISTQB Foundation Level
    • Khoá Học Tester đạt chuẩn quốc tế ISTQB Advanced Level
Bạn chưa chọn khóa học cần đăng ký
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Đăng ký học thành công!
Cảm ơn bạn đã đăng ký học tại NIIT - ICT HÀ NỘI!