1. Vòng lặp for in trong JavaScript

Vòng lặp for in được lặp qua các thuộc tính của một đối tượng, bao gồm cả thuộc tính được kế thừa. Mỗi array cũng là một đối tượng đặc biệt, do đó mà ta vẫn có thể sử dụng vòng lặp này cho array. Tuy nhiên, key sẽ tương ứng với giá trị index của từng phần tử.

Cú pháp:

for (key in object) {
   // code
}

Ví dụ:

<script>
const person = {fname:"Thành", lname:"Nguyễn", age:19}; 

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
}

document.write(txt);
</script>

Trong mỗi lần lặp, một thuộc tính từ object – đối tượng được gán tới variablename – tên biến và vòng lặp này tiếp tục tới khi hết tất cả thuộc tính của đối tượng.

For in không được khuyến khích sử dụng với những mảng mà thứ tự index của nó quan trọng.

var arr = [];
arr[2] = 2;
arr[3] = 3;
arr[0] = 0;
arr[1] = 1;

Thêm một điều nữa, với for in , nó sẽ duyệt qua cả những thuộc tính kế thừa của object . Do đó nếu muốn chỉ duyệt qua thuộc tính riêng của object thì cú pháp cần thay đổi một chút

for(var prop in obj){
   if(obj.hasOwnProperty(prop)){
       Code block here
   }
}

Câu lệnh for in JavaScript cũng có thể lặp lại các thuộc tính của mảng

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x] + "<br>"; 
}

document.write(txt);
</script>

Lưu ý

Không sử dụng cho trên một Mảng nếu thứ tự chỉ mục là quan trọng. Thứ tự chỉ mục phụ thuộc vào việc triển khai và các giá trị mảng có thể không được truy cập theo thứ tự bạn mong đợi. Tốt hơn là sử dụng vòng lặp for , vòng lặp for hoặc Array.forEach() khi thứ tự quan trọng.

2. Vòng lặp for of trong JavaScript

Vòng lắp được ra mắt trong phiên bản ES6. Hàm này có thể sử dụng để duyệt phần lớn các đối tượng từ Array , String , Map , WeakMap , Set ,… For of trong JavaScript là vòng lặp được sử dụng để lấy các giá trị của iterable objects (các đối tượng có thể lặp lại) theo thứ tự index . Chúng ta sử dụng for of với cú pháp sau đây:

for (bienDaiDien of doiTuongCoTheLap) {
    // Code
}

Trong đó:

bienDaiDien : Là biến đại diện cho các phần tử trong đối tượng có thể lặp
doiTuonCoTheLap : Là tên đối tượng có thể lặp

Ví dụ:

// Tạo ra một mảng
let ngonNgu = ["JS", "HTML", "PHP", "Python"];

// Sử dụng for of để lặp qua mảng
for (let x of ngonNgu) {
    console.log(x);
}

Đây là ví dụ để lặp qua mảng. Biến x ở đây sẽ chứa các giá trị của mảng qua các lần lặp. Nên các bạn không cần phải viết kiểu colors[x] như ở các vòng lặp for khác nữa.

Bạn thậm chí có thể lặp chuỗi với vòng lặp for of

<script>

var website = 'laptrinhtudau.com';
var text = "";
for (var x of website) {
    text += `${x} `;
}
document.write(text)

</script>

3. Hàm forEach() trong Javascript

forEach là một phương thức có sẵn của array được Javascript cung cấp. Hàm này sẽ giúp lặp qua các phần tử của mảng, nó có một tham số truyền vào, và tham số này sẽ lưu trữ giá trị của phần tử trong mỗi lần lặp.

forEach() chỉ lặp qua các mảng, nó có thể truy cập cả giá trị và chỉ mục của từng phần tử trong khi lặp.

Cú pháp:

array.forEach(function(currentValue, index, arr), thisValue)

Trong đó:

currentValue : giá trị của phần tử hiện tại.
index : chỉ số của phần tử hiện tại.
arr : mảng mà phần tử hiện tại thuộc về.
thisValue : tham số không bắt buộc. Nếu được truyền vào thì thisValue sẽ được sử dụng làm giá trị this . Nếu không được truyền vào thì giá trị “this” là “undefined”.

Ví dụ:

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.write(txt);

function myFunction(value, index, array) {
  txt += value + "<br>"; 
}
</script>

Ví dụ trên chỉ sử dụng tham số giá trị. Nó có thể được viết lại thành:

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.write(txt);

function myFunction(value) {
  txt += value + "<br>"; 
}
</script>

Vòng lặp for in và for of trong JavaScript

1. Vòng lặp for in trong JavaScript

2. Vòng lặp for of trong JavaScript

3. Hàm forEach() trong Javascript