Vòng lặp for…of JavaScript có gì hay?

Hi các bạn, trong bài viết này chúng ta cùng tìm hiểu về for...of trong JavaScript nhé 😄.

Chúng ta đã biết trong JavaScript có một số vòng lặp như for, for...of, while, do...while. Những lệnh lặp này giúp chúng ta duyệt qua các phần tử trong một mảng. Trong số đó có một vòng lặp khá hay là for...of. Chúng ta cùng tìm hiểu về nó trong bài viết này nhé.

JavaScript for…of loop

ES6 đã giới thiệu một lệnh mới for ... of, nó dùng để lặp qua một iterable object chẳng hạn như:

1. Các Built-in như Array, Set, và Map,...
2. Array-like objects như arguments và NodeList
3. User-defined iterable.

Cú pháp của for...of như sau:

for (variable of iterable) {
   // ...
}

Trong đó:

1. variable: Trong mỗi lần lặp, thuộc tính của iterable object được gán cho biến. Chúng ta có thể sử dụng var, let hoặc const để khai báo biến.
2. iterable: Một iterable object để lặp qua. Nếu sử dụng plain object sẽ xảy ra lỗi.

Ví dụ for...of trong JavaScript

Để hiểu rõ hơn for...of thì chúng ta cùng xem qua một vài ví dụ nhé 😄.

Arrays

Đầu tiên, for...of giống các vòng lặp khác, nó có thể lặp qua các phần tử trong một mảng:

let categories = ['JavaScript', 'ReactJS', 'GatsbyJS'];

for (const category of categories) {
    console.log(category);
}

Kết quả:

JavaScript
ReactJS
GatsbyJS

Chúng có thể sử dụng let nếu các bạn muốn gán lại biến trong thân vòng lặp như sau:

const iterable = [1, 2, 3];

for (let value of iterable) {
  value += 1;
  console.log(value);
}

Và kết quả là:

2
3
4

Để lấy index của các phần tử mảng trong vòng lặp, bạn có thể sử dụng câu lệnh for ... of với method entries() của mảng.

Method array.entries() sẽ trả về một cặp [index, element] ở mỗi lần lặp. Ví dụ:

let array = ['homiedev.com', 'học JavaScript', 'ReactJS'];

for (const [index, element] of array.entries()) {
    console.log(`index ${index}: ${element}`);
}

Kết quả:

index 0: homiedev.com
index 1: học JavaScript
index 2: ReactJS

Ở ví dụ trên có sử dụng array destructuring, để gán kết quả của method entries() cho index và element (các bạn có thể đặt tên tùy ý) trong mỗi lần lặp:

const [index, element] of array.entries()

Ngoài ra, nếu đối tượng lặp là một mảng object thì chúng ta có thể sử dụng object destructuring như sau:

const sports = [
    { name: 'badminton', symbol: '🏸' },
    { name: 'football', symbol: '⚽' },
    { name: 'rugby', symbol: '🏉' },
];

for (const {name, symbol} of sports) {
    console.log(name +' '+ symbol)
}

Kết quả chúng ta được:

badminton 🏸
football ⚽
rugby 🏉

Strings

Nếu bạn cần lặp qua các kí tự của một chuỗi thì for...of cũng có thể giúp chúng ta 😁.

let str = 'homie';
for (let c of str) {
    console.log(c);
}

Kết quả:

h
o
m
i
e

Map objects

Chúng ta có thể sử dụng câu lệnh for ... of để lặp qua một Map object.

let balls = new Map();

balls.set('soccer ball', '⚽');
balls.set('baseball', '⚾');
balls.set('volleyball', '🏐');

for (let ball of balls) {
    console.log(ball);
}

Kết quả chúng ta được:

['soccer ball', '⚽']
['baseball', '⚾']
['volleyball', '🏐']

Set objects

Nếu muốn lặp qua Set object, các bạn có thể sử dụng for...of:

let nums = new Set([5, 10, 15]);

for (let num of nums) {
    console.log(num);
}

Như vậy là trong bài viết này, chúng ta đã tìm hiểu về vòng lặp for...of trong JavaScript. Hi vọng bài viết giúp ích cho các bạn 😊. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé!

Vòng lặp for...of và for...in có gì khác nhau thì các bạn có thể tham khảo bài viết: Khác nhau giữa for...in và for...of JavaScript.