Mảng là gì?
Giả sử chúng ta có một danh sách các loại trái cây và chúng ta muốn lưu trữ chúng trong một biến, cách thực hiện có thể như sau:
var fruit1 = "Apple"; var fruit2 = "Orange"; var fruit3 = "Banana";
Với cách lưu trữ trên, sẽ ra sao nếu chúng ta muốn liệt kê các loại trái cây hay tìm một loại trái cây nào đó? Hay thay vì chỉ có 3 như trên, chúng ta có đến 100 loại trái cây? Giải pháp là sử dụng mảng.
Mảng là một biến có thể chứa nhiều giá trị cùng một lúc.
Tạo một mảng
Có hai cách tạo mảng: dùng array literal và dùng từ khoá new.
Dùng array literal là cách nhanh nhất để tạo mảng. Một array literal là một khai báo có cú pháp như sau:
var tên_mảng = [giá trị 1, giá trị 2, …];
Ví dụ tạo mảng fruits chứa 3 loại trái cây Apple, Orange, Banana:
var fruits = ["Apple", "Orange", "Banana"];
Cách khác để tạo mảng là dùng từ khoá new theo cú pháp sau:
var tên_mảng = new Array(giá trị 1, giá trị 2, …);
Ví dụ tạo mảng fruits có thể được viết lại:
var fruits = new Array ("Apple", "Orange", "Banana");
Chú ý: không nên dùng từ khoá new để tạo mảng vì sẽ phức tạp hơn dùng array literal và đôi khi cho ra những kết quả không như mong đợi như ví dụ dưới đây.
Tạo một mảng chứa hai giá trị 40 và 100:
var num = new Array(40, 100);
Bây giờ chúng ta bỏ giá trị 100 và chúng ta mong đợi mảng chứa một giá trị là 40:
var num = new Array(40);
Tuy nhiên, câu lệnh trên thay vì tạo một mảng chứa giá trị là 40 thì lại tạo ra một mảng chứa 40 giá trị không xác định (undefined).
Trong hầu hết các ngôn ngữ lập trình, mảng dùng để chứa các giá trị cùng kiểu dữ liệu. Trong JavaScript, mảng có thể chứa các giá trị với các kiểu dữ liệu khác nhau như chuỗi, số, hàm, mảng (mảng lồng nhau), object, v.v…. Ví dụ:
var myArr = ["John", {"1":"one"}, 46, true, undefined, [3, "abc"]];
Truy cập các phần tử của mảng
Sau khi tạo một mảng, chúng ta có thể truy cập các phần tử trong mảng theo cú pháp sau:
Tên_mảng[chỉ_số_phần_tử];
Khi các giá trị được lưu vào một biến mảng, mỗi giá trị hay phần tử được gán tương ứng một chỉ số, bắt đầu từ 0. Ví dụ mảng fruits ở trên chứa các phần tử với chỉ số tương ứng như sau:
| Phần tử hay giá trị | Chỉ số trong mảng |
|---|---|
| Apple | 0 |
| Orange | 1 |
| Banana | 2 |
Do đó, để truy cập đến phần tử Apple, chúng ta dùng lệnh:
alert(fruits[0]); // Apple
Nếu chúng ta không dùng cặp ngoặc vuông và chỉ số mà chỉ dùng tên biến mảng thì chúng ta sẽ nhận được toàn bộ các phần tử trong mảng:
alert(fruits); // Apple, Orange, Banana
Mảng và đối tượng
Trong JavaScript, mảng là một đối tượng đặc biệt. Chúng ta có thể dễ dàng kiểm tra điều này bằng cách dùng typeof như sau:
alert(typeof(fruits)); // object
Tuy nhiên, mảng khác các đối tượng thông thường ở một vài điểm:
- Mảng thừa kế từ Array.prototype, các đối tượng thừa kế từ Object.prototype.
- Mảng dùng số (numbers) để truy cập các phần tử trong khi các đối tượng dùng tên (names) để truy cập như ví dụ sau:
// khai báo mảng
var personArr = ["John", "Doe", 46];
// truy cập phần tử thứ nhất của mảng personArr
alert(personArr[0]);// John
// khai báo đối tượng personOb
var personOb = {firstName:"John", lastName:"Doe", age:46};
// truy cập phần tử đầu tiên của personOb
alert (personOb[firstName]); // hay alert (person.firstName) đều trả về John
- Mảng (như personArr) có thuộc tính length trả về số phần tử của nó, trong khi các đối tượng (như personOb) không có thuộc tính này.
Thuộc tính và phương thức
Mảng là đối tượng nên nó có các thuộc tính và phương thức.
Thuộc tính
- Thuộc tính length: trả về số phần tử của một mảng. Ví dụ:
alert(fruits.length); // 3
- Thuộc tính constructor: trà về phương thức constructor của mảng. Ví dụ
alert(fruits.constructor); // function Array() { [native code] }
- Thuộc tính prototype: cho phép chúng ta thêm thuộc tính hay phương thức vào mảng. Ví dụ thêm phương thức sum () trả về tổng các phần tử trong mảng số nguyên intArr sau:
Array.prototype.sum = function() {
var s = 0;
for (i = 0; i < this.length; i++) {
s += this[i];
}
return s;
};
var intArr = [3, 2, 5];
alert (intArr.sum()); // 10
Phương thức
JavaScript hỗ trợ một tập các phương thức xây dựng sẵn cho mảng (có thể dùng thuộc tính prototype để thêm phương thức vào mảng như ví dụ phương thức sum ở trên), cụ thể như bảng sau:
| Phương thức | Chức năng |
|---|---|
| concat(arr1, arr2,…,arrn) | Kết nối hai hay nhiều mảng. Kết quả trả về là mảng được kết nối. (Ví dụ) |
| copyWithin(target, start, end) | Copy các phần tử từ vị trí start và kết thúc tại vị trí end (nếu không dùng end thì mặc định phương thức sẽ copy toàn bộ các phần tử trong mảng) đến vị trí bắt đầu là target. Kết quả trả về là mảng được thay đổi. (Ví dụ) |
| every(function(currentValue,index, arr), thisValue) | Kiểm tra tất cả các phần tử trong mảng có thoả điều kiện nào đó hay không; kết quả trả về true nếu thoả và ngược lại trả về false. Tham số là hàm function dùng để duyệt qua các phần tử trong mảng với các tham số currentValue là giá trị của phần tử hiện tại, index chỉ số của phần tử hiện tại, arr là mảng mà phần tử hiện tại thuộc về; thisValue là giá trị được chuyển đến hàm được dùng như giá trị this của chính nó, nếu tham số này rỗng thì giá trị undefined được chuyển đến giá trị this của nó. (Ví dụ) |
| fill(value, start, end) | Thay thế tất cả các phần tử từ vị trí start (mặc định là 0) đến vị trí end (mặc định là toàn bộ mảng) bằng giá trị value. Kết quả trả về là mảng với các phần tử được thay thế. (Ví dụ) |
| filter(function(currentValue, index, arr), thisValue) | Tạo ra một mảng mới với các phần tử thoả mãn điều kiện nào đó. Tham số là hàm function dùng để duyệt qua các phần tử trong mảng với các tham số currentValue là giá trị của phần tử hiện tại, index chỉ số của phần tử hiện tại, arr là mảng mà phần tử hiện tại thuộc về; thisValue là giá trị được chuyển đến hàm được dùng như giá trị this của chính nó, nếu tham số này rỗng thì giá trị undefined được chuyển đến giá trị this của nó. (Ví dụ) |
| find(function(currentValue, index, arr), thisValue) | Trả về giá trị của phần tử đầu tiên trong một mảng thoả mãn điều kiện nào đó; nếu không tìm thấy phần tử thì undefined được trả về. Tham số là hàm function dùng để duyệt qua các phần tử trong mảng với các tham số currentValue là giá trị của phần tử hiện tại, index chỉ số của phần tử hiện tại, arr là mảng mà phần tử hiện tại thuộc về; thisValue là giá trị được chuyển đến hàm được dùng như giá trị this của chính nó, nếu tham số này rỗng thì giá trị undefined được chuyển đến giá trị this của nó. (Ví dụ) |
| findIndex(function(currentValue, index, arr), thisValue) | Trả về chỉ số của phần tử đầu tiên trong một mảng thoả mãn điều kiện nào đó. Tham số là hàm function dùng để duyệt qua các phần tử trong mảng với các tham số currentValue là giá trị của phần tử hiện tại, index chỉ số của phần tử hiện tại, arr là mảng mà phần tử hiện tại thuộc về; thisValue là giá trị được chuyển đến hàm được dùng như giá trị this của chính nó, nếu tham số này rỗng thì giá trị undefined được chuyển đến giá trị this của nó. (Ví dụ) |
| forEach(function(currentValue, index, arr), thisValue) | Gọi một hàm một lần cho mỗi phần tử trong mảng theo thứ tự. Tham số là hàm function dùng để duyệt qua các phần tử trong mảng với các tham số currentValue là giá trị của phần tử hiện tại, index chỉ số của phần tử hiện tại, arr là mảng mà phần tử hiện tại thuộc về; thisValue là giá trị được chuyển đến hàm được dùng như giá trị this của chính nó, nếu tham số này rỗng thì giá trị undefined được chuyển đến giá trị this của nó. (Ví dụ) |
| indexOf(item, start) | Tìm kiếm phần tử item bắt đầu tại vị trí start trong một mảng; trả về chỉ số item nếu tìm thấy, ngược lại trả về -1. Nếu start là giá trị âm thì phương thức sẽ tìm kiếm theo thứ tự từ phải sang trái. (Ví dụ) |
| isArray(obj) | Kiểm tra đối tượng obj có phải là một màng hay không; trả về true nếu obj là mảng, ngược lại trả về false. (Ví dụ) |
| join(seperator) | Kết hợp các phần tử trong một mảng thành một chuỗi và các phần tử này cách nhau bởi kí hiệu seperator trong chuỗi. Mặc định, seperator là dấu phẩy. Kết quả trả về chuỗi vừa tạo. (Ví dụ) |
| lastIndexOf(item, start) | Tìm kiếm phần tử item bắt đầu tại vị trí start trong một mảng và trả về vị trí của nó. Nếu start là giá trị âm thì phương thức sẽ tìm kiếm theo thứ tự từ phải sang trái. Nếu start bỏ trống, quá trình tìm kiếm sẽ bắt đầu từ phần tử cuối cùng trong mảng. (Ví dụ) |
| map(function(currentValue, index, arr), thisValue) | Gọi một hàm một lần cho mỗi phần tử trong mảng theo thứ tự và kết quả trả về là một mảng chứa kết quả thực thi hàm trên mỗi phần tử trong mảng ban đầu. Tham số là hàm function dùng để duyệt qua các phần tử trong mảng với các tham số currentValue là giá trị của phần tử hiện tại, index chỉ số của phần tử hiện tại, arr là mảng mà phần tử hiện tại thuộc về; thisValue là giá trị được chuyển đến hàm được dùng như giá trị this của chính nó, nếu tham số này rỗng thì giá trị undefined được chuyển đến giá trị this của nó. (Ví dụ) |
| pop() | Xoá phần tử cuối cùng trong mảng và trả về phần tử này. (Ví dụ ) |
| push(item1, item2,…,itemn) | Thêm các phần tử item1, item2,…, itemn vào cuối mảng và cập nhật lại số phần tử (trong length). Kết quả trả về số phần tử mới. (Ví dụ) |
| reduce(function(total, currentValue, currentIndex, arr), initialValue) | Giảm mảng thành một giá trị đơn và trả về giá trị đơn này. Tham số thứ nhất là hàm function áp dụng cho từng phần tử của mảng (từ trái qua phải) chứa các tham số total là giá trị khởi đầu initialValue hay giá trị được trả về trước đó, currentValue là giá trị phần tử hiện tại, currentIndex là chỉ số phần tử hiện tại, arr là mảng chứa phần tử hiện tại. Tham số thứ hai là initialValue là giá trị khởi đầu. (Ví dụ) |
| reduceRight() | Giảm mảng thành một giá trị đơn và trả về giá trị đơn này. Tham số thứ nhất là hàm function áp dụng cho từng phần tử của mảng (từ phải qua trái) chứa các tham số total là giá trị khởi đầu initialValue hay giá trị được trả về trước đó, currentValue là giá trị phần tử hiện tại, currentIndex là chỉ số phần tử hiện tại, arr là mảng chứa phần tử hiện tại. Tham số thứ hai là initialValue là giá trị khởi đầu. (Ví dụ) |
| reverse() | Đảo thứ tự của các phần tử trong một mảng và trả về mảng với các phần tử theo thứ tự mới. (Ví dụ) |
| shift() | Xoá phần tử đầu tiên trong mảng và trả về phần tử này. (Ví dụ) |
| slice(start, end) | Chọn các phần của mảng từ vị trí start (mặc định là 0) đến vị trí end – 1 (mặc định là vị trí của phần tử cuối cùng) và trả về một mảng mới với các phần tử được chọn. Nếu end là giá trị âm thì thứ tự được chọn sẽ từ phải sang trái thay vì từ trái sang phải theo mặc định. (Ví dụ) |
| some(function(currentValue, index, arr), thisValue) | Kiểm tra có tồn tại phần tử trong mảng có giá trị thoả điều kiện nào đó hay không; trả về true nếu thoả, ngược lại trả về false. Tham số là hàm function dùng để duyệt qua các phần tử trong mảng với các tham số currentValue là giá trị của phần tử hiện tại, index chỉ số của phần tử hiện tại, arr là mảng mà phần tử hiện tại thuộc về; thisValue là giá trị được chuyển đến hàm được dùng như giá trị this của chính nó, nếu tham số này rỗng thì giá trị undefined được chuyển đến giá trị this của nó. (Ví dụ) |
| sort(compareFunction) | Sắp xếp các phần tử trong mảng theo thứ tự tăng (mặc định) hay giảm dần và trả về đối tượng mảng với các phần tử được sắp xếp. Phương thức này khi áp dụng cho mảng chứa các phần tử là số sẽ cho kết quả không chính xác và có thể được điều chỉnh bằng hàm compareFunction có dạng function(a, b){return a-b} nếu sắp tăng dần hay function(a, b){return b-a} nếu sắp giảm dần. Khi sort() so sánh hai giá trị, nó sẽ gửi các giá trị này đến compareFunction và sẽ sắp xếp các giá trị này theo giá trị trả về (trong trường hợp tăng dần, nếu âm thì a < b, nếu dương thì a>b và bằng 0 nếu a=b). (Ví dụ ). |
| splice(index, howmany, item1, ….., itemn) | Thêm/xoá các phần tử từ mảng và trả về một mảng mới chứa các phần tử bị xoá. Index là vị trí bắt đầu để thêm/xoá các phần tử, howmany là số phần tử bị xoá (nếu là 0 thì không phần tử nào bị xoá), item1,…,itemn là các giá trị được thêm đến mảng. (Ví dụ) |
| toString() | Chuyển một mảng thành một chuỗi và các phần tử trong chuỗi cách nhau bởi dấu phẩy. Kết quả trả về chuỗi vừa tạo. (Ví dụ) |
| unshift(item1, ….., itemn) | Thêm item1,…,itemn vào đầu mảng và trả về số phần tử của mảng mới. (Ví dụ) |
| valueOf() | Trả về chính đối tượng mảng dùng valueOf. (Ví dụ) |
Các thao tác với mảng
- Thêm phần tử vào mảng: dùng các phương thức push(), splice(), unshift().
- Xoá phần tử từ mảng: dùng các phương thức pop(), shift(), splice().
- Duyệt mảng: cách nhanh nhất để duyệt các phần tử trong mảng là dùng vòng lặp for, như ví dụ:
fruits = ["Banana", "Orange", "Apple", "Mango"];
for (i = 0; i < fruits.length; i++) {
alert(fruits[i]);
}
Nhận diện một đối tượng là mảng
Dùng phương thức isArray(xem ví dụ 10) hay toán tử instanveof như ví dụ sau:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; alert(fruits instanceof Array);// true
Trần Ngọc Minh Notes 
Ý kiến bài viết