Các loại vòng lặp trong Javascript

Vòng lặp là một thành phân vô cùng quan trọng của các ngôn ngữ lập trình và thường sẽ là một trong những thứ được lập trình viên tiếp cận đầu tiên. Hẳn lập trình viên nào cũng quen với các loop phổ biến như for, while . Javascript thì cũng tương tự như vậy, tuy nhiên nó còn thêm một đống thứ kéo theo và đôi lúc không biết nó giúp ích cho dev hay lại chính là nguyên nhân tạo thêm bug. Trong bài viết mở đầu cho series Loop, mình sẽ giới thiệu về các loại vòng lặp trong Javascript

For loop

---

Đầu tiên hẳn sẽ là loop phổ biến nhất và có phần lớn trong các ngôn ngữ lập trình : for

Với vòng lặp for ta sẽ khởi tạo biến đếm, kiểm tra điều kiện và tăng hoặc giảm biến được thực hiện trên cùng một dòng, do đó khá dễ dàng cho những người mới tiếp cận để debug và cũng giảm khả năng sinh ra lỗi

Cú pháp

for ([initialization];[condition];[final-expression]){
   Block of code
}

Ví dụ

for(var i = 0; i < 10; i++) {
    console.log(i)
}

Kết quả

0
1
2
...
9

While loop

---

Bên cạnh for thì while cũng là một trong những vòng lặp tương đối basic. Câu lệnh while tạo ra một vòng lặp thực thi một khối lệnh (block of code) cho đến khi điều kiện vẫn đúng.

Cú pháp

while (condition) {
  Block of code
}

Ví dụ

var i = 0;
while(i < 10) {
    console.log(i);
    i++;
}

Kết quả

0
1
2
...
9

Do ... While

---

**do-while** về cơ bản khá giống với **while**, chúng chỉ khác nhau duy nhất. Đối với **Do While** dù điều kiện lặp như thế nào thì đoạn code vẫn được chạy ít nhất 1 lần còn nếu điều kiện thỏa mãn thì sẽ tương tự như **While** : tạo ra thêm vòng lặp

Cú pháp

do {
    Block of code
 }
while (condition);

Ví dụ

var i = 10;
do {
    console.log(i);
    i++;
}
while ( i > 10 && i < 12)

Kết quả

10
11

forEach()

---

Hàm này thì có vẻ đã không quá còn basic như những hàm phía trên nữa. forEach sẽ lặp lại từng phần tử trong mảng theo thứ tự index và thực thi function được truyền vào. Lưu ý rằng forEach sẽ không thực thi function đầu vào cho các phần tử không có giá trị

Cú pháp

arrayName.forEach(function(currentValue, index, array){
    function body
})

Hàm được truyền vào forEach sẽ nhận tối đa 3 đối số đầu vào:

• currentValue: Giá trị đang được vòng lặp xử lý
• index: Chí số của giá trị (currentValue) trong mảng
• array: toàn bộ array đang gọi đến forEach

Ví dụ

var arr=[10, 20, "hi", ,{}];

arr.forEach(function(item, index){
    console.log(' arr['+index+'] is '+ item);
});

Kết quả

arr[0] is 10
arr[1] is 20
arr[2] is hi
arr[4] is [object Object]

Lưu ý rằng bạn không nhất thiết phải truyền toàn bộ 3 đối số vào, chỉ truyền vào những đối số cần thiết.

Nhìn qua thì thấy forEach khá là đem lại nhiều điều đơn giản cho lập trình viên, không cần quan tâm đến khởi tạo biến đếm, điều kiện dừng .... Tuy nhiên trong đó cũng tiềm tàng khá nhiều điều hay ho mà mình sẽ trình bày trong phần tiếp theo của series

Map

---

Tiếp tục là một hàm sẽ giúp bạn loop các phần tử của một Array. Tuy nhiên **map** sẽ tạo ra một mảng mới chứ không phải thực thi với mảng gọi đến nó như **forEach**.

Cú pháp

var newArray= oldArray.map(function (currentValue, index, array){
    //Return element for the newArray
});

Tương tự như forEach, map cũng lấy 3 tham số đầu vào

• currentValue: Giá trị đang được vòng lặp xử lý
• index: Chí số của giá trị (currentValue) trong mảng
• array: toàn bộ array đang gọi đến forEach

Ví dụ

var num = [1, 5, 10, 15];
var doubles = num.map(function(x) {
   return x * 2;
});

Kết quả

(4) [2, 10, 20, 30]

Có thể thấy thì hàm này thường để dùng khi muốn thay đối giá trị toàn bộ mảng tạo ra một thực thể mới chứ không đơn thuần dùng để truy xuất.

For...in

---

Vòng lặp này có đôi chút khác biệt với các hàm phía trên, For ... in mục đích chủ yếu được dùng để loop trong một object chứ không phải array . Số lượng vòng lặp sẽ tương ứng với số lượng thuộc tính của object

Mỗi array cũng là một object đặc biệt, do đó ta vẫn có thể sử đụng for...in 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 (variableName in object) {
    Block of code
}

Ví dụ

var obj = {a: 1, b: 2, c: 3};    
for (var prop in obj) {
   console.log('obj.'+prop+'='+obj[prop]);
};

Kết quả

obj.a=1
obj.b=2
obj.c=3

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.

Thêm một ví dụ:

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

Với ví dụ trên được loop bởi forEach thì kết quả sẽ theo thứ tự là 0, 1, 2, 3 còn với for...in thì sẽ không đảm bảo như vậy.

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
   }
}

for...of

---

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 ,...

Cú pháp

for (variable of iterable) {
  Block of code
}

Ví dụ

var str= 'paul';
for (var value of str) {
console.log(value);
}

Kết quả

"p"
"a"
"u"
"l"

Một ví dụ khác

let itobj = new Map([['x', 0], ['y', 1], ['z', 2]]);

for (let kv of itobj) {
  console.log(kv);
}
// ['x', 0]
// ['y', 1]
// ['z', 2]

for (let [key, value] of itobj) {
  console.log(value);
}

//0
//1
//2

Bài viết được tham khảo trực tiếp và có chính sửa tại bài viết All type of loops in JavaScript, a brief explanation