Hiểu mảng trong JavaScript

Mảng trong JavaScript là một loại đối tượng toàn cục được sử dụng để lưu trữ dữ liệu. Mảng bao gồm một tập hợp hoặc danh sách có thứ tự chứa không hoặc nhiều kiểu dữ liệu và sử dụng các chỉ số được đánh số bắt đầu từ 0 để truy cập các mục cụ thể.

---

Mảng rất hữu ích vì chúng lưu trữ nhiều giá trị trong một biến duy nhất, có thể cô đọng và tổ chức mã của ta , làm cho nó dễ đọc và dễ bảo trì hơn. Mảng có thể chứa bất kỳ kiểu dữ liệu nào, bao gồm số , chuỗi và đối tượng .

Để chứng minh các mảng có thể hữu ích như thế nào, hãy cân nhắc việc gán năm đại dương trên thế giới cho các biến của riêng chúng.

// Assign the five oceans to five variables const ocean1 = "Pacific"; const ocean2 = "Atlantic"; const ocean3 = "Indian"; const ocean4 = "Arctic"; const ocean5 = "Antarctic"; 

Phương pháp này rất dài dòng và có thể nhanh chóng trở nên khó bảo trì và theo dõi.

Sử dụng mảng, ta có thể đơn giản hóa dữ liệu của bạn .

// Assign the five oceans let oceans = [     "Pacific",     "Atlantic",     "Indian",     "Arctic",     "Antarctic", ]; 

Thay vì tạo năm biến riêng biệt, bây giờ ta có một biến chứa tất cả năm phần tử. Ta đã sử dụng dấu ngoặc vuông - [] - để tạo một mảng.

Để truy cập một mục cụ thể, hãy nối index của nó vào biến.

// Print out the first item of the oceans array oceans[0]; 

Output
Pacific 

Trong hướng dẫn này, ta sẽ học cách tạo mảng; cách chúng được lập index ; cách thêm, sửa đổi, loại bỏ hoặc truy cập các mục trong một mảng; và cách lặp qua các mảng.

Tạo một mảng

Có hai cách để tạo một mảng trong JavaScript:

• Mảng ký tự, sử dụng dấu ngoặc vuông.
• Phương thức tạo mảng, sử dụng từ khóa new .

Hãy trình bày cách tạo một mảng các loài cá mập bằng cách sử dụng ký tự mảng, được khởi tạo bằng [] .

// Initialize array of shark species with array literal let sharks = [     "Hammerhead",     "Great White",     "Tiger", ]; 

Bây giờ đây là cùng một dữ liệu được tạo với phương thức khởi tạo mảng, được khởi tạo bằng new Array() .

// Initialize array of shark species with array constructor let sharks = new Array(     "Hammerhead",     "Great White",     "Tiger", ); 

Cả hai phương thức sẽ tạo một mảng. Tuy nhiên, phương thức mảng đen (dấu ngoặc vuông) phổ biến và được ưu tiên hơn nhiều, vì phương thức khởi tạo new Array() có thể có sự mâu thuẫn và kết quả không mong muốn. Sẽ rất hữu ích nếu bạn biết về hàm tạo mảng trong trường hợp bạn gặp nó ở dòng dưới.

Ta có thể in ra toàn bộ một mảng, mảng này sẽ hiển thị giống như đầu vào của ta .

// Print out the entire sharks array sharks; 

Output
[ 'Hammerhead', 'Great White', 'Tiger' ] 

Mảng thường được sử dụng để group các danh sách kiểu dữ liệu tương tự lại với nhau, nhưng về mặt kỹ thuật, chúng có thể chứa bất kỳ giá trị nào hoặc hỗn hợp các giá trị, bao gồm cả các mảng khác.

// Initialize array of mixed datatypes let mixedData = [     "String",     null,     7,     [         "another",         "array",     ], ]; 

Sau khi tạo mảng, ta có thể thao tác với chúng theo nhiều cách, nhưng trước tiên ta phải hiểu cách lập index của mảng.

Lưu ý: Bạn có thể thấy mục cuối cùng trong một mảng có hoặc không có dấu phẩy cuối cùng. Đây được gọi là dấu phẩy ở cuối . Thông thường bạn sẽ thấy chúng bị bỏ qua, nhưng nhìn chung, bạn nên đưa chúng vào mã của bạn hơn, vì điều này làm cho việc kiểm soát version khác nhau rõ ràng hơn và giúp dễ dàng thêm và xóa các mục mà không bị lỗi. Lưu ý dấu phẩy ở cuối không được phép trong tệp JSON .

Mảng lập index

Nếu bạn đã học về lập index và thao tác với chuỗi trong JavaScript , bạn có thể đã quen với khái niệm lập index mảng, vì một chuỗi tương tự như một mảng.

Mảng không có cặp tên / giá trị. Thay vào đó, chúng được lập index với các giá trị nguyên bắt đầu bằng 0 . Đây là một mảng ví dụ, được gán cho seaCreatures .

let seaCreatures = [     "octopus",     "squid",     "shark",     "seahorse",     "starfish", ]; 

Dưới đây là bảng phân tích cách lập index từng mục trong mảng seaCreatures .

bạch tuộc	mực ống	cá mập	cá ngựa	sao biển
0	1	2	3	4

Mục đầu tiên trong mảng là octopus , được lập index bằng 0 . Vật phẩm cuối cùng là starfish , được chỉ số 4 . Việc đếm bắt đầu bằng 0 trong các chỉ số, điều này đi ngược lại với trực giác tự nhiên của ta là bắt đầu đếm từ 1, vì vậy cần đặc biệt lưu ý để nhớ điều này cho đến khi nó trở thành tự nhiên.

Ta có thể tìm ra có bao nhiêu mục trong một mảng có thuộc tính length .

seaCreatures.length; 

Output
5 

Mặc dù các chỉ số của seaCreatures bao gồm từ 0 đến 4 , thuộc tính length sẽ xuất ra số lượng mục thực tế trong mảng, bắt đầu bằng 1.

Nếu ta muốn tìm số index của một mục cụ thể trong một mảng, chẳng hạn như seahorse , ta có thể sử dụng phương thức indexOf() .

seaCreatures.indexOf("seahorse"); 

Output
3 

Nếu không tìm thấy số index , chẳng hạn như đối với một giá trị không tồn tại, console sẽ trả về -1 .

seaCreatures.indexOf("cuttlefish"); 

Output
-1 

Với số index tương ứng với các mục trong một mảng, ta có thể truy cập từng mục một cách riêng biệt để làm việc với các mục đó.

Truy cập các mục trong một mảng

Một mục trong một mảng JavaScript được truy cập bằng cách tham chiếu đến số index của mục đó trong dấu ngoặc vuông.

seaCreatures[1]; 

Output
squid 

Ta biết 0 sẽ luôn xuất ra mục đầu tiên trong một mảng. Ta cũng có thể tìm mục cuối cùng trong một mảng bằng cách thực hiện một thao tác trên thuộc tính length và áp dụng nó làm số index mới.

const lastIndex = seaCreatures.length - 1;  seaCreatures[lastIndex]; 

Output
starfish 

Cố gắng truy cập một mục không tồn tại sẽ trả về undefined .

seaCreatures[10]; 

Output
undefined 

Để truy cập các mục trong một mảng lồng nhau, bạn sẽ thêm một số index khác để tương ứng với mảng bên trong.

let nestedArray = [     [         "salmon",         "halibut",     ],     [         "coral",         "reef",     ] ];  nestedArray[1][0]; 

Output
coral 

Trong ví dụ trên, ta đã truy cập vào mảng ở vị trí 1 của biến nestedArray , sau đó là mục ở vị trí 0 trong mảng bên trong.

Thêm một mục vào một mảng

Trong biến seaCreatures ta có năm mục, bao gồm các chỉ số từ 0 đến 4 . Nếu ta muốn thêm một mục mới vào mảng, ta có thể gán một giá trị cho index tiếp theo.

seaCreatures[5] = "whale";  seaCreatures; 

Output
[ 'octopus',     'squid',     'shark',     'seahorse',     'starfish',     'whale' ] 

Nếu ta thêm một mục và vô tình bỏ qua một index , nó sẽ tạo ra một mục không xác định trong mảng.

seaCreatures[7] = "pufferfish";  seaCreatures; 

Output
[ 'octopus',     'squid',     'shark',     'seahorse',     'starfish',     'whale',     ,     'pufferfish' ] 

Cố gắng truy cập vào mục mảng bổ sung sẽ trả về undefined .

seaCreatures[6] 

Output
undefined 

Các vấn đề như vậy có thể tránh được bằng cách sử dụng phương thức push() , phương thức này sẽ thêm một mục vào cuối một mảng.

// Append lobster to the end of the seaCreatures array seaCreatures.push("lobster");  seaCreatures; 

Output
[ 'octopus',     'squid',     'shark',     'seahorse',     'starfish',     ,     'whale',     'pufferfish',     'lobster' ] 

Ở đầu kia của phổ, phương thức unshift() sẽ thêm một mục vào đầu một mảng.

// Append dragonfish to the beginning of the seaCreatures array seaCreatures.unshift("dragonfish");  seaCreatures; 

Output
[ 'dragonfish',     'octopus',     'squid',     'shark',     'seahorse',     'starfish',     'whale',     ,     'pufferfish',     'lobster' ] 

Giữa push() và unshift() bạn có thể thêm các mục vào đầu và cuối của một mảng.

Xóa một mục khỏi một mảng

Khi ta muốn xóa một mục cụ thể khỏi một mảng, ta sử dụng phương thức splice() . Trong mảng seaCreatures , ta đã vô tình tạo một mục mảng không xác định trước đó, vì vậy hãy xóa mục đó ngay bây giờ.

seaCreatures.splice(7, 1);  seaCreatures; 

Output
[ 'dragonfish',     'octopus',     'squid',     'shark',     'seahorse',     'starfish',     'whale',     'pufferfish',     'lobster' ] 

Trong phương thức splice() , tham số đầu tiên là số index cần loại bỏ (trong trường hợp này là 7 ) và tham số thứ hai là số lượng mục cần được loại bỏ. Ta đặt 1 , biểu thị rằng chỉ một mục sẽ bị xóa.

Phương thức splice() sẽ thay đổi biến ban đầu. Nếu bạn muốn biến ban đầu không thay đổi, hãy sử dụng slice() và gán kết quả cho một biến mới.

let newArray = slice(7, 1); 

Phương thức pop() sẽ xóa mục cuối cùng trong một mảng.

// Remove the last item from the seaCreatures array seaCreatures.pop();  seaCreatures; 

Output
[ 'dragonfish',     'octopus',     'squid',     'shark',     'seahorse',     'starfish',     'whale',     'pufferfish' ] 

lobster đã bị xóa là mục cuối cùng của mảng. Để loại bỏ mục đầu tiên của mảng, ta sẽ sử dụng phương thức shift() .

// Remove the first item from the seaCreatures array seaCreatures.shift();  seaCreatures; 

Output
[ 'octopus',     'squid',     'shark',     'seahorse',     'starfish',     'whale',     'pufferfish' ] 

Bằng cách sử dụng pop() và shift() , ta có thể loại bỏ các mục từ đầu và cuối của mảng. Sử dụng pop() được ưu tiên khi có thể, vì phần còn lại của các mục trong mảng vẫn giữ nguyên số index ban đầu của chúng.

Sửa đổi các mục trong Mảng

Ta có thể overrides bất kỳ giá trị nào trong một mảng bằng cách gán một giá trị mới bằng toán tử gán, giống như ta làm với một biến thông thường.

// Assign manatee to the first item in the seaCreatures array seaCreatures[0] = "manatee";  seaCreatures; 

Output
[ 'manatee',     'squid',     'shark',     'seahorse',     'starfish',     'whale',     'pufferfish' ] 

Một cách khác để sửa đổi giá trị là sử dụng phương thức splice() với một tham số mới. Nếu ta muốn thay đổi giá trị của seahorse , là mục ở index 3 , ta có thể xóa nó và thêm một mục mới vào vị trí của nó.

// Replace seahorse with sea lion using splice method seaCreatures.splice(3, 1, "sea lion");  seaCreatures(); 

Output
[ 'manatee',     'squid',     'shark',     'sea lion',     'starfish',     'whale',     'pufferfish' ] 

Trong ví dụ trên, ta đã xóa seahorse khỏi mảng và đẩy một giá trị mới vào index 3 .

Vòng qua một mảng

Ta có thể lặp lại toàn bộ mảng với từ khóa for , tận dụng thuộc tính length . Trong ví dụ này, ta có thể tạo một mảng shellfish và in ra từng số index cũng như từng giá trị vào console .

// Create an array of shellfish species let shellfish = [     "oyster",     "shrimp",     "clam",     "mussel", ];  // Loop through the length of the array for (let i = 0; i < shellfish.length; i++) {   console.log(i, shellfish[i]); } 

Output
0 'oyster' 1 'shrimp' 2 'clam' 3 'mussel' 

Ta cũng có thể sử dụng vòng lặp for...of , một tính năng mới hơn của JavaScript.

// Create an array of aquatic mammals let mammals = [     "dolphin",     "whale",     "manatee", ];  // Loop through each mammal for (let mammal of mammals) {     console.log(mammal); } 

Output
dolphin whale manatee 

Vòng lặp for...of không truy xuất số chỉ số của các phần tử trong mảng, nhưng nói chung nó là một cách đơn giản hơn, ngắn gọn hơn để lặp qua một mảng.

Sử dụng vòng lặp cực kỳ hữu ích để in ra toàn bộ giá trị của một mảng, chẳng hạn như khi hiển thị các mục từ database trên trang web.

Kết luận

Mảng là một phần cực kỳ linh hoạt và cơ bản của lập trình trong JavaScript. Trong hướng dẫn này, ta đã học cách tạo một mảng, cách lập index mảng và một số tác vụ phổ biến nhất khi làm việc trong mảng, chẳng hạn như tạo, xóa và sửa đổi các mục. Ta cũng đã học hai phương pháp lặp qua các mảng, được sử dụng như một phương pháp phổ biến để hiển thị dữ liệu.

Bạn có thể đọc thêm về các loại dữ liệu khác trong JavaScript bằng cách đọc hướng dẫn của ta “ Hiểu các loại dữ liệu trong JavaScript ”.

---

---

Các tin liên quan

Làm thế nào để làm toán trong JavaScript với các toán tử
2017-07-20
Cách lập chỉ mục, tách và thao tác chuỗi trong JavaScript
2017-07-14
Object.values và Object.entries trong JavaScript
2017-07-12
Cách làm việc với chuỗi trong JavaScript
2017-07-11
Giới thiệu về Maps bằng JavaScript
2017-07-06
Hiểu cú pháp và cấu trúc mã trong JavaScript
2017-07-05
Cách thêm JavaScript vào HTML
2017-06-30
Cách sử dụng control panel dành cho nhà phát triển JavaScript
2017-06-29
Cách viết comment bằng JavaScript
2017-06-20
Hiểu các loại dữ liệu trong JavaScript
2017-06-01