Bạn có thể có nhiều vòng lặp for trong một hàm trong JavaScript không?

“Vòng lặp for” là các câu lệnh lập trình kiểm tra mọi phần tử mà một đối tượng chứa. Tiêu chuẩn Javascript chứa nhiều loại vòng lặp for. Bạn có thể áp dụng từng cái trong một ngữ cảnh lập trình khác nhau

Tất cả các vòng lặp cho Javascript đều có cấu trúc cơ bản giống nhau. Chúng bắt đầu bằng từ “for” theo sau là phương pháp lặp trong ngoặc đơn. Hướng dẫn thao tác với phần tử nằm giữa dấu ngoặc nhọn sau phương thức lặp

Bài viết này mô tả chức năng của vòng lặp for, cách chúng hoạt động trong các khung Javascript khác nhau và cách chọn vòng lặp for tốt nhất cho chương trình của bạn

Javascript cho cú pháp vòng lặp trông như thế này trong mã

for (iteration method) {
    .. instructions ...
}

Javascript cho các vòng lặp trong Tiêu chuẩn ECMA

Đơn giản cho vòng lặp

Loại đơn giản nhất của vòng lặp for tăng một biến như phương thức lặp của nó. Biến hoạt động như một bộ đếm cho mọi phần tử thứ “n” trong một đối tượng

Trong ví dụ Javascript cho vòng lặp đơn giản này, biến “i” tăng một lần mỗi khi vòng lặp được chạy. Vòng lặp in ra nội dung của một mảng theo thứ tự, từng cái một

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

Vòng lặp cũng có thể được viết theo cách chỉ ra rõ ràng đối tượng thứ “n” là gì. Vì ví dụ trước đã tăng biến của nó lên 1 mỗi lần lặp, n = 1

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

Để xem xét một thứ khác với mọi đối tượng, tất cả những gì bạn phải làm là thay đổi số “n”. Vì vậy, hãy sử dụng “i+2” để xem xét mọi đối tượng thứ hai, “i+3” để xem xét mọi đối tượng thứ ba, v.v. Logic này hoạt động với mọi phép toán số học đơn giản mà bạn sử dụng để kiểm tra các phần tử, cho dù đó là phép cộng, phép trừ hay thậm chí là phép nhân

Vòng lặp For-In

Vòng lặp for-in luôn lặp qua từng phần tử của một đối tượng. Những tên này có thể là chỉ mục mảng hoặc cặp khóa-giá trị

Cú pháp của vòng lặp for-in Javascript là

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

Nếu đối tượng là một mảng, vòng lặp for-in sẽ in ra các chỉ mục của mảng theo thứ tự. Nếu đối tượng chứa các cặp khóa-giá trị, vòng lặp for-in sẽ in ra từng khóa tồn tại. Vòng lặp for-in không đảm bảo rằng các khóa trong các cặp khóa-giá trị sẽ luôn được truy cập theo cùng một thứ tự

vòng lặp for-of

Vòng lặp for-of tương tự như vòng lặp for-in vì nó lặp qua từng phần tử của một đối tượng. So với vòng lặp for-in, nó mới hơn và tự động sử dụng một trình vòng lặp

Cú pháp cho vòng lặp for-of Javascript là

for (let i of object) {
    console.log(object[i]);
}

Nếu đối tượng là một mảng, vòng lặp for-of sẽ in ra các giá trị của các chỉ mục của mảng theo thứ tự. Nếu đối tượng chứa các cặp khóa-giá trị, vòng lặp for-of sẽ in ra mọi giá trị tồn tại

Giống như vòng lặp for-in, vòng lặp for-of không đảm bảo rằng các khóa trong cặp khóa-giá trị sẽ luôn được truy cập theo cùng một thứ tự. Vòng lặp for-of cũng không phải là sự thay thế cho vòng lặp for-in

Một cách hay để phân biệt vòng lặp for-of và vòng lặp for-in là ghi nhớ dữ liệu nào chúng trả về. Vòng lặp for-of trả về giá trị, trong khi vòng lặp for-in trả về khóa hoặc chỉ mục

vòng lặp chờ đợi

Vòng lặp for-await-of được sử dụng khi bạn cần lặp lại các đối tượng hoặc hàm không đồng bộ. Nó có thể trả về các giá trị từ các đối tượng và kết quả của các lệnh gọi hàm. Bạn không bao giờ nên sử dụng nó trên các đối tượng hoặc chức năng đồng bộ

Cú pháp của vòng lặp for-await-of trong Javascript tương tự như vòng lặp for-of, ngoại trừ việc nó có từ khóa “await” trước phương thức lặp của nó

for await (let i of object) {
    console.log(object[i]);
}

Javascript cho các vòng lặp trong các khung chung

góc cạnh. js cho vòng lặp

góc cạnh. js hỗ trợ tất cả các loại vòng lặp Javascript cho được liệt kê trong tiêu chuẩn Javascript. Ngoài ra, nó có một vòng lặp for chuyên dụng của riêng nó được gọi là “forEach”

Cú pháp vòng lặp forEach khác biệt đáng kể so với các loại vòng lặp khác mà chúng tôi đã đề cập cho đến nay. Vòng lặp forEach là một chức năng được tích hợp trong Angular. js, chứ không phải là một cấu trúc điều khiển đơn giản. Bạn phải chuyển đối tượng để lặp lại và một hàm giải thích phải làm gì với các phần tử của đối tượng vào hàm forEach.  

Trong ví dụ sau, bạn có thể thấy một đối tượng có ba phím được in trên bảng điều khiển

let values = {"a": "one", "b": "two", "c": "three"};
angular.forEach(values, function(value, key) {
    console.log(key + ": " + value);
});

góc cạnh. js forEach loop cũng có thể nhận một tham số tùy chọn được gọi là “context. ” Bối cảnh là một biến bên ngoài mà bạn có thể sử dụng để thao tác nội dung của đối tượng mà bạn lặp qua

Ví dụ này điền vào mảng “myContext” bằng các khóa đối tượng trong khi nó đang in thông tin của đối tượng ra bảng điều khiển. Hàm xử lý đối tượng sử dụng từ khóa “this” để chỉ mảng “myContext”

let values = {"a": "one", "b": "two", "c": "three"};
let myContext = [];
angular.forEach(values, function(value, key) {
    console.log(key + ": " + value);
    this.push(key);
}, myContext);

JQuery cho vòng lặp

JQuery cho phép bạn sử dụng tất cả Javascript tiêu chuẩn cho các biến thể của vòng lặp. Nó không có biến thể vòng lặp for rõ ràng của riêng nó, nhưng nó có các phương thức chuyên dụng để lặp được gọi là “each” và “map”

Tài liệu JQuery khuyên bạn nên sử dụng các phương thức “each” và “map” bất cứ khi nào có thể để lặp qua các đối tượng. Đối với các vòng lặp không thể lặp qua một số đối tượng JQuery chuyên biệt, do đó, các hàm “each” và “map” là những thay thế hiệu quả trong những trường hợp đó

Một vòng lặp for sử dụng “each” theo nghĩa chung sẽ trông như thế này, sử dụng một hàm để mô tả những gì nên được thực hiện với các phần tử của đối tượng

Một vòng lặp for sử dụng “each” trên một đối tượng JQuery chuyên biệt, chẳng hạn như một tập hợp các giá trị, trông hơi khác một chút. Phương thức “each” hiểu rằng mỗi phần tử trong collection chính là ngữ cảnh của nó, được gọi bằng từ khóa “this”. Như đã đề cập trước đó, Góc. js cũng sử dụng cơ chế này với các vòng lặp for

$("p").each(function(i, element) {
    console.log($(this));
});

Các phương thức “bản đồ” hoạt động giống như “từng”, ngoại trừ việc chúng xử lý các cặp khóa-giá trị thay vì các phần tử đơn lẻ

Chọn đúng cho vòng lặp

Mặc dù các vòng lặp for đều là một loại cơ chế lặp, nhưng các loại khác nhau có các hành vi cụ thể khác nhau. Việc chọn sai loại vòng lặp Javascript cho vòng lặp có thể gây ra kết quả không mong muốn và gây ra các lỗi khó khắc phục

Bất cứ khi nào bạn sử dụng một khung Javascript như Angular hoặc JQuery, hầu như luôn luôn tốt hơn nếu sử dụng các biến thể vòng lặp for được tích hợp trong khung. Nếu bạn còn nghi ngờ, hãy tham khảo tài liệu của framework

Hãy đăng ký tham gia Chương trình cấp bằng cấp nano về lập trình của chúng tôi ngay hôm nay để tìm hiểu thêm về Javascript cho các vòng lặp và các khái niệm lập trình khác

Bạn có thể có hai vòng lặp for trong hàm JavaScript không?

Bạn có thể có 2 vòng lặp for trong một hàm không?

Làm cách nào để chạy hai vòng lặp for trong JavaScript?

Một hàm có thể có vòng lặp for không?