- vừa được xem lúc

Sử dụng vòng lặp for…of trong Javascript

0 0 19

Người đăng: Gấu con

Theo Viblo Asia

Trong bài viết này mình sẽ chia sẻ cách sử dụng vòng lặp for...of trong es6 nhé.
Cú pháp khai báo:

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

Trong mỗi lần lặp thì bạn có thể sử dụng các từ khóa như var, let, const để khai báo variable
Ví dụ:

1) Lặp qua mảng

let scores = [80, 90, 70]; for (let score of scores) { score = score + 5; console.log(score);
}

Output:

85
95
75

Nếu bạn không muốn thay đổi giá trị của biến score trong mỗi lần lặp, bạn có thể sử dụng từ khóa const để khai báo biến như bên dưới.

let scores = [80, 90, 70]; for (const score of scores) { console.log(score);
}

Output:

80
90
70

Để có thể truy cập được index của mỗi phần tử trong mỗi lần lặp, bạn có thể sử dụng phương thức entries() như bên dưới.

let colors = ['Red', 'Green', 'Blue']; for (const [index, color] of colors.entries()) { console.log(`${color} is at index ${index}`);
}

Output:

Red is at index 0
Green is at index 1
Blue is at index 2

2) Sử dụng object destructuring với for…of

Hãy xem xét ví dụ sau:

const ratings = [ {user: 'John',score: 3}, {user: 'Jane',score: 4}, {user: 'David',score: 5}, {user: 'Peter',score: 2},
]; let sum = 0;
for (const {score} of ratings) { sum += score;
} console.log(`Total scores: ${sum}`); // 14

Output:

Total scores: 14

3) Lặp qua strings

Hãy xem xét ví dụ sau:

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

Output:

a
b
c

4. sự khác nhau giữa for...of vs. for...in

Hãy xem xét ví dụ sau:

let scores = [10,20,30];
scores.message = 'Hi'; console.log("for...in:");
for (let score in scores) { console.log(score); } console.log('for...of:');
for (let score of scores) { console.log(score);
} 

Output:

for...in:
0
1
2
message
for...of:
10
20
30

Ở ví dụ trên for...in sẽ thực hiện lặp qua các thuộc tính của mảng scores

for...in:
0
1
2
message

Trong khi đó for...of thực hiện lặp qua các thành phần của mảng scores.

for...of:
10
20
30

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 496

- vừa được xem lúc

Type annotation vs Type Inference - Typescript

Trong bài viết này, chúng ta sẽ tìm hiểu kỹ về TypeScript bằng cách tìm hiểu sự khác biệt giữa kiểu chú thích và kiểu suy luận. Tôi sẽ cho rằng bạn có một số kinh nghiệm về JavaScript và biết về các kiểu cơ bản, như chuỗi, số và boolean.

0 0 31

- vừa được xem lúc

Type Annotation và Type Inference trong TypeScript là gì?

Khi làm việc với javascript chắc hẳn các bạn đã quá quen với việc dùng biến mà không cần phải quan tâm đến kiểu dữ liệu của nó là gì phải không? Đúng là mới đầu tiếp cận với Typescript mình cũng cảm thấy nó khá là phiền vì cần phải khai báo đủ type để nó chặt chẽ hơn. Lúc đó mình còn nghĩ: " JavaScr

0 0 24

- vừa được xem lúc

Tìm hiểu TypeScript và kiến thức cơ bản

TypeScript là gì. TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules.

0 0 33

- vừa được xem lúc

TypeScript - P1: Vì sao TypeScript được yêu thích đến vậy?

Trải nghiệm thực tế. Trước khi là một Web Developer, tôi là một Mobile Developer và Java là thứ mà tôi từng theo đuổi.

0 1 57

- vừa được xem lúc

4 Tính năng rất hay từ TypeScript

Xin chào các bạn hôm nay mình xin chia sẽ những tính năng rất hay của TypeScript (TS), các bạn cùng tìm hiểu nhé. Ngoài việc set Type cho biến, tham số hay function thì ví dụ khi bạn nhìn vào một tham

0 0 81