JavaScript

Mảng

Mảng là một biến đặc biệt, có thể chứa nhiều hơn một giá trị:

const ô tô = [“Saab”, “Volvo”, “BMW”];

Hãy tự mình thử »

Tại sao 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ô), hãy lưu trữ
ô tô trong các biến đơn lẻ có thể trông giống như sau:

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

Tuy nhiên, nếu bạn muốn vòng qua những chiếc ô tô 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 số chỉ mục.

Tạo 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ông lệ 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 .

Ví dụ

const ô tô = [“Saab”, “Volvo”, “BMW”];

Hãy tự mình thử »

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

Ví dụ

const ô tô = [
“Saab”,
“Volvo”,
“BMW”
];

Hãy tự mình thử »

Bạn cũng có thể tạo một mảng, sau đó cung cấp các phần tử:

Ví dụ

const ô tô = [];
ô tô [0] = “Saab”;
ô tô [1] = “Volvo”;
ô tô [2] = “BMW”;

Hãy tự mình thử »

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

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

Ví dụ

const ô tô = new Array (“Saab”, “Volvo”, “BMW”);

Hãy tự mình thử »

Hai ví dụ trên hoạt động hoàn toàn giống 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 ký tự 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 ô tô = [“Saab”, “Volvo”, “BMW”];
let car = ô tô [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 ô tô :

ô tô [0] = “Opel”;

Ví dụ

const ô tô = [“Saab”, “Volvo”, “BMW”];
ô tô [0] = “Opel”;

Hãy tự mình thử »

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 mảng
tên:

Ví dụ

const ô tô = [“Saab”, “Volvo”, “BMW”];
document.getElementById (“demo”). innerHTML = xe hơi;

Hãy tự mình thử »

Mảng là các đố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
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 “phần tử” của nó. Trong này
ví dụ, person [0]
trả lại John:

Mảng:

const người = [“John”, “Doe”, 46];

Hãy tự mình thử »

Đố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ả lại John:

Đối tượng:

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

Hãy tự mình thử »

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à những loại đối tượng đặc biệt.

Do đó, 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ả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 mảng được tích hợp sẵn và
phương pháp:

ô tô.length // Trả về số phần tử
ô tô.sort () // Sắp xếp mảng

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 tính length của một mảng trả về độ dài của một mảng (số mảng
phần tử).

Ví dụ

const trái cây = [“Chuối”, “Cam”, “Táo”, “Xoài”];
let length = fruit.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 trái cây = [“Chuối”, “Cam”, “Táo”, “Xoài”];
let fruit = hoa quả [0];

Hãy tự mình thử »

Truy cập phần tử mảng cuối cùng

Ví dụ

const trái cây = [“Chuối”, “Cam”, “Táo”, “Xoài”];
let fruit = fruit [fruit.length – 1];

Hãy tự mình thử »

Phần tử mảng vò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 trái cây = [“Chuối”, “Cam”, “Táo”, “Xoài”];
let fLen = fruit.length;

let text = “& lt; ul & gt;”;
for (let i = 0; i & lt; fLen; i ++) {
text + = “& lt; li & gt;” + trái cây [i] + “& lt; / li & gt;”;
}
văn bản
+ = “& lt; / ul & gt;”;

Hãy tự mình thử »

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

Ví dụ

const trái cây = [“Chuối”, “Cam”, “Táo”, “Xoài”];

let text = “& lt; ul & gt;”;
results.forEach (myFunction);
text + = “& lt; / ul & gt;”;
hàm
myFunction (giá trị) {
text + = “& lt; li & gt;” + giá trị + “& lt; / li & gt;”;
}

Hãy tự mình thử »

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 phương thức push () :

Ví dụ

const trái cây = [“Chuối”, “Cam”, “Táo”];
Fruit.push (“Chanh”); // Thêm một phần tử mới (Lemon) vào trái cây

Hãy tự mình thử »

Phần tử mới cũng có thể được thêm vào một mảng bằng thuộc tính length :

Ví dụ

const trái cây = [“Chuối”, “Cam”, “Táo”];
fruit [fruit.length] = “Chanh”; // Thêm “Lemon” vào trái cây

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 trái cây = [“Chuối”, “Cam”, “Táo”];
trái cây [6] = “Chanh”; // Tạo “lỗ” không xác định trên trái cây

Hãy tự mình thử »

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ó các chỉ mục được đặt tên được gọi là liên kết
mảng (hoặc hàm 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 chỉ mục được đánh số .

Ví dụ

const người = [];
người [0] = “John”;
người [1] = “Doe”;
người [2] = 46;
người. sức mạnh; // Sẽ trả về 3
người [0]; // Sẽ trả về “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ẽ tạo ra không chính xác
kết quả .

Ví dụ:

const người = [];
person [“firstName”] = “John”;
person [“lastName”] = “Doe”;
người [“tuổi”] = 46;
người. sức mạnh; // Sẽ trả về 0
người [0]; // Sẽ trả về không xác định

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 chỉ mục được đánh số .

Trong JavaScript, đối tượng sử dụng 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 đố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 Array mới ()

JavaScript có một hàm tạo mảng tích hợp sẵn new Array () .

Tuy nhiên, bạn có thể yên tâm sử dụng [] để thay thế.

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 điểm = [];

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 điểm = [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:

// Tạo một mảng có ba phần tử:
const điểm = new Array (40, 100, 1);

Hãy tự mình thử »

// Tạo một mảng có hai phần tử:
const điểm = new Array (40, 100);

Hãy tự mình thử »

// Tạo mảng có một phần tử ???
const điểm = new Array (40);

Hãy tự mình thử »

Một lỗi phổ biến

điểm const = [40];

không giống như:

const điểm = new Array (40);

// Tạo một mảng có một phần tử:
const điểm = [40];

Hãy tự mình thử »

// Tạo một mảng với 40 phần tử không xác định:
const điểm = 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ề
“ đối tượng “:

const trái cây = [“Chuối”, “Cam”, “Táo”];
let type = loại trái cây;

Hãy tự mình thử »

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

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 () :

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 nhất định:

const trái cây = [“Chuối”, “Cam”, “Táo”];

quả instanceof Array;

Hãy tự mình thử »

Toàn bộ tham chiếu mảng

Để tham khảo đầy đủ về Mảng, hãy truy cập:

Toàn bộ tham chiếu mảng JavaScript .

Tham chiếu chứa các mô tả và ví dụ về tất cả Mảng
thuộc tính và phương thức.

Tự kiểm tra bằng các bài tập

Bài tập:

Nhận giá trị “ Volvo ” từ mảng ô tô .

const ô tô = ["Saab", "Volvo", "BMW"];
cho x =;

Bắt đầu bài tập