• Trang chủ
• Học JavaScript
• Mảng JS

Mảng JS

Trong hướng dẫn này, bạn sẽ học cách tạo và thao tác với mảng trong JavaScript.

Mảng là gì

Mảng là các biến phức tạp cho phép chúng ta lưu trữ nhiều hơn một giá trị hoặc một nhóm giá trị dưới một tên biến duy nhất. Mảng JavaScript có thể lưu trữ bất kỳ giá trị hợp lệ nào, bao gồm chuỗi, số, đối tượng, hàm và thậm chí cả các mảng khác, do đó có thể tạo các cấu trúc dữ liệu phức tạp hơn, chẳng hạn như một mảng đối tượng hoặc một mảng các mảng.

Giả sử bạn muốn lưu tên màu trong mã JavaScript của mình. Lưu trữ tên màu từng cái một trong một biến có thể giống như thế này:

var color1 = "Red";
var color2 = "Green";
var color3 = "Blue";

Nhưng điều gì sẽ xảy ra nếu bạn cần lưu tên tiểu bang hoặc tên thành phố của một quốc gia trong các biến và lần này không chỉ ba mà có thể là hàng trăm. Việc lưu trữ từng cái trong một biến riêng biệt là khá khó và nhàm chán. Ngoài ra, việc sử dụng đồng thời nhiều biến số như vậy và theo dõi tất cả chúng sẽ là một nhiệm vụ rất khó khăn. Và ở đây mảng phát huy tác dụng. Mảng giải quyết vấn đề này bằng cách cung cấp một cấu trúc có thứ tự để lưu trữ nhiều giá trị hoặc một nhóm giá trị.

Tạo một mảng

Cách đơn giản nhất để tạo một mảng trong JavaScript là đặt một danh sách các giá trị được phân tách bằng dấu phẩy trong dấu ngoặc vuông ( []), như được hiển thị trong cú pháp sau:

Mảng cũng có thể được tạo bằng cách sử dụng Array()hàm tạo như trong cú pháp sau. Tuy nhiên, để đơn giản, nên sử dụng cú pháp trước đó.

Dưới đây là một số ví dụ về mảng được tạo bằng cú pháp mảng:

var colors = ["Red", "Green", "Blue"]; 
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var cities = ["London", "Paris", "New York"];
var person = ["John", "Wick", 32];

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

Các phần tử mảng có thể được truy cập bằng chỉ mục của chúng bằng cách sử dụng ký hiệu dấu ngoặc vuông. Chỉ số là một số đại diện cho vị trí của một phần tử trong một mảng.

Các chỉ mục mảng dựa trên số không. Điều này có nghĩa là mục đầu tiên của một mảng được lưu trữ ở chỉ mục 0, không phải 1, mục thứ hai được lưu trữ ở chỉ mục 1, v.v. Chỉ số của mảng bắt đầu từ 0 và tăng dần đến số phần tử trừ đi 1. Vì vậy, mảng năm phần tử sẽ có chỉ số từ 0 đến 4.

Ví dụ sau sẽ chỉ cho bạn cách lấy phần tử mảng riêng lẻ theo chỉ mục của chúng.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits[0]); // Prints: Apple
document.write(fruits[1]); // Prints: Banana
document.write(fruits[2]); // Prints: Mango
document.write(fruits[fruits.length - 1]); // Prints: Papaya

Lấy chiều dài của một mảng

Thuộc tínhlength trả về độ dài của một mảng, là tổng số phần tử có trong mảng. Độ dài mảng luôn lớn hơn chỉ số của bất kỳ phần tử nào của nó.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.length); // Prints: 5

Vòng qua các phần tử mảng

Bạn có thể sử dụng vòng lặp for để truy cập từng phần tử của một mảng theo thứ tự tuần tự, như sau:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Iterates over array elements
for(var i = 0; i < fruits.length; i++) {    
    document.write(fruits[i] + "<br>"); // Print array element
}

ECMAScript 6 đã giới thiệu một cách đơn giản hơn để lặp qua phần tử mảng, đó là vòng lặp for-of. Trong vòng lặp này, bạn không phải khởi tạo và theo dõi biến bộ đếm vòng lặp ( i).

Đây là ví dụ tương tự được viết lại bằng vòng lặp for-of:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Iterates over array elements
for(var fruit of fruits) {    
    document.write(fruit + "<br>"); // Print array element
}

Bạn cũng có thể lặp qua các phần tử mảng bằng cách sử dụng vòng lặp for-in, như sau:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i in fruits) {  
    document.write(fruits[i] + "<br>");
}

Thêm các phần tử mới vào một mảng

Để thêm một phần tử mới vào cuối một mảng, chỉ cần sử dụng phương thứcpush() như sau:

var colors = ["Red", "Green", "Blue"]; 
colors.push("Yellow");
 
document.write(colors); // Prints: Red,Green,Blue,Yellow
document.write(colors.length); // Prints: 4

Tương tự, để thêm một phần tử mới vào đầu mảng unshift(), hãy sử dụng phương thức như sau:

var colors = ["Red", "Green", "Blue"]; 
colors.unshift("Yellow");
 
document.write(colors); // Prints: Yellow,Red,Green,Blue
document.write(colors.length); // Prints: 4

Bạn cũng có thể thêm nhiều phần tử cùng một lúc bằng cách sử dụng các phương thức push()và unshift()như sau:

var colors = ["Red", "Green", "Blue"];
colors.push("Pink", "Voilet");
colors.unshift("Yellow", "Grey");
 
document.write(colors); // Prints: Yellow,Grey,Red,Green,Blue,Pink,Voilet
document.write(colors.length); // Prints: 7

Loại bỏ các phần tử khỏi một mảng

Để xóa phần tử cuối cùng khỏi mảng, bạn có thể sử dụng phương thức pop(). Phương thức này trả về giá trị được bật ra. Đây là một ví dụ:

var colors = ["Red", "Green", "Blue"];
var last = colors.pop();
 
document.write(last); // Prints: Blue
document.write(colors.length); // Prints: 2

Tương tự, bạn có thể xóa phần tử đầu tiên khỏi mảng bằng phương thức shift(). Phương thức này cũng trả về giá trị đã được chuyển ra ngoài. Đây là một ví dụ:

var colors = ["Red", "Green", "Blue"];
var first = colors.shift();
 
document.write(first); // Prints: Red
document.write(colors.length); // Prints: 2

Thêm hoặc xóa các phần tử ở bất kỳ vị trí nào

Phương thức splice()là một phương thức mảng rất linh hoạt cho phép bạn thêm hoặc xóa các phần tử khỏi bất kỳ chỉ mục nào, sử dụng cú pháp arr.splice(startIndex, deleteCount, elem1, ..., elemN).

Phương thức này nhận ba tham số: tham số đầu tiên là chỉ số để bắt đầu nối mảng, nó được yêu cầu; tham số thứ hai là số phần tử cần loại bỏ (dùng 0nếu bạn không muốn loại bỏ phần tử nào), tùy chọn; và tham số thứ ba là tập hợp các phần tử thay thế, nó cũng là tùy chọn. Ví dụ sau đây cho thấy nó hoạt động như thế nào:

var colors = ["Red", "Green", "Blue"];
var removed = colors.splice(0,1); // Remove the first element
 
document.write(colors); // Prints: Green,Blue
document.write(removed); // Prints: Red (one item array)
document.write(removed.length); // Prints: 1
 
removed = colors.splice(1, 0, "Pink", "Yellow"); // Insert two items at position one
document.write(colors); // Prints: Green,Pink,Yellow,Blue
document.write(removed); // Empty array
document.write(removed.length); // Prints: 0
 
removed = colors.splice(1, 1, "Purple", "Voilet"); // Insert two values, remove one
document.write(colors); //Prints: Green,Purple,Voilet,Yellow,Blue
document.write(removed); // Prints: Pink (one item array)
document.write(removed.length); // Prints: 1

Phương thức này splice()trả về một mảng gồm các phần tử đã bị xóa hoặc một mảng trống nếu không có phần tử nào bị xóa, như bạn có thể thấy trong ví dụ trên. Nếu đối số thứ hai bị bỏ qua, tất cả các phần tử từ đầu đến cuối của mảng đều bị loại bỏ. Không giống như phương thức slice() và concat(), phương thức splice() sửa đổi mảng mà nó được gọi.

Tạo một chuỗi từ một mảng

Có thể có những tình huống mà bạn chỉ muốn tạo một chuỗi bằng cách nối các phần tử của một mảng. Để làm điều này, bạn có thể sử dụng phương thức join(). Phương thức này nhận một tham số tùy chọn là một chuỗi phân cách được thêm vào giữa mỗi phần tử. Nếu bạn bỏ qua dấu phân cách thì JavaScript sẽ sử dụng dấu phẩy ( ,) theo mặc định. Ví dụ sau đây cho thấy nó hoạt động như thế nào:

var colors = ["Red", "Green", "Blue"];
 
document.write(colors.join()); // Prints: Red,Green,Blue
document.write(colors.join("")); // Prints: RedGreenBlue
document.write(colors.join("-")); // Prints: Red-Green-Blue
document.write(colors.join(", ")); // Prints: Red, Green, Blue

Bạn cũng có thể chuyển đổi một mảng thành một chuỗi được phân tách bằng dấu phẩy bằng cách sử dụng phương thức toString(). Phương thức này không chấp nhận tham số phân cách như join(). Đây là một ví dụ:

var colors = ["Red", "Green", "Blue"];
document.write(colors.toString()); // Prints: Red,Green,Blue

Trích xuất một phần của một mảng

Nếu bạn muốn trích xuất một phần của mảng (tức là mảng con) nhưng vẫn giữ nguyên mảng ban đầu, bạn có thể sử dụng phương thức slice(). Phương pháp này nhận 2 tham số: chỉ mục bắt đầu (chỉ mục bắt đầu trích xuất) và chỉ mục kết thúc tùy chọn (chỉ mục trước khi kết thúc trích xuất), như arr.slice(startIndex, endIndex). Đây là một ví dụ:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var subarr = fruits.slice(1, 3);
document.write(subarr); // Prints: Banana,Mango

Nếu tham số endIndex bị bỏ qua, tất cả các phần tử ở cuối mảng sẽ được trích xuất. Bạn cũng có thể chỉ định các chỉ mục hoặc độ lệch âm — trong trường hợp đó, phương thức slice() trích xuất các phần tử từ phần cuối của một mảng, thay vì phần đầu. Ví dụ:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits.slice(2)); // Prints: Mango,Orange,Papaya
document.write(fruits.slice(-2)); // Prints: Orange,Papaya
document.write(fruits.slice(2, -1)); // Prints: Mango,Orange

Hợp nhất hai hoặc nhiều mảng

Phương thức concat()có thể được sử dụng để hợp nhất hoặc kết hợp hai hoặc nhiều mảng. Phương thức này không thay đổi các mảng hiện có, thay vào đó nó trả về một mảng mới. Ví dụ:

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
 
// Creating new array by combining pets and wilds arrays
var animals = pets.concat(wilds); 
document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra

Phương thức concat()có thể nhận bất kỳ số lượng đối số mảng nào, vì vậy bạn có thể tạo một mảng từ bất kỳ số lượng mảng nào khác, như minh họa trong ví dụ sau:

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
var bugs = ["Ant", "Bee"];
 
// Creating new array by combining pets, wilds and bugs arrays
var animals = pets.concat(wilds, bugs); 
document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee

Tìm kiếm thông qua một mảng

Nếu bạn muốn tìm kiếm một mảng cho một giá trị cụ thể, bạn chỉ cần sử dụng indexOf()và lastIndexOf(). Nếu giá trị được tìm thấy, cả hai phương thức đều trả về một chỉ mục đại diện cho phần tử mảng. Nếu giá trị không được tìm thấy, -1được trả về. Phương thức indexOf() trả về cái đầu tiên được tìm thấy, trong khi phương thức lastIndexOf()trả về cái cuối cùng được tìm thấy.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits.indexOf("Apple")); // Prints: 0
document.write(fruits.indexOf("Banana")); // Prints: 1
document.write(fruits.indexOf("Pineapple")); // Prints: -1

Cả hai phương thức cũng chấp nhận một tham số số nguyên tùy chọn từ chỉ mục chỉ định chỉ mục trong mảng để bắt đầu tìm kiếm. Đây là một ví dụ:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
// Searching forwards, starting at from- index
document.write(arr.indexOf(1, 2)); // Prints: 3
 
// Searching backwards, starting at from index
document.write(arr.lastIndexOf(1, 2)); // Prints: 0

Bạn cũng có thể sử dụng phương thức includes() để tìm hiểu xem một mảng có bao gồm một phần tử nào đó hay không. Phương thức này nhận các tham số giống như phương thức indexOf()và lastIndexOf(), nhưng nó trả về truehoặc falsethay vì số chỉ mục. Ví dụ:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
document.write(arr.includes(1)); // Prints: true
document.write(arr.includes(6)); // Prints: false
document.write(arr.includes(1, 2)); // Prints: true
document.write(arr.includes(3, 4)); // Prints: false

Nếu bạn muốn tìm kiếm một mảng dựa trên điều kiện nhất định thì bạn có thể sử dụng phương thức find() JavaScript mới được giới thiệu trong ES6. Phương thức này trả về giá trị của phần tử đầu tiên trong mảng thỏa mãn chức năng kiểm tra được cung cấp. Nếu không nó trở lại undefined.

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.find(function(element) {
  return element > 4;
});
document.write(result); // Prints: 5

Có một phương thức tương tự như phương thức find()is findIndex(), trả về chỉ số của phần tử được tìm thấy trong mảng thay vì giá trị của nó. Ví dụ:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.findIndex(function(element) {
  return element > 6;
});
document.write(result); // Prints: 8

Phương thức find()chỉ tìm kiếm phần tử đầu tiên thỏa mãn chức năng kiểm tra được cung cấp. Tuy nhiên, nếu bạn muốn tìm ra tất cả các yếu tố phù hợp, bạn có thể sử dụng phương thức filter().

Phương thức filter() tạo một mảng mới với tất cả các phần tử vượt qua thành công bài kiểm tra đã cho. Ví dụ sau đây sẽ cho bạn thấy điều này thực sự hoạt động như thế nào:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.filter(function(element) {
  return element > 4;
});
document.write(result); // Prints: 5,7
document.write(result.length); // Prints: 2