Mảng trong Javascript

1. Khai báo mảng trong javascript

Thông thương chúng ta có hai cách thông thường để khai báo mảng đó là sử dụng từ khóa new Array() và sử dụng cặp dấu ngoặc vuông ([]).

var name_array = new Array();
// Hoặc
var name_array = new Array(1,2,3);

Hoặc khai báo bằng dấu ngoặc []

var name_array = [];
// hoặc
var name_array = [1,2,3];

Trong đó:

• name_array: Là tên mảng bao gồm các ký tự chữ cái(a-z, A-Z), chữ số(0-9), dấu gạch dưới(_). Lưu ý tên mảng không được bắt đầu bằng một chữ số.

Ví dụ: Chúng ta sẽ khai báo một mảng trong đó mỗi phần tử là một ngôn ngữ lập trình.

<script type="text/javascript">
	var languages = new Array("PHP", "ASP.NET", "C#", "C++", "MySQL");
	// hoặc
	var languages = ["PHP", "ASP.NET", "C#", "C++", "MySQL"];
</script>

Lưu ý: Mỗi giá trị của mảng được gọi là một "phần tử mảng" và mỗi phần tử mảng thì được xác định bởi một chỉ số. Phần tử mảng đầu tiên sẽ có chỉ số là 0, chỉ số của các phần tử mảng sẽ tăng dần theo thứ tự được khai báo.

2. Sử dụng mảng khi nào?

Có lẽ đây là câu hỏi khá hay khi mình mới học lập trình(Javascript). Thì mình nhận thấy việc sử dụng mảng trong các trường hợp nào thì rất dạng và khó xác định nhưng thông thưởng chỉ có hai trường hợp chủ yếu như sau.

• TH1: Sử dụng mảng để lưu trữ các giá trị thuộc cùng một thể loại
• TH2: Sử dụng mảng để lưu trữ các giá trị liên quan đến một đối tượng

Ví dụ:

<script type="text/javascript">
	// TH1
	var languages = new Array("PHP", "ASP.NET", "C#", "C++", "MySQL");
	// Th2
	var sinhvien = ["Mark", "1985", "Name", "Hà Nội", "Đi xe máy"];
</script>

3. Truy xuất các phần tử mảng

Thông thường, chúng ta truy cập vào phần tử mảng để.

• Lấy giá trị của phần tử mảng.
• Cập nhật giá trị cho phần tử mảng.

Để truy cập vào phần tử mảng thì ta sử dụng cú pháp như sau:

name_array[index]

Trong đó:

• name_array: Là tên mảng.
• index: Là chỉ số phần tử mảng bất kỳ

Ví dụ:

<script type="text/javascript">
	// Khai báo mảng
	var languages = new Array("PHP", "ASP.NET", "C#", "C++", "MySQL");
	
	// Lấy ra phần tử mảng ở vị trí thứ 2
	// Vì chỉ số index bắt đầu từ số 0
	var pos2 = languages[1];
	document.writeln('Phần tử thứ 2 có giá trị: '+pos2);
	
	// Lấy ra phần tử mảng ở vị trí thứ 2
	var pos4 = languages[3];
	document.writeln('Phần tử thứ 4 có giá trị: '+pos4);
</script>

Xem kết quả

Để cập nhật giá trị của một phần tử mảng bất kỳ ta sử dụng cú pháp như sau.

name_array[index]= value

Trong đó:

• name_array: Là tên mảng.
• index: Là chỉ số phần tử mảng bất kỳ
• value: Là giá trị cần cập nhật

Ví dụ: Cập nhật phần tử thứ 3 trong bảng languages[] là ngôn ngữ NodeJs.

<script type="text/javascript">
	// Khai báo mảng
	var languages = new Array("PHP", "ASP.NET", "C#", "C++", "MySQL");
	
	//Cập nhật phần tử thứ 3 trong bảng languages là ngôn ngữ NodeJs.
	// Vì chỉ số index bắt đầu từ số 0
	languages[2] = 'NodeJs';
</script>

Xem kết quả

Thêm chút là minh muốn bàn với các bạn là thêm, sửa được rồi giờ mình muốn xóa đi một phần tử mảng.

Trong javascript, để xóa một phần tử trong mảng ta có thể dùng hàm splice()

Ví dụ: Xóa phần tử mảng ở vị trí thứ 0

<script type="text/javascript">
	// Khai báo mảng
	var languages = new Array("PHP", "ASP.NET", "C#", "C++", "MySQL");
	
	// Xóa 1 phần tử tại vị trí 0
	languages.splice(0,1);
	
	// Output
	document.write(languages);
</script>

Xem kết quả

Hoặc chúng ta có thể xóa phần tử dựa vào giá trị của nó splice() kết hợp cùng với indexOf():

<script type="text/javascript">
	// Khai báo mảng
	var languages = new Array("PHP", "ASP.NET", "C#", "C++", "MySQL");
	
	// Xóa 1 phần tử có giá trị C#
	var deleteElem = 'C#';
	var i = languages.indexOf(deleteElem);
	if(i != -1){
		languages.splice(i,1);
	}
	
	// Output
	document.write(languages);
</script>

4. Mảng kết hợp" là gì !

- Mảng kết hợp là loại mảng mà các phần tử của nó không được xác định bởi chỉ số, mà được xác định bằng một cái tên (tên này do chúng ta tự đặt).

- Để khai báo một mảng kết hợp thì trước tiên ta phải khai báo một mảng rỗng, sau đó thêm từng phần tử vào mảng.

Cú pháp:

// Khai báo mảng trống
var name_array = [];

// Thêm phần tử mảng
name_array['key1'] = value1;
name_array['key2'] = value2;
name_array['key..n'] = valuen;

Trong đó:

• name_array: Là tên của mảng
• key1,key2,key..n: Là một cái tên đại diện do bạn tự đặt e.g: name, age, score, diem, abc...abc
• value1,value2,valuen: Giá trị của phần tử mảng tương ứng với key.

Ví dụ: Tạo một mảng kết hợp lưu trữ thông tin của sinh viên.

<script type="text/javascript">
	// Khai báo mảng trống
	var sinhvien = [];
	
	// Thêm phần tử mảng
	sinhvien['name'] = 'Bùi Ngọc Dương';
	sinhvien['gender'] = 'Nam';
	sinhvien['age'] = 20;
	sinhvien['city'] = 'Hà Nội';
</script>

Để truy cập vào phần tử của mảng kết hợp thì thay vì chỉ mục index ta dùng key của mảng.

Ví dụ: Hiển thị giá trị của phần tử có key = name của mảng sinh viên.

<script type="text/javascript">
	// Khai báo mảng trống
	var sinhvien = [];
	
	// Thêm phần tử mảng
	sinhvien['name'] = 'Bùi Ngọc Dương';
	sinhvien['gender'] = 'Name';
	sinhvien['age'] = 20;
	sinhvien['city'] = 'Hà Nội';
	
	// Lấy giá trị của phần tử mảng.
	document.writeln('Giá trị của phần tử mảng có key=name: '+sinhvien['name']);
</script>

Xem kết quả

Lưu ý:

- Mảng kết hợp hầu như không được hỗ trợ trong JavaScript.

- Do đó, ta không thể hiển thị một loạt các phần tử mảng bằng cách gọi tên mảng.

5. Mảng đa chiều trong Javascript

Javascript cũng giống các ngôn ngữ khác thì nó cũng hỗ trợ mảng đa chiều.

Thông thường thì mỗi phần tử mảng có thể là một chuỗi, số, biến. Nhưng nếu một phần tử bất kỳ của mảng là một mảng(Array) thì mảng(Cha) được gọi là mảng đa chiều.

Mảng đa chiều có thể là mảng hai chiều, ba chiều.... Nhưng các vị dụ trên gọi là mảng một chiều.

Ví dụ: Khai báo mảng 2 chiều.

<script type="text/javascript">
	// Khai báo mảng 2 chiều
        var languages = [
		'PHP',
		['MySQL','NoSQL'],
		['JQuery', 'angularJS', 'Mootools'],
		'HTML',
		'CSS'
	];
</script>

Ví dụ: Khai báo mảng 3 chiều.

<script type="text/javascript">
	// Khai báo mảng 3 chiều
	// Trong mảng 2 chiều NoSQL được tách thành mảng mới gồm Redis và MongoDB
	var languages = [
		'PHP',
		[
			'MySQL',
			['Redis', 'MongoDB']
		],
		['JQuery', 'angularJS', 'Mootools'],
		'HTML',
		'CSS'
	];
</script>

Truy xuất phần tử mảng đa chiều: Thì điều quan trọng ta cần xét đến là độ sâu(cấp) của mảng từ đó xác định mảng đó thuộc mảng mấy chiều(cấp).

Cú pháp:

name_array[chỉ số mảng cấp 1][chỉ số mảng cấp 2][...chỉ số mảng cấp n];

Ví dụ:

<script type="text/javascript">
	
	// Lấy giá trị MySQL trong mảng 2 chiều
	var a = languages[1][0];
	
	// Lấy giá trị MongoDB trong mảng 3 chiều
	var a = languages[1][1][1];
</script>

6. Tổng kết.

Thì trên đây mình đã trình bày một số ít kiến thức về mảng trong Javascipt cho các bạn tham khảo. Nói chung thì kiến thức về mảng cũng rất nhiều nên để tìm hiểu sâu hơn nữa thì các bạn cũng cần có thời gian và kinh nghiệm thực chiến để đúc kết được. Trong bài tiếp theo mình sẽ nói thêm một số hàm xử lý mảng trong Javascript.