Đối tượng Mảng (array) sẽ giúp bạn lưu giữ nhiều giá trị hơn trong một biến đơn. Nó là tập hợp một dãy có kích thước cố định lưu trữ các phần tử cùng kiểu (type). Mảng được sử dụng để lưu một tập hợp dữ liệu, nhưng nó thường hữu ích hơn khi chúng ta nghĩ nó giống như là một tập hợp của các biến trong cùng một kiểu dữ liệu.

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

const cars = ["Mercedes", "Volvo", "BMW","Porsche"];

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

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

Tuy nhiên, điều gì sẽ xảy ra nếu như bạn không chỉ có 3 chiếc xe, mà là 300 chiếc xe?

Giải pháp ở đây chính là sử dụng một mảng để lưu trữ 300 chiếc xe đó

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 các phần tử bằng các chỉ mục.

Khai báo một mảng

Có 2 cách để khai báo mảng trong Javascript đó là sử dụng dấu [] và sử dụng hàm new Array()

Cú pháp khai báo bằng dấu []

const array_name = [item1item2, ...];      

Trên thực tế mảng thường được khai báo với từ khóa const.

Hãy thử ví dụ sau đây:

<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const cars = ["Mercedes", "Volvo", "BMW","Porsche"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>

Cú pháp khai báo bằng hàm new Arry()

var arr = new Array(item1, item2, ..., itemn);

Hãy thử ví dụ sau đây:

<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = new Array("Mercedess", "Volvo", "BMW","Porsche");
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>

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

const cars = [];
cars[0]= "Mercedess";
cars[1]= "Volvo";
cars[2]= "BMW";
cars[3]= "Porsche";
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const cars = [];
cars[0]= "Mercedess";
cars[1]= "Volvo";
cars[2]= "BMW";
cars[3]= "Porsche";
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>

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

Sau khi đã tạo được mảng rồi thì chúng ta cần phải truy xuất thông tin của mảng. Để có thể lấy ra giá trị của một thành phần trong mảng thì chúng ta sử dụng cú pháp sau:

arr[index];

Trong đó:

arr: là tên mảng mà bạn đã khai báo

index: là vị trị của phần tử trong mảng (hay còn gọi là chỉ mục), vị trí của phần tử bắt đầu từ vị trí 0

const cars = ["Mercedes", "Volvo", "BMW","Porsche"];
let car = cars[0];

Hãy thử ví dụ sau và thay các chỉ số tùy ý để thử và quan sát kết quả

<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Vị trí các phần tử của mảng là một dãy số tăng dần bắt đầu từ 0.</p>
<p id="demo"></p>
<script>
const cars = ["Mercedes", "Volvo", "BMW","Porsche"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>

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.

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

Với JavaScript, toàn bộ các phẩn tử của mảng có thể được truy cập bằng cách tham chiếu đến tên mảng:

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

Hãy thử ví dụ sau:

<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const cars = ["Mercedes", "Volvo", "BMW","Porsche"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>

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.

Mảng sử dụng các chỉ số để truy cập các “phần tử” của nó. Trong ví dụ này, person[0] trả về John:

<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Mảng sử dụng các chỉ số vị trí để truy cập vào các phần tử của nó.</p>
<p id="demo"></p>
<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>
</body>
</html>

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:

<html>
<body>
<h2>JavaScript Objects</h2>
<p>JavaScript sử dung tên để truy cập vào các thuộc tính của đối tượng.</p>
<p id="demo"></p>
<script>
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person.firstName;
</script>
</body>
</html>

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;

Duyệt mảng bằng vòng lặp for

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

<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Cách tốt nhất để duyệt các phần tử của mảng đó là sử dụng vòng lặp:</p>
<p id="demo"></p>
<script>
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>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Bạn cũng có thể sử dụng hàm Array.forEach() để duyệt mảng

<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Array.forEach() calls a function for each array element.</p>
<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;
function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>

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 con số để đặt tên cho chỉ mục

<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>
</body>
</html>

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ố.