Mảng JavaScript
Mảng là một biến đặc biệt, có thể chứa nhiều hơn một giá trị:
const cars = ["Saab", "Volvo", "BMW"];
Tại sao sử dụng một mảng?
Nếu bạn có một danh sách các mục (ví dụ: một danh sách tên ô tô), thì việc lưu trữ các ô tô trong các biến đơn có thể giống như sau:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
Tuy nhiên, nếu bạn muốn đi vòng qua những chiếc xe và tìm một chiếc cụ thể thì sao? Và điều gì sẽ xảy ra nếu bạn không có 3 chiếc xe, mà là 300 chiếc?
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 một số chỉ mục.
Tạo một mảng
Sử dụng ký tự mảng là cách dễ nhất để tạo Mảng JavaScript.
Cú pháp:
const array_name = [item1, item2, ...];
Một thực tế phổ biến là khai báo mảng với từ khóa const .
Tìm hiểu thêm về const với mảng trong chương: JS Array Const .
Thí dụ
const cars = ["Saab", "Volvo", "BMW"];
Dấu 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:
Thí dụ
const cars = [
"Saab",
"Volvo",
"BMW"
];
Bạn cũng có thể tạo một mảng, sau đó cung cấp các phần tử:
Thí dụ
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
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ó:
Thí dụ
const cars = new Array("Saab", "Volvo", "BMW");
Hai ví dụ trên làm hoàn toàn giống nhau.
Không có nhu cầu 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 chiếu đến số chỉ mục :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
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";
Thí dụ
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
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 chiếu đến tên mảng:
Thí dụ
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Mảng là các đối tượng
Mảng là một loại đối tượng đặc biệt. Toán tử typeoftrong JavaScript trả về "đối tượng" cho mảng.
Tuy nhiên, mảng JavaScript được mô tả tốt nhất là mảng.
Mảng sử dụng số để truy cập các "phần tử" của nó. Trong ví dụ này, person[0]
trả về John:
Mảng:
const person = ["John", "Doe", 46];
Các đối tượng sử dụng tên để truy cập các "thành viên" của nó. Trong ví dụ này,
person.firstName
trả về John:
Sự vật:
const person = {firstName:"John", lastName:"Doe", age:46};
Phần tử mảng có thể là đối tượng
Các biến JavaScript có thể là các đối tượng. Mảng là các loại đối tượng đặc biệt.
Do đó, bạn có thể có các biến thuộc các kiểu 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ảng. Bạn có thể có cá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 của 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 thức mảng được đề cập trong các chương tiếp theo.
Thuộc tính chiều dài
Thuộc lengthtính của một mảng trả về độ dài của một mảng (số phần tử của mảng).
Thí dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
Thuộc lengthtính 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
Thí dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
Truy cập phần tử mảng cuối cùng
Thí dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Yếu tố mảng vòng lặp
Một cách để lặp qua một mảng, là sử dụng một forvòng lặp:
Thí 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>";
Bạn cũng có thể sử dụng Array.forEach()chức năng:
Thí dụ
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
Thêm phần tử mảng
Cách dễ nhất để thêm một phần tử mới vào một mảng là sử dụng push()phương thức:
Thí dụ
const fruits = ["Banana", "Orange", "Apple"];
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 lengthtính:
Thí dụ
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
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:
Thí dụ
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
Mảng liên kết
Nhiều ngôn ngữ lập trình hỗ trợ mảng với cá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ợ 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ố .
Thí dụ
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
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ẽ tạo ra kết quả không chính xác .
Thí dụ:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined
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, với các chỉ mục được đánh 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.
- Bạn nên sử dụng các đố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à số .
JavaScript Mảng mới ()
JavaScript có một phương thức khởi tạo mảng được tích hợp sẵn new Array().
Nhưng bạn có thể yên tâm sử dụng []thay thế.
Cả 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à các điểm:
const points = new Array();
const points = [];
Hai câu lệnh khác nhau này đều tạo 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];
Từ newkhóa có thể tạo ra một số kết quả không mong đợi:
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
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];
// Create an array with 40 undefined elements:
const points = new Array(40);
Làm thế nào để nhận ra 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?
The problem is that the JavaScript operator typeof returns
"object":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():
Array.isArray(fruits);
Solution 2:
The instanceof operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.