hao tác với mảng trong javascript - Javascript căn bản

Việc xử lý mảng trong javascript cũng quan trọng như xử lý mảng trong PHP vậy, bởi vì khi chúng ta dùng javascript để xử lý DOM thì kết quả mà chúng ta lấy được là một mảng các Element HTML và sẽ lặp element đó rồi xử lý. Chính vì điều này nên hôm nay mình viết một bài xử lý mảng trong javascript luôn để trình bày cho các bạn dễ nắm bắt hơn.

Trước hết chúng ta tìm hiểu khái niệm mảng là gì đã nhé. Mảng là một tập hợp các phần tử lại và mỗi phần tử sẽ được đánh dấu một vị trí trong tập hợp đó. Trong javascript nếu mảng có 10 phần tử thì các phần tử sẽ được đánh dấu từ 0 -9.

1. Khai báo mảng trong javascript

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 ([]).

Khai báo với từ khóa new Arrray()

Cú pháp:

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

Với cách hai thì ta khởi tạo giá trị lúc khai báo luôn.

Khai báo với cặp dấu ngoặc vuông ([])

Cú pháp:

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

Tương tự cách hai là ta khai báo và khởi tạo giá trị luôn.

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

Để truy xuất đến phần tử của một mảng chúng ta dùng cú pháp tenmang[vitri]. Ví dụ:

var t = new Array(1,2,3);
alert(t[0]); // kết quả là 1
alert(t[1]); // kết quả là 2
alert(t[2]); // kết quả là 3

Như vậy phần tử đầu tiên sẽ có số chỉ mục là 0, phần tử thứ hai là 1, ... phần tử thứ n là n-1.

3. In mảng ra trình duyệt và console

Hàm array.join()

Để hiển thị các phần tử ra ngoài trình duyệt chúng ta sẽ sử dụng hàm array.join(). Ví dụ:

var t = new Array(1,2,3);
document.write(t.join()); // kết quả 1,2,3
document.write(t.join('-')); // kết quả 1-2-3

Như vậy hàm join này được tích hợp vào đối tượng mảng trong javascript và nó có một tham số truyền vào, nếu ta không truyền gì vào thì mặc định nó lấy dấu phẩy để ngăn giữa các giá trị khi in lên trình duyệt.

Hàm console.log():

Ngoài ra chúng ta có thêm một hàm rất hay dùng để debug đó là console.log(). Các bạn hãy cài đặt Firebug trên firefox hoặc dùng chế độ "kiểm tra phần tử" có sẵn trên trình duyệt (chrome tương tự), sau đó chuyển vào mục console như hình dưới đây:

Nêu bạn code bị lỗi cú pháp hoặc một lỗi bất kì liên quan đến javascript thì nó sẽ hiển thị ở ô này nên bạn phải dùng nó để kiểm tra nếu viết mã javascript mà không thấy hoạt động nhé. Như trong hình chữ đỏ là lỗi, chữ vàng là cảnh báo.

Ví dụ:

var t = new Array(1,2,3);
console.log(t);

Chạy lên giao diện trong console sẽ như sau:

4. Sử dụng vòng lặp để lặp mảng trong javascript

Phần này là quan trọng nhất đấy nhé, chúng ta sẽ học cách sử dụng các vòng lặp đã học để lặp mảng. Nhưng trước tiên chúng ta tìm hiểu cách đếm tổng số phần tử trong mảng như sau:

Để đếm tổng số phần tử của một mảng chúng ta sẽ dùng thuộc tính length của nó. Ví dụ:

var t = new Array(1,2,3);
alert(t.length);<br>

Lặp mảng với vòng lặp for

Để lặp mảng với vòng lặp for thì chúng ta phải dùng thuộc tính length như trên để đếm tổng số phần tử, sau đó ở mỗi vòng lặp chúng ta sử dụng cú pháp truy xuất đến phần tử của mảng ở phần 2 để xử lý. Ví dụ:

var name_array = [1,2,3];
for (var i = 0; i < name_array.length; i++){
    document.write(name_array[i]);
}

Lặp mảng với vòng lặp while

Tương tự để lặp với vòng lặp while chúng ta sẽ khai báo một biến index để lưu vị trí đang lặp. Ví dụ:

var name_array = [1,2,3];
var index = 0;
while (index < name_array.length){
    document.write(name_array[index]);
    index++;
}

Riêng đối với vòng lặp do while thì không khuyến khích sử dụng để lặp mảng, lý do nó vòng lặp do while luôn luôn lặp ít nhất một lần nên trong trường hợp mảng cần lặp rỗng thì sẽ bị báo lỗi ngay.

5. Lời kết

Bài này trọng tâm là cách dùng vòng lặp for để lặp mảng vì khi làm ứng dụng thực tế đa số chúng ta sư dụng vòng lặp for để lặp. Và một lưu ý nữa là không nên dùng vòng lặp do while để lặp mảng nhé, lý do thì trong bài đã đề cập tới rồi. Bài tiếp theo chúng ta tìm hiểu một số hàm xử lý mảng trong javascript