Mảng của JavaScript

Mảng JavaScript được sử dụng để lưu trữ nhiều giá trị trong một biến duy nhất.

Mô hình

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

Thử ngay

Mảng là gì?

Mảng là một biến đặc biệt, có thể lưu trữ nhiều hơn một giá trị trong một lần.

Nếu bạn có danh sách dự án (ví dụ, danh sách thương hiệu xe cộ), lưu trữ thương hiệu xe trong một biến duy nhất nên như sau:

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

Nhưng, nếu bạn muốn lặp qua tất cả các xe và tìm một giá trị cụ thể? Giả sử không phải là ba thương hiệu xe mà là ba trăm thương hiệu xe?

Giải pháp là mảng!

Mảng có thể lưu trữ nhiều giá trị trong một tên duy nhất, và có thể truy cập các giá trị đó thông qua số chỉ mục.

Tạo mảng

Sử dụng văn bản mảng là phương pháp đơn giản nhất để tạo mảng trong JavaScript.

Ngữ pháp:

var array-name = [item1, item2, ...];

Mô hình

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

Thử ngay

Khoảng trống và dòng mới không quan trọng. Định nghĩa có thể trải qua nhiều dòng:

Mô hình

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

Thử ngay

Hãy không viết dấu phẩy逗 sau phần tử cuối cùng (ví dụ "BMW",).

Có thể có vấn đề tương thích giữa các trình duyệt.

sử dụng từ khóa JavaScript mới

Ví dụ dưới đây cũng sẽ tạo ra một mảng và gán giá trị cho nó:

Mô hình

var cars = new Array("Saab", "Volvo", "BMW");

Thử ngay

Cả hai ví dụ trên có hiệu quả hoàn toàn giống nhau. Không cần sử dụng new Array().

Do sự đơn giản, khả năng đọc và tốc độ thực thi, hãy sử dụng phương pháp đầu tiên (phương pháp văn bản mảng).

truy cập phần tử mảng

Chúng ta thông qua việc tham chiếuSố chỉ mục (biểu thức chỉ mục)để tham chiếu một phần tử mảng.

Câu lệnh này truy cập giá trị của phần tử đầu tiên trong cars:

var name = cars[0];

Câu lệnh này thay đổi phần tử đầu tiên trong cars:

cars[0] = "Opel";

Mô hình

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

Thử ngay

[0] là phần tử đầu tiên trong mảng. [1] là phần tử thứ hai. Mảng bắt đầu từ số 0.

Thay đổi 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";

Mô hình

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

Thử ngay

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

Bằng cách sử dụ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:

Mô hình

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

Thử ngay

mảng là đối tượng

mảng là loại đối tượng đặc biệt. Trong JavaScript, sử dụng typeof ký tự toán sẽ trả về "object".

nhưng, mảng trong JavaScript tốt nhất nên được mô tả bằng mảng.

sử dụng mảngsốđể truy cập các 'phần tử'. Trong ví dụ này,person[0] trả về Bill:

mảng:

var person = ["Bill", "Gates", 62];

Thử ngay

đối tượng sử dụngtênđể truy cập các 'thành viên'. Trong ví dụ này,person.firstName trả về Bill:

Đối tượng:

var person = {firstName:"Bill", lastName:"Gates", age:19};

Thử ngay

phần tử của mảng có thể là đối tượng

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

Do đó, bạn có thể lưu các biến loại khác nhau trong cùng một mảng.

Bạn có thể lưu đối tượng trong mảng. Bạn có thể lưu hàm trong mảng. Bạn thậm chí có thể lưu mảng trong 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

Thực lực thực sự của mảng trong JavaScript ẩn trong các thuộc tính và phương thức của mảng:

Mô hình

var x = cars.length;   // thuộc tính length trả về số lượng phần tử
var y = cars.sort();   // phương thức sort() sắp xếp mảng

Chúng ta sẽ học về các phương thức của mảng trong chương tiếp theo.

thuộc tính length

length thuộc tính trả về độ dài của mảng (số lượng phần tử của mảng).

Mô hình

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // độ dài của fruits là 4

Thử ngay

length thuộc tính luôn lớn hơn chỉ số tối đa của mảng (biểu thức).

truy cập phần tử đầu tiên của mảng

Mô hình

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

Thử ngay

truy cập phần tử cuối cùng của mảng

Mô hình

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Thử ngay

duyệt qua các phần tử của mảng

Cách an toàn nhất để duyệt mảng là sử dụng "for"Vòng lặp:

Mô hình

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

Thử ngay

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

Mô hình

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Thử ngay

Thêm phần tử mảng

Cách tốt nhất để thêm phần tử vào mảng là sử dụng push() Phương thức:

Mô hình

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // Thêm một phần tử mới (Lemon) vào fruits

Thử ngay

Cũng có thể sử dụng length Thuộc tính thêm phần tử mới vào mảng:

Mô hình

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // Thêm một phần tử mới (Lemon) vào fruits

Thử ngay

Cảnh báo!

Thêm phần tử có chỉ số cao nhất có thể tạo ra "hố không định nghĩa" trong mảng:

Mô hình

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // Thêm một phần tử mới (Lemon) vào fruits

Thử ngay

Mảng liên quan

Nhiều yếu tố lập trình hỗ trợ mảng chỉ mục đặt tên.

Mảng có chỉ mục đặt tên được gọi là mảng liên quan (hoặc hash).

JavaScript không hỗ trợmảng chỉ mục đặt tên.

Trong JavaScript, mảng chỉ có thể sử dụngchỉ số số.

Mô hình

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length trả về 3
var y = person[0];              // person[0] trả về "Bill"

Thử ngay

Cảnh báo!

Nếu bạn sử dụng chỉ mục đặt tên, JavaScript sẽ định nghĩa lại mảng thành đối tượng tiêu chuẩn.

Sau đó, tất cả các phương pháp và thuộc tính của mảng sẽ tạo ra kết quả không chính xác.

Mô hình:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length sẽ trả về 0
var y = person[0];              // person[0] sẽ trả về undefined

Thử ngay

Khác biệt giữa mảng và đối tượng

Trong JavaScript,MảngSử dụngchỉ số số.

Trong JavaScript,đối tượngSử dụngChỉ số đặt tên.

Mảng là loại đối tượng đặc biệt, có chỉ số 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
  • Nếu muốn tên phần tử làchuỗi (text)thì nên sử dụngđối tượng.
  • Nếu muốn tên phần tử làsốthì nên sử dụngMảng.

Tránh sử dụng new Array()

Không cần thiết phải sử dụng bộ tạo mảng built-in của JavaScript new Array().

Vui lòng sử dụng [] Thay vào đó!

Dưới đây là hai câu lệnh khác nhau tạo ra một mảng mới trống có tên là points:

var points = new Array();         // Xấu
var points = [];                  // Tốt

Dưới đây là hai câu lệnh khác nhau tạo ra một mảng mới chứa sáu số:

var points = new Array(40, 100, 1, 5, 25, 10); // Xấu
var points = [40, 100, 1, 5, 25, 10];          // Tốt

Thử ngay

new Từ khóa chỉ làm cho mã phức tạp hơn. Nó cũng sẽ tạo ra một số kết quả không mong đợi:

var points = new Array(40, 100);  // Tạo ra mảng chứa hai phần tử (40 và 100)

Giả sử xóa một phần tử trong đó sẽ như thế nào?

var points = new Array(40);       // Tạo ra mảng chứa 40 phần tử chưa định nghĩa !!

Thử ngay

Làm thế nào để nhận biết mảng

Một vấn đề phổ biến là: Tôi làm thế nào để biết một biến có phải là mảng không?

Vấn đề ở toán tử JavaScript là typeof Trả về "object" :

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // Trả về object

Thử ngay

Toán tử typeof trả về "object", vì mảng JavaScript thuộc về đối tượng.

Giải pháp 1:

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

Array.isArray(fruits);     // Trả về true

Thử ngay

Vấn đề của phương án này là ECMAScript 5 Không hỗ trợ trình duyệt cũ.

Giải pháp 2:

Tạo riêng của bạn isArray() Hàm này được sử dụng để giải quyết vấn đề:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

Thử ngay

Nếu tham số là mảng, thì hàm trên luôn trả về true.

Hoặc một cách giải thích chính xác hơn là: Nếu đối tượng nguyên mẫu chứa từ "Array" thì trả về true.

Giải pháp 3:

Nếu đối tượng được tạo bởi hàm xây dựng cho trước, thì instanceof Điều kiện trả về true:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // Trả về true

Thử ngay