Hãy tạo cho mình một danh sách các loại trái cây. Chúng tôi sẽ gọi danh sách của mình là "trái cây" và thêm các giá trị sau:Chuối, dưa, nho. Ôi, tôi yêu trái cây làm sao! Mặc dù điều này nghe có vẻ giống như một hướng dẫn về danh sách mua sắm, nhưng chúng tôi thực sự chỉ tạo cho mình một mảng.
Trong hướng dẫn này, chúng ta sẽ đi qua mảng là gì, cách chúng hoạt động và tại sao bạn nên sử dụng chúng trong mã của mình. Chúng ta sẽ thảo luận một vài ví dụ về mảng đang hoạt động để bạn có thể trở thành một ninja mảng JavaScript!
Mảng là gì?
Mảng là một đối tượng lưu trữ dữ liệu. Mảng chứa một bộ sưu tập các mục có thứ tự và có thể lưu trữ không hoặc nhiều mục. Mảng rất hữu ích trong lập trình vì chúng cho phép bạn lưu trữ các giá trị tương tự trong một biến.
Ví dụ:bạn không cần phải viết mười biến đơn lẻ để liệt kê các loại trái cây yêu thích của mình. Với một mảng, bạn có thể thêm tất cả các loại trái cây yêu thích của mình vào một biến.
Hãy xem xét ví dụ sau:
let fruits = [ "Banana", "Grapes", "Melon" ];
Ở đây, chúng tôi đã tạo một mảng có tên là "trái cây". Nó lưu trữ ba giá trị khác nhau, mỗi giá trị phản ánh một loại trái cây mà chúng ta muốn mua ở cửa hàng tạp hóa. Để khai báo mảng của chúng tôi, chúng tôi đã đặt danh sách các mục trong dấu ngoặc vuông.
Khai báo một mảng
Có hai cách để khai báo một mảng. Cách mà bạn sẽ thấy hầu hết mọi người làm điều đó là bao quanh danh sách các mục có dấu ngoặc vuông, giống như chúng tôi đã làm trước đó:
let berries = [ "Strawberry", "Blueberry", "Gooseberry" ];
Chúng tôi đã khai báo một mảng có ba giá trị trong ví dụ này. Chúng ta cũng có thể sử dụng hàm tạo mảng, sử dụng new từ khóa để khai báo một mảng:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
let berries = new Array( "Strawberry", "Blueberry", "Gooseberry" );
Các đoạn mã này tạo ra cùng một mảng, nhưng sử dụng các phương pháp khác nhau. Lưu ý rằng trong ví dụ thứ hai, chúng tôi đã sử dụng dấu ngoặc tròn để khai báo mảng của chúng tôi. Chúng tôi cũng phải sử dụng new Array phương thức khởi tạo để khai báo một mảng. Chính vì lý do đó mà hầu hết mọi người thích phương pháp đầu tiên hơn; dấu ngoặc vuông dễ nhớ hơn và nhập nhanh hơn.
Mảng không nhất thiết phải bao gồm cùng một loại dữ liệu. Mảng của chúng tôi có thể lưu trữ bất kỳ số lượng các loại dữ liệu khác nhau:
let berries = [ "Strawberry", 1.50, true ];
Mảng này lưu trữ ba loại dữ liệu khác nhau:một chuỗi, một số và một boolean. Bây giờ bạn đã quen với cách khai báo một mảng, bạn đã sẵn sàng để bắt đầu truy cập nội dung của chúng.
Đọc một mảng
Mảng sẽ không hữu ích lắm nếu chúng ta không đọc được giá trị của chúng. Đó là lý do tại sao lập chỉ mục tồn tại. Lập chỉ mục là một cách truy cập các mục riêng lẻ trong một đối tượng có thể lặp lại, chẳng hạn như danh sách.
Mọi phần tử của một mảng trong một mảng được cung cấp số chỉ mục riêng của nó. Những số này bắt đầu bằng 0 và có thể được sử dụng để truy cập các mục riêng lẻ trong một mảng. Bạn có nhớ mảng "trái cây" của chúng tôi không?
let fruits = [ "Banana", "Grapes", "Melon" ];
Dưới đây là các giá trị chỉ mục được gán cho mảng này:
- 0:Chuối
- 1:Nho
- 2:Dưa lưới
Bằng cách sử dụng những con số này, chúng tôi có thể truy cập các mục riêng lẻ trong danh sách của chúng tôi. Giả sử bạn muốn xác định trái cây nào ở vị trí chỉ mục 1 trong mảng của bạn. Bạn có thể làm như vậy bằng cách nêu giá trị chỉ mục trong dấu ngoặc vuông sau tên của mảng:
fruits[1];
Mã của chúng tôi trả về:Nho. Chúng tôi đang đề cập đến vị trí chỉ mục 1, nơi lưu trữ giá trị "Nho". Nếu bạn vượt qua giá trị 0, "Banana" sẽ được trả về. Nếu bạn cố gắng truy cập vào một mục không tồn tại, "không xác định" sẽ được trả lại:
fruits[10];
Đầu ra:không xác định. Trường hợp lập chỉ mục đặc biệt hữu ích là khi bạn muốn lặp qua các mục trong một mảng. Giả sử bạn muốn in mọi loại trái cây trong mảng của mình ra bảng điều khiển. Bạn có thể làm như vậy bằng cách sử dụng vòng lặp for như sau:
for (var i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
} Mã này trả về:
Banana Grapes Melon
Mã của chúng tôi lặp qua mọi mục trong danh sách của chúng tôi, sau đó in từng mục ra bảng điều khiển. Bạn cũng sẽ nhận thấy rằng chúng tôi đã sử dụng length bất động sản. Điều này trả về độ dài của danh sách của chúng tôi.
Thêm các mục vào một mảng
Thông thường, bạn sẽ muốn thêm một giá trị mới vào một mảng sau khi bạn đã khai báo mảng của mình ban đầu. Bạn có thể làm như vậy bằng cách sử dụng push() phương thức mảng.
Chúng tôi đã quên thêm "Dâu tây" vào danh sách các loại trái cây của mình. Ôi không! Đừng lo lắng, chúng tôi luôn có thể thêm nó bằng cách sử dụng push() phương pháp:
let fruits = [
"Banana",
"Grapes",
"Melon"
];
fruits.push("Strawberry");
console.log(fruits);
Bây giờ chúng tôi đã chạy mã này, mảng của chúng tôi trông giống như sau:
| Banana | Nho | Melon | Dâu tây |
| 1 | 2 | 3 |
Bạn có thể thêm dữ liệu vào đầu mảng của mình bằng cách sử dụng unshift() . Dâu tây rất quan trọng trong danh sách mua sắm của chúng tôi nên chúng tôi muốn chúng xuất hiện đầu tiên:
let fruits = [
"Banana",
"Grapes",
"Melon"
];
fruits.push("Strawberry");
console.log(fruits);
Điều này sẽ làm cho danh sách "trái cây" ban đầu của chúng tôi xuất hiện như sau:
| Strawberry | Chuối | Nho | Melon |
| 1 | 2 | 3 |
Xóa các mục khỏi một mảng
Hóa ra là chúng ta đã có một quả dưa ở nhà, vì vậy chúng ta không cần phải mua một quả dưa. Mua một quả dưa khác sẽ có ích gì, phải không? Bởi vì dưa nằm ở cuối danh sách của chúng tôi, chúng tôi có hai lựa chọn để loại bỏ nó:
-
splice():Loại bỏ các phần tử theo số chỉ mục của chúng. -
pop():Xóa một phần tử khỏi phần cuối của mảng.
Hãy sử dụng splice() làm ví dụ:
let fruits = [ "Banana", "Grapes", "Melon" ]; fruits.splice(3, 1); console.log(fruits);
Mã của chúng tôi trả về:
Strawberry Banana Grapes
splice() chấp nhận hai tham số. Đầu tiên là số chỉ mục cần xóa khỏi mảng và thứ hai là số mục cần xóa. Trong trường hợp này, chúng tôi muốn xóa mục có giá trị chỉ mục 3, vì vậy chúng tôi đã chỉ định “3, 1” làm tham số của mình.
pop() không chấp nhận bất kỳ thông số nào. Nó chỉ xóa mục cuối cùng của danh sách:
let fruits = [ "Banana", "Grapes", "Melon" ]; fruits.pop(); console.log(fruits);
Mã của chúng tôi trả về:
Banana Grapes
Bạn cũng có thể sử dụng shift() để xóa một mục khỏi đầu danh sách:
let fruits = [ "Banana", "Grapes", "Melon" ]; fruits.shift(); console.log(fruits);
Mã của chúng tôi trả về:
Grapes Melon
push() và unshift() thêm các mục vào danh sách. pop() và shift() xóa các mục khỏi danh sách. Phương thức nối cũng có thể được sử dụng để xóa một mục khỏi danh sách dựa trên giá trị chỉ mục của nó.
Thay đổi các mục trong một mảng
Mặc dù chuối là một loại trái cây ngon, nhưng chúng thường to đến mức bạn không thể ăn một quả chỉ như một bữa ăn nhẹ khi cảm thấy hơi bùi. Chuối con dễ ăn hơn.
Bây giờ, giả sử chúng tôi muốn thay đổi danh sách “trái cây” để chúng tôi mua chuối cho trẻ em thay vì chuối thông thường. Chúng ta có thể làm như vậy bằng cách sử dụng toán tử gán giống như chúng ta làm với bất kỳ biến nào:
fruits[0] = "Baby bananas"; console.log(fruits);
Mã của chúng tôi trả về:
Baby bananas Grapes Melon
Chúng tôi đã sửa đổi mục ở vị trí chỉ mục 0 để lưu trữ giá trị “Chuối non”. Bạn không cần sử dụng bất kỳ phương pháp đặc biệt nào để thực hiện thay đổi này; toán tử gán được sử dụng để thay đổi các giá trị trong một mảng.
Kết luận
Đó là kiến thức cơ bản về những gì bạn cần biết về mảng JavaScript. Còn nhiều thứ để bạn tìm hiểu, nhưng đó chính là điều khiến việc lập trình trở nên thú vị:luôn có một thử thách mới để bạn giải quyết. Nếu không có gì khác, bạn đã biết về các loại trái cây yêu thích của tôi. Mặc dù tôi muốn nói rằng tôi rất thích blackcurrant, điều mà tôi không đề cập trong hướng dẫn này.
Bây giờ, bạn đã sẵn sàng để bắt đầu làm việc với các mảng JavaScript như một chuyên gia!