HomeLập trìnhJavaScriptCách lặp qua...

Cách lặp qua một mảng trong JavaScript – Hướng dẫn lặp lại JS


Mảng là một biến duy nhất được sử dụng để lưu trữ các phần tử của các kiểu dữ liệu khác nhau để chúng có thể được truy cập thông qua một biến duy nhất.

Nó là một danh sách các giá trị được sắp xếp theo thứ tự và mỗi giá trị được gọi là một phần tử, được chỉ định bởi một chỉ mục.

Biết rằng các biến đơn này chứa một danh sách các phần tử, bạn có thể muốn tạo một danh sách các phần tử này để bạn có thể thực hiện các chức năng riêng lẻ với chúng và hơn thế nữa. Đây là nơi vòng lặp phát huy tác dụng.

Vòng lặp trong JavaScript là gì?

Vòng lặp là một loại chương trình máy tính cho phép chúng ta lặp lại một thao tác cụ thể với số lần xác định trước mà không cần phải viết thao tác đó riêng lẻ.

Ví dụ: nếu chúng ta có một mảng và muốn xuất từng phần tử trong mảng, thay vì sử dụng số chỉ mục để thực hiện từng phần tử một, chúng ta chỉ cần lặp qua và thực hiện thao tác này một lần.

Có rất nhiều phương thức để lặp qua một mảng trong JavaScript. Trong bài viết này, chúng ta sẽ xem xét những cách được sử dụng phổ biến nhất để bạn có thể tìm hiểu các cách tiếp cận khác nhau và hiểu cách chúng hoạt động.

Đọc thêm  Cách nhập JavaScript và CSS từ CDN công khai

Chúng tôi sẽ sử dụng mảng sau cho bài viết này:

const scores = [22, 54, 76, 92, 43, 33];

Cách lặp qua một mảng bằng vòng lặp While trong JavaScript

Bạn có thể sử dụng một while vòng lặp để đánh giá một điều kiện được đặt trong dấu ngoặc đơn (). Nếu điều kiện là truemã bên trong while vòng lặp được thực thi. Nếu nó là falsevòng lặp kết thúc.

Nếu chúng ta muốn lặp qua một mảng, chúng ta có thể sử dụng length thuộc tính để xác định rằng vòng lặp sẽ tiếp tục cho đến khi chúng ta đến phần tử cuối cùng của mảng.

Bây giờ chúng ta hãy sử dụng phương thức vòng lặp while để lặp qua mảng:

let i = 0;

while (i < scores.length) {
    console.log(scores[i]);
    i++;
}

Điều này sẽ lần lượt trả về từng phần tử trong mảng của chúng ta:

22
54
76
92
43
33

Trong vòng lặp ở trên, trước tiên chúng tôi đã khởi tạo số chỉ mục để nó bắt đầu bằng . Sau đó, số lượng sẽ tiếp tục tăng và xuất ra từng phần tử cho đến khi điều kiện chúng ta đặt trả về false, cho biết rằng chúng ta đã đến cuối mảng. Khi nào i = 6điều kiện sẽ không còn được thực hiện vì chỉ số cuối cùng của mảng là 5.

Cách lặp qua một mảng với một do…while Vòng lặp trong JavaScript

Các do...while vòng lặp gần giống với vòng lặp while, ngoại trừ việc nó thực thi phần thân trước khi đánh giá điều kiện cho các lần thực hiện tiếp theo. Điều này có nghĩa là phần thân của vòng lặp luôn được thực thi ít nhất một lần.

Hãy thực hiện vòng lặp tương tự với do…while vòng lặp để xem nó hoạt động như thế nào:

let i = 0;

do {
    console.log(scores[i]);
    i++;
} while (i < scores.length);

Điều này sẽ trả về từng phần tử trong mảng của chúng ta:

22
54
76
92
43
33

Như đã nêu trước đây, điều này sẽ luôn chạy một lần trước khi đánh giá bất kỳ tập hợp điều kiện nào. Ví dụ: nếu chúng ta đặt chỉ mục i đến 6 và nó không còn ít hơn scores.lengthphần thân của vòng lặp sẽ chạy trước khi kiểm tra điều kiện:

let i = 6;

do {
    console.log(scores[i]);
    i++;
} while (i < scores.length);

Điều này sẽ trả lại một undefined bởi vì chúng tôi không có một phần tử trong mảng chỉ mục 6 nhưng như bạn có thể thấy nó đã chạy một lần trước khi dừng lại.

Đọc thêm  Lời hứa JavaScript – Giải thích về các phương thức Promise.then, Promise.Catch và Promise.Lastly

Cách lặp qua một mảng bằng vòng lặp for trong JavaScript

Các for vòng lặp là một câu lệnh lặp để kiểm tra các điều kiện nhất định và sau đó thực thi lặp đi lặp lại một khối mã miễn là các điều kiện đó được đáp ứng.

Chúng ta không cần khởi tạo chỉ mục trước khi sử dụng for phương thức vòng lặp vì việc khởi tạo, điều kiện và phép lặp đều được xử lý trong dấu ngoặc, như minh họa bên dưới:

for (let i = 0; i < scores.length; i++) {
    console.log(scores[i]);
}

Điều này sẽ trả về tất cả các phần tử như các phương thức khác đã thực hiện:

22
54
76
92
43
33

Cách lặp qua một mảng với một for…in Vòng lặp trong JavaScript

Các for…in vòng lặp là một cách dễ dàng hơn để lặp qua các mảng vì nó cung cấp cho chúng ta khóa mà bây giờ chúng ta có thể sử dụng để lấy các giá trị từ mảng theo cách này:

for (i in scores) {
    console.log(scores[i]);
}

Điều này sẽ xuất ra tất cả các phần tử trong mảng của chúng ta:

22
54
76
92
43
33

Cách lặp qua một mảng với một for…of Vòng lặp trong JavaScript

Các for...of Vòng lặp lặp qua các đối tượng có thể lặp lại như mảng, tập hợp, bản đồ, chuỗi, v.v. Nó có cùng cú pháp với for...in vòng lặp, nhưng thay vì nhận được keynó nhận được chính phần tử đó.

Đây là một trong những phương thức đơn giản nhất để lặp qua một mảng và đã được giới thiệu trong các phiên bản JavaScript ES6 sau này.

for (score of scores) {
    console.log(score);
}

Điều này lấy từng phần tử của mảng của chúng ta và chúng ta không còn cần sử dụng chỉ mục để lấy từng phần tử của mảng nữa:

22
54
76
92
43
33

Cách lặp qua một mảng với một forEach Vòng lặp trong JavaScript

phương pháp mảng forEach() lặp qua bất kỳ mảng nào, thực thi một hàm được cung cấp một lần cho từng phần tử mảng theo thứ tự chỉ số tăng dần. Chức năng này được gọi là chức năng gọi lại.

Đọc thêm  Sử dụng điều kiện IF trong phương thức bản đồ của Javascript - JavaScript

Đây là một phương pháp nâng cao hơn có thể làm được nhiều việc hơn là chỉ lặp qua từng phần tử, nhưng bạn cũng có thể sử dụng nó để lặp theo cách này:

scores.forEach((score) => {
    console.log(score);
});

Bạn có thể viết điều này trong một dòng theo cách này:

scores.forEach((score) => console.log(score));

Và điều này sẽ cho chúng ta kết quả giống như tất cả các phương thức trước đó:

22
54
76
92
43
33

kết thúc

Trong bài viết này, chúng ta đã xem xét sáu phương thức tiêu chuẩn/khác nhau để lặp qua một mảng.

Điều quan trọng là bạn phải hiểu tất cả các phương pháp này và sau đó xác định phương pháp nào phù hợp hơn với bạn, dễ sử dụng hơn và dễ đọc hơn.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status