Mảng (Array) trong JavaScript - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Mảng (Array) trong JavaScript

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Mảng 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ột mảng là một biến đặc biệt, có thể chứa nhiều giá trị cùng một lúc. Nếu bạn có một danh sách các mặt hàng (ví dụ như một danh sách tên ô tô), lưu trữ ô tô trong các biến đơn có thể như sau:

var car1 = “Saab”;
var car2 = “Volvo”;
var car3 = “BMW”;

Tuy nhiên, nếu bạn muốn lặp lại những chiếc xe và tìm một chiếc xe cụ thể? Và nếu bạn không có 3 chiếc xe mà có tới 300 xe thì sao? Giải pháp là sử dụng mảng.

Một mảng có thể chứa nhiều giá trị dưới một tên, và bạn có thể truy cập các giá trị bằng cách tham chiếu đến một số chỉ mục.

Tạo mảng

Sử dụng một mảng chữ là cách dễ dàng nhất để tạo ra một mảng JavaScript. Cú pháp:

var array_name = [item1item2, …];

Ví dụ:

var cars = [“Saab”, “Volvo”, “BMW”];

Khoảng cách và ngắt dòng không quan trọng. Một khai báo có thể kéo dài nhiều dòng:

var cars = [
“Saab”,
“Volvo”,
“BMW”
];

Đặt dấu phẩy sau phần tử cuối cùng (như “BMW”) không nhất quán trên các trình duyệt. Phiên bản IE8 trở xuống sẽ báo có lỗi.

Sử dụng từ khóa mới trong JavaScript

Ví dụ sau cũng tạo một mảng, và gán các giá trị cho nó:

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

Hai ví dụ trên làm chính xác như nhau. Không cần phải sử dụng Array() mới. Để đơn giản, dễ đọc và tốc độ thực hiện, hãy sử dụng phương thức đầu tiên (mảng).

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

Bạn tham khảo một phần tử mảng bằng cách tham chiếu đến số chỉ mục. Tuyên bố này truy cập giá trị của yếu tố đầu tiên trong xe ô tô:

var name = cars[0];

Khai báo này sửa đổi 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ột mảng. [1] là thứ hai. Các chỉ mục mảng bắt đầu bằng 0.

Truy cập toàn bộ mảng

Với JavaScript, mảng đầy đủ có thể được truy cập bằng cách đề cập đến tên mảng:

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

Mảng là đối tượng

Mảng là một loại đối tượng đặc biệt. Toán tử typeof trong JavaScript trả về “đối tượng” cho các mảng. Mảng sử dụng số để truy cập vào “các phần tử” của nó. Trong ví dụ này, người [0] trả về John:

Mảng:

var person = [“John”, “Doe”, 46];

Đối tượng sử dụng tên để truy cập vào “thành viên” của nó. Trong ví dụ này, person.firstName trả về John:

var person = {firstName:”John”, lastName:”Doe”, age:46};

Phần tử mảng là đối tượng

Các biến JavaScript có thể là đối tượng. Mảng là các loại đối tượng đặc biệt. Chính vì thế bạn có thể có các biến của các loại khác nhau trong cùng một Array.

Bạn có thể có các đối tượng trong một Array. Bạn có thể có các chức năng trong một Array. Bạn có thể có mảng trong mảng Array:

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

Phương thức và thuộc tính mảng

Sức mạnh thực sự của mảng JavaScript là các thuộc tính và phương thức mảng được tích hợp sẵn:

var x = cars.length;   // The length property returns the number of elements
var y = cars.sort();   // The sort() method sorts arrays

Thuộc tính length

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

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.length;                       // the length of fruits is 4

Thuộc tính chiều dài luôn luôn là một trong nhiều hơn chỉ số mảng cao nhất.

Các phần tử mảng vòng lặp

Cách tốt nhất để lặp qua mảng là sử dụng vòng lặp “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>”;
}

Thêm các phần tử mảng

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

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.push(“Lemon”);                // adds a new element (Lemon) to fruits

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

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits[fruits.length] = “Lemon”;     // adds a new element (Lemon) to fruits

Báo cáo: thêm các phần tử có chỉ mục cao có thể tạo ra “lỗ hổng” không xác định trong một mảng:

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits[6] = “Lemon”;                 // adds a new element (Lemon) to fruits

Mảng Kết hợp

Nhiều mảng hỗ trợ ngôn ngữ lập trình với các bookmark được đặt tên. ảng với các chỉ mục được đặt tên được gọi là mảng kết hợp.

JavaScript không hỗ trợ mảng với các chỉ mục được đặt tên. Trong JavaScript, các mảng luôn sử dụng chỉ mục được đánh số.

var person = [];
person[0] = “John”;
person[1] = “Doe”;
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return “John”

Lưu ý nếu bạn sử dụng các chỉ mục được đặt tên, JavaScript sẽ định nghĩa lại mảng đó cho một đối tượng chuẩn.

Ví dụ :

var person = [];
person[“firstName”] = “John”;
person[“lastName”] = “Doe”;
person[“age”] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined

Khác biệt giữa mảng và đối tượng

Trong JavaScript, các mảng sử dụng các chỉ mục được đánh số. Các đối tượng sử dụng các chỉ mục được đặt tên.

  • Trong JavaScript, các đối tượng sử dụng các chỉ mục được đặt tên.
  • Mảng là một loại đối tượng đặc biệt, với chỉ đánh số.
  • Khi nào sử dụng Mảng? Khi nào sử dụng Objects. Bạn nên sử dụng các mảng khi bạn muốn các tên phần tử là các con số.

Avoid Array() mới

Không cần phải sử dụng trình xây dựng sẵn mảng Array() của Array(). Sử dụng [] để thay thế.

Hai câu lệnh khác nhau tạo ra một mảng trống mới có tên là các điểm:

var points = new Array();         // Bad
var points = [];                  // Good

Hai câu lệnh khác nhau tạo ra một mảng mới chứa 6 số:

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

Từ khoá mới chỉ làm phức tạp mã. Nó cũng có thể tạo ra một số kết quả không mong muốn:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

Nếu tôi loại bỏ một trong các yếu tố thì sao?

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!

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

Một câu hỏi phổ biến làm thế nào để tôi biết nếu một biến là một mảng? Vấn đề là các nhà điều hành JavaScript typeof trả về “đối tượng”:

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

typeof fruits;             // returns object

Toán tử typeof trả về đối tượng vì một mảng JavaScript là một đối tượng.

Giải pháp 1:

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

Array.isArray(fruits);     // returns true

Vấn đề với giải pháp này là ECMAScript 5 không được hỗ trợ trong các trình duyệt cũ.

Giải pháp 2:

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

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

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

Giải pháp 3:

Toán tử instanceof trả về true nếu một đối tượng được tạo ra bởi một hàm tạo:

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];

fruits instanceof Array // returns true