Javascript cho...trong mảng vòng lặp

Trong hướng dẫn này, mình sẽ giới thiệu cho bạn về câu lệnh cho. of trong js cho phép bạn tạo một vòng lặp qua một đối tượng có thể lặp lại

ES6 đã giới thiệu một cấu trúc mới cho. of create a loop back on the objects can mount back as Array, Map, Set or any object any object can itable.

Dưới đây là ví dụ cho. của

for (variable of iterable) {
   // statements 
}

Các bạn cùng xem một số ví dụ về việc sử dụng cho. của

Mảng

Ví dụ sau cho bạn thấy cách sử dụng cho. of to repeat the numerials of an array

let scores = [10, 20, 30];
for (let score of scores) {
    score = score + 5;
    console.log(score);
}
// 15
// 25
// 35

Nếu bạn không thay đổi biến bên trong vòng lặp, bạn nên sử dụng const thay vì let as after

for (const score of scores) {
    console.log(score);
}
// 10
// 20
// 30

Sợi dây

Ví dụ sau cho bạn thấy cách sử dụng cho. of to it over the death section of a string

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

Bản đồ

Ví dụ sau cho bạn thấy cách sử dụng cho. of to it through the element of a map

var colors = new Map();
colors.set('red', '#ff0000');
colors.set('green', '#00ff00');
colors.set('blue', '#0000ff');

for (let color of colors) {
    console.log(color);
}

// ["red", "#ff0000"]
// ["green", "#00ff00"]
// ["blue", "#0000ff"]

Bộ

Ví dụ sau cho bạn thấy cách sử dụng cho. of to it through the element of a set

let nums = new Set([1, 2, 3]);

for (let num of nums) {
    console.log(num); //
}
// 1
// 2
// 3

vì. của vs. vì. Trong

Vòng lặp cho. in it over all properties can list of a object. Nó không lặp lại qua một tập hợp như Array, Map, Set

Not same as loop for. trong, vòng lặp cho. of it repeat a file, instead of a object. Trên thực tế, cho. of itqua các phần tử của bất kỳ tập hợp nào có thuộc tính [Symbol. trình lặp]

Vòng lặp được sử dụng để thực hiện một hành động lặp lại vòng lặp. Bên cạnh đó, các bài toán từ đơn giản đến phức tạp, không bài nào không bắt được vòng lặp. Nó xuất hiện ở mọi bài toán, mọi vấn đề. Trong bài viết này, mình sẽ đào sâu vào vòng lặp trong Javascript

Cũng giống như các ngôn ngữ lập trình khác nhau, Javascript có rất nhiều cấu trúc lặp khác nhau while,for, do...while,. Tuy nhiên, trong Javascript cung cấp cho chúng ta 2 cấu trúc rất đặc biệt, có cú pháp rút gọn và dễ sử dụng. Đó chính là for...of và 

let scores = [10, 20, 30];
for (let score of scores) {
    score = score + 5;
    console.log(score);
}
// 15
// 25
// 35

0

Trước hết, chúng ta cùng xem lại cấu trúc của vòng lặp cho và cách sử dụng của nó

1. Vòng lặp cho

cú pháp

để tôi = 0. start up variable for loop

tôi <10. điều kiện để vòng lặp thực hiện

tôi ++. tăng giá trị biến chạy lên 1 mỗi khi thực hiện xong hành động

Bạn có thể bỏ trống giá trị ban đầu trong cú pháp của vòng lặp

let scores = [10, 20, 30];
for (let score of scores) {
    score = score + 5;
    console.log(score);
}
// 15
// 25
// 35

1 nếu trước đó đã gán giá trị của biến chạy

Bạn cũng có thể bỏ trống giá trị thứ hai trong cú pháp của vòng lặp cho. Lúc này, nếu giá trị thứ hai trả về giá trị

let scores = [10, 20, 30];
for (let score of scores) {
    score = score + 5;
    console.log(score);
}
// 15
// 25
// 35

2 thì vòng lặp tiếp tục thực thi, nếu là

let scores = [10, 20, 30];
for (let score of scores) {
    score = score + 5;
    console.log(score);
}
// 15
// 25
// 35

3 thì vòng lặp sẽ dừng lại

Nếu bỏ trống giá trị thứ hai thì bắt buộc trong vòng lặp phải có lệnh

let scores = [10, 20, 30];
for (let score of scores) {
    score = score + 5;
    console.log(score);
}
// 15
// 25
// 35

4, nếu không thì vòng lặp sẽ chạy mãi không dừng lại

Giá trị thứ ba trong cú pháp vòng lặp không thực sự cần thiết nếu như bạn thay đổi giá trị của biến chạy trong vòng lặp

Tuy nhiên, việc bỏ trống các giá trị trong cú pháp của vòng lặp đối với là không nên. Dù rút gọn nhưng nếu sử dụng sai lúc sẽ khiến mã của chúng ta khó đọc lại

Ví dụ

Kết quả trong ra

Đoạn mã trên là ví dụ của vòng lặp dành cho Javascript, rất dễ sử dụng phải không nào. Nhưng cú pháp này khá dài, liệu có cách nào rút gọn hơn không ?

Câu trả lời là có. Như ở đầu bài mình có đề cập nhật, chúng ta sẽ sử dụng cho. của và cho. Trong

2. Vòng lặp cho. của

Vòng lặp này được ra mắt ở phiên bản ES6. Tương tự như for, this loop được sử dụng để duyệt từng phần tử của đối tượng duyệt. Số lượng lặp lại bằng số phần tử của đối tượng

cú pháp

let scores = [10, 20, 30];
for (let score of scores) {
    score = score + 5;
    console.log(score);
}
// 15
// 25
// 35

5. khai báo biến chạy

for0. a Array, String, Map, WeakMap, Set (không có đối tượng)

Ví dụ

Giờ chúng ta sẽ thử vòng lặp cho. of với ví dụ ở trên

Kết quả

Và kết quả cũng giống như chúng ta sử dụng vòng lặp cho nhưng có thể thấy cú pháp của for. của tường minh, dễ hiểu hơn là cho

Tuy nhiên, for1 không duyệt theo kiểu giảm dần giống như trong for been

3. Vòng lặp cho. Trong

Vòng lặp này thường được sử dụng với mục đích là vòng lặp trong một đối tượng chứ không phải trong mảng hoặc chuỗi giống như hai vòng lặp trên. Số lượng phù hợp với số thuộc tính của đối tượng mà ta duyệt

cú pháp

for2. khai báo biến chạy

for3. đối tượng duyệt (thường là đối tượng)

Ví dụ

Kết quả

Kết quả trong ra là thuộc tính của đối tượng

for4 cũng có thể dùng với for5, lúc này các thuộc tính của mỗi phần từ trong mảng chính làfor6

Kết quả

4. Lời khuyến khích

Đối với những người mới lập trình thì nên sử dụng vòng lặp cho bình thường vì các biến chạy, điều kiện, tăng giảm biến chạy đều thực hiện trên cùng một dòng, do đó dễ dàng sửa lỗi

• Không nên bỏ trống các giá trị trong cú pháp của vòng lặp cho
• Chỉ nên sử dụng vòng lặp cho. in khi cần lặp qua đối tượng, không nên sử dụng với mảng
• Vòng lặp cho. of not used with object

Với những người đã quen thuộc với vòng lặp cho thì nên sử dụng linh hoạt hai vòng lặp cho. của  và cho. trong, vì có thể sử dụng trong nhiều trường hợp và làm cho mã của chúng ta dễ đọc hơn. Bên cạnh đó, khi thao tác với kiểu dữ liệu JSON, 2 vòng lặp này có thể được duyệt dễ dàng

pause

Trên đây là những kiến ​​thức của mình với vòng lặp trong Javascript. Hi vọng sẽ hữu ích với các bạn. Đừng sợ hãi để lùi lại ý kiến ​​đóng góp ở phần bình luận để kiến ​​thức được hoàn chỉnh và sâu hơn nữa nhé các bạn. Cảm ơn các bạn