[Javascript] – Phần 25: Mảng trong JavaScript

1. Mảng là gì?

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

const cars = ["Saab", "Volvo", "BMW"];

2. 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 các loại xe) việc lưu trữ các xe trong các biến riêng lẻ có thể như sau:

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

Tuy nhiên, nếu bạn muốn lặp qua các xe và tìm kiếm một chiếc xe cụ thể? Và nếu bạn có không chỉ 3 chiếc xe mà là 300 chiếc?

Giải pháp là sử dụng mảng! Một mảng có thể giữ 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.

3. Tạo Mảng

Sử dụng biểu thức mảng là cách đơn giản nhất để tạo một Mảng JavaScript.

Cú pháp:

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

Thường thì việc khai báo mảng được thực hiện bằng const.

Ví dụ:

const cars = ["Saab", "Volvo", "BMW"];

Không quan trọng các dấu cách và xuống dòng. Một khai báo có thể trải dài qua nhiều dòng:

const cars = [
  "Saab",
  "Volvo",
  "BMW"
];

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

const cars = [];
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";

4. Truy Cập Phần Tử của Mảng

Bạn truy cập một phần tử trong 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 từ 0. [0] là phần tử đầu tiên, [1] là phần tử thứ hai và cứ tiếp tục như vậy.

5. Thay Đổi Phần Tử của Mảng

Câu lệnh sau đây thay đổi giá trị của phần tử đầu tiên trong mảng cars:

cars[0] = "Opel";

6. Chuyển Đổi Mảng thành Chuỗi

Phương thức toString() của JavaScript chuyển đổi một mảng thành chuỗi của các giá trị mảng (phân cách bằng dấu phẩy).

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Kết quả:

Banana,Orange,Apple,Mango

7. Truy Cập Toàn Bộ Mảng

Bằng JavaScript, bạn có thể truy cập toàn bộ mảng bằng cách tham chiếu đến tên mảng:

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

8. Mảng là Đối Tượng

Mảng là một loại đặc biệt của đối tượng. Toán tử typeof trong JavaScript trả về “object” cho mảng. Mảng sử dụng số để truy cập các “phần tử” của nó, trong khi đối tượng sử dụng tên để truy cập các “thành viên” của nó.

9. Phần Tử của Mảng Cũng Có Thể Là Đối Tượng

Biến JavaScript có thể là các đối tượng. Mảng là một loại đặc biệt của đối tượng.

Vì vậy, bạn có thể có biến của các loại khác nhau trong cùng một mảng. Bạn có thể có đối tượng trong một mảng. Bạn có thể 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;

10. Thuộc Tính và Phương Thức của Mảng

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

• cars.length: Trả về số lượng phần tử trong mảng.
• cars.sort(): Sắp xếp mảng.

Các phương thức mảng sẽ được thảo luận trong các bài tiếp theo.

11. 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ố lượng các phần tử của mảng).

Ví dụ:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;

12. Truy Cập Phần Tử Đầu Tiên của Mảng

Ví dụ:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];

13. Truy Cập Phần Tử Cuối Cùng của Mảng

Ví dụ:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];

14. Lặp Qua Các Phần Tử của Mảng.

Một cách để lặp qua một mảng là sử dụng vòng lặp for:

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 hàm Array.forEach():

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

15. Thêm Phần Tử vào Mảng

Cách đơn giản 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():

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // Thêm một phần tử mới (Lemon) vào 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 length:

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // Thêm "Lemon" vào fruits

CẢNH BÁO !

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

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";  // Tạo ra "lỗ" không xác định trong fruits

16. Mảng Kết Hợp (Associative Arrays)

Nhiều ngôn ngữ lập trình hỗ trợ mảng với các chỉ mục có tên.

Mảng với các chỉ mục có tên được gọi là mảng kết hợp (hoặc hash).

JavaScript không hỗ trợ mảng với các chỉ mục có tên.

Trong JavaScript, mảng luôn sử dụng các chỉ mục có số.

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // Sẽ trả về 3
person[0];        // Sẽ trả về "John"

CẢNH BÁO !!

Nếu bạn sử dụng chỉ mục có tên, JavaScript sẽ đị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 các kết quả không chính xác.

Ví dụ:

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;     // Sẽ trả về 0
person[0];         // Sẽ trả về undefined

17. 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ó số.

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

Mảng là một loại đặc biệt của đối tượng với các chỉ mục có 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 kết hợp.

Bạn nên sử dụng đối tượng khi bạn muốn các 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 các tên phần tử là số.

18. new Array() Trong JavaScript

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

Nhưng bạn có thể yên tâm sử dụng [] thay thế.

Hai câu lệnh khác nhau sau đây đều tạo ra một mảng rỗng mới có tên là points:

const points = new Array();
const points = [];

Hai câu lệnh khác nhau sau đâ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];

Vớinew có thể tạo ra một số kết quả không mong muốn:

// Tạo ra một mảng với ba phần tử:
const points = new Array(40, 100, 1);
// Tạo ra một mảng với hai phần tử:
const points = new Array(40, 100);
// Tạo ra một mảng với một phần tử ???
const points = new Array(40);

19. Làm Thế Nào Để Nhận Biết Một Mảng

Một câu hỏi phổ biến là làm thế nào tôi biết nếu một biến là một mảng?

Vấn đề là toán tử typeof trong JavaScript trả về “object”:

const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;  // Sẽ trả về "object"

Giải pháp 1:

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

Array.isArray(fruits);  // Sẽ trả về true

Giải pháp 2:

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

const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;  // Sẽ trả về true

Qua những điều này, bạn có một cái nhìn tổng quan về cách sử dụng và làm việc với mảng trong JavaScript.