Categories JavaScript

Mảng (Array) trong JavaScript

Mảng trong JavaScript được sử dụng để lưu trữ nhiều giá trị trong một biến duy nhất.

Ví dụ

var cars = ["Saab", "Volvo", "BMW"];

Mảng là gì?

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

Nếu bạn có một danh mục sản phẩm (ví dụ như danh sách tên ô tô), bạn có thể lưu giữ từng loại trong một danh sách các biến đơn giống như thế này:

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

Tuy nhiên nếu bạn cần một vòng lặp qua các loại ô tô và cần tìm kiếm một loại nào đó? Và nếu không phải bạn có 3 ô tô mà là 300 thì làm thế nào?

Giải pháp là dùng mảng!

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


Tạo mảng

Cách dễ nhất để khai báo mảng giống như dưới đây.

Cú pháp:

var array-name = [item1, item2, ...];

Ví dụ

var cars = ["Saab", "Volvo", "BMW"];

Khoảng trống và xuống dòng không quan trọng. Một khai báo có thể được chia ra trên nhiều dòng:


Ví dụ

var cars = [
 "Saab",
 "Volvo",
 "BMW"
 ];

Không bao giờ thêm dấu phẩy đằng sau phần tử cuối cùng (ví dụ “BMW”,). Điều này có thể tạo ra các hiệu ứng không tốt trên các trình duyệt.


Sử dụng từ khoá new trong JavaScript

Ví dụ dưới đây cũng dùng để tạo Mảng và gán giá trị cho nó:

Ví dụ

var cars = new Array("Saab", "Volvo", "BMW");

Hai ví dụ trên hoàn toàn giống nhau về mặt giá trị. Thực ra bạn không cần sử dụng new Array() để tạo mảng.

Để cho vấn đề trở nên đơn giản, dễ đọc và tăng tốc độ xử lý, bạn hãy sử dụng cách đầu tiên nhé, cách mà không cần dùng đến từ khoá new í.


Truy cập các phần tử của Mảng

Bạn truy cập các phần tử của mảng thông qua liên kết tới các chỉ số.

Câu lệnh dưới đây truy cập giá trị của phần tử đầu tiên trong cars:

var name = cars[0];

Câu lệnh tiếp theo chỉnh sửa phần tử đầu tiên trong cars:

cars[0] = "Opel";

Ví dụ

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

[0] là phần tử đầu tiên trong mảng. [1] là phần tử thứ hai. Chỉ số mảng bắt đầu từ 0.


Truy cập tất cả Mảng

Với JavaScript, tất cả mảng có thể truy cập bằng cách liên kết với tên mảng:

Ví dụ

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Mảng như là Đối tượng

Mảng là dạng đặc biệt của đối tượng. Khi bạn sử dụng toán tử typeof trong JavaScript, bạn sẽ nhận được kết quả trả về là “object” – đối tượng.

Nhưng, các mảng trong JavaScript được mô tả tốt nhất như mảng.

Mảng sử dụng chỉ số để truy cập vào các phần tử của nó. Trong ví dụ dưới đây, person[0] trả về kết quả Đức Anh:

Mảng:

var person = ["Đức Anh", "Nguyễn", 30];

Đối tượng sử dụng tên (names) để truy cập các “thành viên” của nó. Trong ví dụ này person.firstName trả về kết quả Đức Anh:

Đối tượng:

var person = {firstName:"Đức Anh", lastName:"Nguyễn", age:30};

Phần tử mảng có thể là Đối tượng

Biến trong JavaScript có thể là đối tượng. Mảng là dạng đặc biệt của đối tượng.

Vì lý do đó, bạn có thể có các kiểu khác nhau của biến trong cùng một Mảng.

Bạn có thể có các đối tượng trong Mảng. Bạn có thể có các hàm trong Mảng. Bạn có thể có mảng trong Mảng:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Các thuộc tính và phương thức của Mảng

Sức mạnh thực sự của mảng trong JavaScript là các thuộc tính và phương thức được xây dựng bên trong nó:

Ví dụ

var x = cars.length; // Thuộc tính length trả về số lượng phần tử 
var y = cars.sort(); // Phương thức sort() sắp xếp mảng 

Thuộc tính length

Thuộc tính length của mảng trả về độ dài của mảng (số lượng của phần tử mảng).

Ví dụ

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // độ dài của mảng là 4

Độ dài của mảng bao giờ cũng hơn chỉ số lớn nhất trong mảng một đơn vị.


Thêm một phần tử trong mảng

Cách dễ nhất để thêm phần tử mới vào mảng là sử dụng phương thức push:

Ví dụ

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");  // thêm phần tử mới (Lemon) vào fruits 

Phần tử mới có thể thêm vào mảng bằng cách sử dụng thuộc tính độ dài:

Ví  dụ

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";    // thêm phần tử mới (Lemon) vào fruits 

Thêm phần tử với chỉ số cao có thể tạo ra các “lỗ hổng” không xác định trong mảng:

Ví dụ

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon";  // thêm phần tử mới (Lemon) vào fruits 

Vòng lặp phần tử trong Mảng

Cách tốt nhất để thực hiện vòng lặp trong mảng là sử dụng vòng lặp “for”:

Ví dụ

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
 fLen = fruits.length;
 text = "<ul>";
 for (i = 0; i < fLen; i++) {
 text += "<li>" + fruits[i] + "</li>";
 }

Mảng liên kết

Rất nhiều ngôn ngữ lập trình hỗ trợ mảng với chỉ số tên.

Mảng với chỉ số tên được gọi là mảng liên kết (hoặc băm).

JavaScript không hỗ trợ mảng với chỉ số tên.

Trong JavaScript, mảng luôn luôn sử dụng chỉ số thuần tuý.

Ví dụ

var person = [];
person[0] = "Đức Anh";
person[1] = "Nguyễn";
person[2] = 30;
var x = person.length; //person.length sẽ trả về kết quả là 3
var y = person[0]; //person[0] sẽ trả về kết quả "Đức Anh"

Chú ý!!

Nếu bạn sử dụng chỉ mục tên, JavaScript sẽ định nghĩa lại mảng thành kiểu đối tượng tiêu chuẩn.

Sau đó, tất cả các phương thức và thuộc tính sẽ tạo ra kết quả không chính xác.

 Ví dụ:

var person = [];
person["firstName"] = "Đức Anh";
person["lastName"] = "Nguyễn";
person["age"] = 30;
var x = person.length;         // person.length sẽ trả về kết quả 0
var y = person[0];             // person[0] sẽ trả về kết quả undefined (không được định nghĩa)

Sự khác nhau giữa Mảng (Arrays) và Đối tượng (Objects)

Trong JavaScript, mảng là sử dụng các chỉ số là các con số thuần tuý.

Trong JavaScript, đối tượng sử dụng chỉ số tên.

Mảng là một dạng đặc biệt của đối tượng, với chỉ số là các con số.


Khi nào sử dụng Mảng. Khi nào sử dụng Đối tượng

  • JavaScript không hỗ trợ mảng liên kết (mảng với chỉ số tên là văn bản)
  • Bạn nên sử dụng đối tượng khi bạn muốn tên phần tử là chuỗi (văn bản)
  • Bạn nên sử dụng mảng khi bạn muốn tên phần tử là các con số

Tránh sử dụng new Array()

Bạn sử dụng [] để thay thế.

Có hai câu lệnh khác nhau, cả hai đều tạo ra mảng rỗng có tên là poins:

var points = new Array(); // Cách không tốt
var points = []; // Cách tốt

Có hai câu lệnh khác nhau để tạo ra mảng bao gồm 6 số:

var points = new Array(40, 100, 1, 5, 25, 10)  //Cách không tốt
var points = [40, 100, 1, 5, 25, 10]; // Cách tốt

Từ khoá new làm phức tạp code. Nó có thể tạo ra một số kết quả không như mong đợi:

var points = new Array(40, 100);  // Tạo ra mảng với hai phần tử là (40 và 100)

Điều gì xảy ra nếu tôi loại bỏ một phần tử?

var points = new Array(40);   // Tạo ra một mảng với 40 phần tử không được định nghĩa !!!!!

Làm thế nào để nhận biết một mảng

Một câu hỏi phổ biến là: Làm thế nào để tôi biết một biến là một mảng?

Vấn đề là toán tử typeof của JavaScript trả về kết quả “object” – đối tượng:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits; // trả vể kết quả object - đối tượng

Toán tử typeof trả về kết quả đối tượng bởi vì mảng trong JavaScript là đối tượng.

Giải pháp 1:

Để giải quyết vấn đề này, ECMAScript 5  định nghĩa phương thức mới Array.isArray():

Array.isArray(fruits);     // trả về kết quả true

Nhưng vấn đề với giải pháp này là ECMAScript không được hỗ trợ trong các phiên bản cũ – trước đây của trình duyệt.

Giải pháp 2:

Để giải quyết vấn đề này, bạn tạo ra hàm của riêng bạn isArray():

function isArray(x) {
return x.constructor.toString().indexOf("Array") > -1;
}

Hàm ở trên luôn trả về kết quả true nếu đối số là một mảng.

The function above always returns true if the argument is an array.

Hay chính xác hơn: nó trả về true nếu đối tượng nguyên mẫu có chứa từ “Array”.

Giải pháp 3:

Toán tử instanceof trả về kết quả true nếu đối tượng được tạo bởi một cấu trúc cho sẵn (a given constructor?):

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array // trả về kết quả true
Back to Top