Mảng JavaScript
Mảng là một biến đặc biệt, có thể chứa nhiều giá trị:
const cars = ["Saab", "Volvo", "BMW"];
Hãy tự mình thử »Tại sao nên sử dụng mảng?
Nếu bạn có một danh sách các mục (ví dụ: danh sách tên ô tô), việc lưu trữ ô tô theo các biến đơn lẻ có thể trông như thế này:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
Tuy nhiên, nếu bạn muốn đi vòng qua các ô tô và tìm một chiếc cụ thể thì sao? Và nếu bạn không có 3 chiếc ô tô mà là 300 chiếc thì sao?
Giải pháp là một mảng!
Một mảng có thể chứa nhiều giá trị dưới một tên duy nhất và bạn có thể truy cập các giá trị đó bằng cách tham chiếu đến số chỉ mục.
Tạo một mảng
Sử dụng một mảng bằng chữ là cách dễ nhất để tạo một mảng JavaScript.
Cú pháp:
const array_name = [ item1 , item2 , ...];
Thông thường, người ta khai báo mảng bằng từ khóa const .
Tìm hiểu thêm về const với mảng trong chương: JS Array Const .
Dấu cách và ngắt dòng không quan trọng. Một khai báo có thể trải rộng trên nhiều dòng:
Bạn cũng có thể tạo một mảng rồi cung cấp các phần tử:
Sử dụng từ khóa JavaScript mới
Ví dụ sau cũng tạo một Mảng và gán các giá trị cho nó:
Hai ví dụ trên thực hiện giống hệt nhau.
Không cần sử dụng new Array() .
Để đơn giản, dễ đọc và tốc độ thực thi, hãy sử dụng phương thức mảng.
Truy cập các phần tử mảng
Bạn truy cập một phần tử mảng bằng cách tham khảo số chỉ mục :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Hãy tự mình thử »Lưu ý: Chỉ mục mảng bắt đầu bằng 0.
[0] là phần tử đầu tiên. [1] là phần tử thứ hai.
Thay đổi một phần tử mảng
Câu lệnh này thay đổi giá trị của phần tử đầu tiên trong cars :
cars[0] = "Opel";
Chuyển đổi một mảng thành một chuỗi
Phương thức JavaScript toString() chuyển đổi một mảng thành một chuỗi các giá trị mảng (được phân tách bằng dấu phẩy).
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Kết quả:
Truy cập toàn bộ mảng
Với JavaScript, toàn bộ mảng có thể được truy cập bằng cách tham khảo tên mảng:
Ví dụ
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Hãy tự mình thử »Mảng là đối tượng
Mảng là một loại đối tượng đặc biệt. Toán typeof trong JavaScript trả về "đối tượng" cho mảng.
Tuy nhiên, mảng JavaScript được mô tả tốt nhất dưới dạng 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, person[0] trả về John:
Các đối tượng sử dụng tên để truy cập "thành viên" của nó. Trong ví dụ này, person.firstName trả về John:
Các phần tử mảng có thể là đối tượng
Các biến JavaScript có thể là đối tượng. Mảng là loại đối tượng đặc biệt.
Vì điều này, bạn có thể có các biến thuộc các loại khác nhau trong cùng một Mảng.
Bạn có thể có các đối tượng trong một mảng. Bạn có thể có các hàm trong một mảng. Bạn có thể có mảng trong một mảng:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Thuộc tính và phương thức 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:
cars.length // Returns the number of elements
cars.sort() // Sorts the array
Các phương pháp mảng sẽ được đề cập trong các chương tiếp theo.
Thuộc tính chiều dài
Thuộc tính length của một mảng trả về độ dài của một mảng (số phần tử của mảng).
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
Hãy tự mình thử » Thuộc tính length luôn nhiều hơn một chỉ số mảng cao nhất.
Truy cập phần tử mảng đầu tiên
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
Hãy tự mình thử »Truy cập phần tử mảng cuối cùng
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Hãy tự mình thử »Các phần tử mảng lặp
Một cách để lặp qua một mảng là sử dụng vòng lặp for :
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text
+= "</ul>";
Hãy tự mình thử » Bạn cũng có thể sử dụng hàm Array.forEach() :
Ví dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
} Hãy tự mình thử »Thêm các phần tử mảng
Cách dễ nhất để thêm một phần tử mới vào mảng là sử dụng phương thức push() :
Ví dụ
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits Hãy tự mình thử » Phần tử mới cũng có thể được thêm vào mảng bằng thuộc tính length :
Ví dụ
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits Hãy tự mình thử » CẢNH BÁO !
Việc thêm các phần tử có chỉ số cao có thể tạo ra các "lỗ hổng" không xác định trong một mảng:
Ví dụ
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits Hãy tự mình thử »Mảng kết hợp
Nhiều ngôn ngữ lập trình hỗ trợ mảng có chỉ mục được đặt tên.
Mảng có chỉ mục được đặt tên được gọi là mảng kết hợp (hoặc băm).
JavaScript không hỗ trợ các mảng có chỉ mục được đặt tên.
Trong JavaScript, mảng luôn sử dụng các chỉ mục được đánh số .
Ví dụ
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John" Hãy tự mình thử » CẢNH BÁO !!
Nếu bạn sử dụng các chỉ mục được đặt tên, JavaScript sẽ xác định lại mảng thành một đối tượng.
Sau đó, một số phương thức và thuộc tính mảng sẽ cho kết quả không chính xác .
Ví dụ:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined Hãy tự mình thử »Sự khác biệt giữa mảng và đối tượng
Trong JavaScript, mảng sử dụng các chỉ mục được đánh số .
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, có chỉ mục được đánh số.
Khi nào nên sử dụng mảng. Khi nào nên sử dụng Đối tượng.
- JavaScript không hỗ trợ mảng kết hợp.
- Bạn nên sử dụng các đối tượng khi muốn tên thành phần là chuỗi (văn bản) .
- Bạn nên sử dụng mảng khi muốn tên phần tử là số .
Mảng mới JavaScript()
JavaScript có hàm tạo mảng tích hợp new Array() .
Nhưng thay vào đó bạn có thể sử dụng [] một cách an toàn.
Hai câu lệnh khác nhau này đều tạo ra một mảng trống mới có tên là điểm:
const points = new Array();
const points = [];
Hai câu lệnh khác nhau này đều tạo ra một mảng mới chứa 6 số:
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
Hãy tự mình thử » Từ khóa new có thể tạo ra một số kết quả không mong muốn:
// Create an array with three elements:
const points = new Array(40, 100, 1);
Hãy tự mình thử »
// Create an array with two elements:
const points = new Array(40, 100);
Hãy tự mình thử »
// Create an array with one element ???
const points = new Array(40);
Hãy tự mình thử »Một lỗi phổ biến
const points = [40];không giống như:
const points = new Array(40);
// Create an array with one element:
const points = [40];
Hãy tự mình thử »
// Create an array with 40 undefined elements:
const points = new Array(40);
Hãy tự mình thử »Cách nhận biết một mảng
Một câu hỏi thường gặp là: Làm cách nào để biết một biến có phải là một mảng hay không?
Vấn đề là toán tử JavaScript typeof trả về " object ":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
Hãy tự mình thử »Toán tử typeof trả về đối tượng vì mảng JavaScript là một đối tượng.
Giải pháp 1:
Để giải quyết vấn đề này ECMAScript 5 (JavaScript 2009) đã xác định một phương thức mới Array.isArray() :
Array.isArray(fruits);
Hãy tự mình thử »Giải pháp 2:
Toán tử instanceof trả về true nếu một đối tượng được tạo bởi một hàm tạo đã cho:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Hãy tự mình thử »Tham chiếu mảng hoàn chỉnh
Để có tài liệu tham khảo Mảng đầy đủ, hãy truy cập:
Tham chiếu mảng JavaScript hoàn chỉnh .
Tham chiếu chứa các mô tả và ví dụ về tất cả các thuộc tính và phương thức của Mảng.
