Javascript Arrays

16/07/2019

Bài sau » « Bài trước

Javascript arrays dùng để lưu trữ nhiều dữ liệu chỉ trong 1 biến.

var cars = ["Audi", "Honda", "BMW"];

Array là gì ?

Array là một biến đặc biệt, nó có thể lưu nhiều giá trị tại 1 thời điểm.

Nếu bạn có 1 list item (như list xe ở trên), lưu trữ trong từng biến thì ta có:

var car1 = "Audi";
var car2 = "Honda";
var car3 = "BMW";

Nhưng, nếu bạn muốn lặp và tìm ra thương hiệu xe mà mình muốn hoặc có hơn 100 thương hiệu khác nữa thì sao ? Vì thế Array là giải pháp được chọn.

Một array có thể lưu trữ nhiều giá trị trong 1 biến, ta có thể truy cập giá trị thông qua chỉ số index.

Cú pháp tạo Array

Cú pháp 1:

var array_name = [item1, item2, ...];

var cars = ["Audi", "Honda", "BMW"];

Khoảng trắng hoặc xuống dòng không quan trọng.

var cars = [ "Audi", "Honda", "BMW" ];

Đặt dấu phẩy ở phần tử cuối cùng (ví dụ "BMW" , ) hiện không nhất quán giữa các trình duyệt.
Từ IE 8 trở về trước sẽ báo lỗi.

Cú pháp 2:

var array_name = new Array(item1, item2, ...);

var cars = new Array("Audi", "Honda", "BMW");

Cả hai phương pháp trên đều giống nhau. Nhưng để đơn giản, dễ đọc và tốc độ xử lý nhanh. Thì hãy dùng cách 1 ở trên.

Truy cập phần tử trong Array

Bạn có thể truy cập phần tử trong Array bằng cách dựa theo chỉ số index.

var name = cars[0];

Xem ví dụ bên dưới:

var cars = new Array("Audi", "Honda", "BMW"); alert(cars[0]);

Chú ý: Chỉ số index trong Array được đánh số từ 0. Có nghĩa là phần tử đầu tiên là 0, phần tử thứ 2 là 1,....

Trong Javascript, khi bạn truy cập tên của Array thì kết quả trả về sẽ là tất cả nội dung của array đó.

var cars = ["Audi", "Honda", "BMW"]; alert(cars);

Thay đổi giá trị phần tử trong Array

Để thay đổi giá trị phần tử ta chỉ cần trỏ đến index của phần tử cần đổi và gán giá trị mới cho nó.

array_name[index] = "Giá_trị";

var cars = ["Audi", "Honda", "BMW"]; vars[0] = "Yamaha"; // Kết quả biến cars là: ["Yamaha", "Honda", "BMW"]

Arrays là Objects

Arrays là một kiểu đặc biệt của Objects. Trong javascript, sử dụng typeof cho array thì kết quả trả về là object.

Arrays dùng chỉ số index để truy cập phần tử:

var cars = ["Audi", "Honda", "BMW"]; // Sử dụng cars[0] để lấy phần tử đầu tiên

Object dùng keyword để truy cập phần tử:

var person = {firstName:"John", lastName:"Doe", age:46}; // Sử dụng person.firstName để lấy giá trị được lưu trong keyword "firstName"

Phần tử trong Array có thể là Objects

Các biến JavaScript có thể là các object. Arrays là một kiểu đặc biệt của Objects.

Do đó, bạn có thể có các biến thuộc các loại khác nhau trong cùng một Arrays.

Bạn có thể có object trong một Array. Bạn có thể có function trong một Array. Bạn có thể có Arrays trong một Array:

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

Thuộc tính và Phương thức trong Array

Sức mạnh thực sự của Arrays trong JavaScript là các thuộc tính và phương thức:

var x = cars.length; // Thuộc tính length trả về số phần tử trong Arrays
var y = cars.sort(); // Phương thức sort() dùng để sắp xếp phần tử trong Array.

Thuộc tính length :

var cars = ["Audi", "Honda", "BMW"]; var total = cars.length; // Kết quả trả về là 3 var last = cars[cars.length - 1]; // Kết quả trả về phần tử cuối cùng trong Array

Array Methods được giới thiệu kỹ hơn trong bài tiếp theo

Lặp phần tử trong Array

Cách an toàn nhất để lặp phần tử trong Array là dùng for

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>"; } text += "</ul>"; document.getElementById("demo").innerHTML = text;

Bạn cũng có thể sử dụng Array.forEach()

var fruits, text; fruits = ["Banana", "Orange", "Apple", "Mango"]; text = "<ul>"; fruits.forEach(myFunction); text += "</ul>"; function myFunction(value) { text += "<li>" + value + "</li>"; } document.getElementById("demo").innerHTML = text;

Liên kết Mảng

Nhiều ngôn ngữ lập trình support array với named index.

Javascript không support array với named index.

Trong Javascript, Arrays luôn dùng numberic index - chỉ số index.

var person = []; person[0] = "John"; person[1] = "Doe"; person[2] = 46; var x = person.length; // person.length trả về là 3 var y = person[0]; // person[0] trả về là "John"

Chú ý: Nếu bạn dùng named index cho Array. Thì Javascript sẽ định nghĩa lại array thành một object. Khi đó, Một số thuộc tính và phương thức thực thi kết quả sai.

var person = []; person["firstName"] = "John"; person["lastName"] = "Doe"; person["age"] = 46; var x = person.length; // person.length trả về là 0 var y = person[0]; // person[0] trả về là undefined

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

Không cần sử dụng contructor new Array() trong Javascript. Mà chỉ cần:

Dùng [ ]

Dưới đây là 2 cách khác nhau để tạo 1 Array:

var points = new Array(40, 100, 1, 5, 25, 10); // Bad var points = [40, 100, 1, 5, 25, 10]; // Good

Từ khóa new chỉ làm phức tạp mã và có thể gây nhiều kết quả không như mong đợi.

var points = new Array(40, 100); // Tạo 1 mảng với 2 phần tử (40 và 100) var points = new Array(40); // Nhưng với trường hợp này, thì là tạo 1 mảng với 40 phần tử !!!

Cách nhận biết Array

Câu hỏi phổ biến là: Làm cách nào để nhận biết một biến có kiểu là Array ?

Bởi vì trong Javascript, toán tử typeof trả về là một "object".

var fruits = ["Banana", "Orange", "Apple", "Mango"]; typeof fruits; // trả về kết quả là object

Cách 1:

ECMAScript 5 đã định nghĩa một phương thức Array.isArray() để kiểm tra.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; Array.isArray(fruits); // trả về kết quả là true

Nhưng, ECMAScript 5 lại không support những trình duyệt cũ.

Cách 2:

Để giải quyết vấn đề trên, bạn có thể tạo một function isArray() để kiểm tra. Đoạn code như sau:

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

Cách 3:

Sử dụng instanceof trả về kết quả là true nếu là Array.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits instanceof Array; // Kết quả là true

Bài sau » « Bài trước
Back to top