Đã đăng vào thg 8 21, 2020 2:42 CH 2 phút đọc 2 phút đọc
Trong hướng dẫn này, mình sẽ giới thiệu cho bạn về câu lệnh for ... of trong js cho phép bạn tạo một vòng lặp 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 for ... of tạo ra một vòng lặp lại trên đối tượng có thể lắp lại như Array, Map, Set hoặc bất kỳ đối tượng nào có thể lặp.Array, Map, Set hoặc bất kỳ đối tượng nào có thể lặp.
Dưới đây là ví dụ cho for ... offor ... of
for [variable of iterable] {
// statements
}
Các bạn cùng xem một số ví dụ về việc sử dụng for ... offor ... of
ArrayVí dụ sau cho bạn thấy cách sử dụng for ... of để lặp qua các phần tử của một mảng
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 như sau:const thay vì let như sau:
for [const score of scores] {
console.log[score];
}
// 10
// 20
// 30
Ví dụ sau cho bạn thấy cách sử dụng for ... of để lặp qua các phần tử của một chuỗi
let str = 'abc';
for [let c of str] {
console.log[c];
}
// a
// b
// c
Ví dụ sau cho bạn thấy cách sử dụng for ... of để lặp qua các phần tử của một 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"]
Ví dụ sau cho bạn thấy cách sử dụng for ... of để lặp qua các phần tử của một set
let nums = new Set[[1, 2, 3]];
for [let num of nums] {
console.log[num]; //
}
// 1
// 2
// 3
Vòng lặp for ... in lặp qua tất cả các thuộc tính có thể liệt kê của một đối tượng. Nó không lặp lại qua một tập hợp như Array, Map, Setfor ... in lặp qua tất cả các thuộc tính có thể liệt kê của một đối tượng. Nó không lặp lại qua một tập hợp như Array, Map, Set
Không giống như vòng lặp for ... in, vòng lặp for ... of lặp lại một tập hợp, thay vì một đối tượng. Trên thực tế, for ... of lặp qua các phần tử của bất kỳ tập hợp nào có thuộc tính [Symbol.iterator].for ... in, vòng lặp for ... of lặp lại một tập hợp, thay vì một đối tượng. Trên thực tế, for ... of lặp qua các phần tử của bất kỳ tập hợp nào có thuộc tính [Symbol.iterator].
Ví dụ sau minh họa sự khác biệt giữa for ... of và for ... infor ... of và for ... in
let numbers = [6, 7, 8];
numbers.foo = "foo";
for [let i in numbers] {
console.log[i];
}
// 0
// 1
// 2
// foo
for [let i of numbers] {
console.log[i];
}
// 6
// 7
// 8
Trong bài viết này, mình đã cách sử dụng for ... of trong js để lặp qua một collection
Hẹn các bạn ở bài viết tiếp theo
All rights reserved
Nội dung bài viết Nói về iterate trong javascript có rất nhiều cách để chúng ta có thể làm được điều đó như for, for ... in, for ... of. Thậm chí là reduce[]... Nhưng bạn có biết vì sao javascript lại cung cấp nhiều method đến vậy, và nó có sự khác biệt gì. Trong bài viết này, chúng ta sẽ làm rõ những điều mà có thể bạn chưa hề biết. Đầu tiên chúng ta nói về for ... in. For ... in được sử dụng để được sử dụng để lặp lại trên tất cả các enumerable properties của một Object, bao gồm enumerable properties được kế thừa. Câu lệnh lặp này có thể được sử dụng với String, Array, or những object đơn giản, nhưng không phải với các object như Map[] hoặc Set[].for ... in. For ... in được sử dụng để được sử dụng để lặp lại trên tất cả các enumerable properties của một Object, bao gồm enumerable properties được kế thừa. Câu lệnh lặp này có thể được sử dụng với String, Array, or những object đơn giản, nhưng không phải với các object như Map[] hoặc Set[]. Nhân tiện đây bạn nào chưa hiểu về "enumerable properties object"? Tôi sẽ nói thêm một chút khi bài viết này kết thúc."enumerable properties object"? Tôi sẽ nói thêm một chút khi bài viết này kết thúc. Example For ... in For ... of được sử dụng để lặp qua các iterable objects, lặp lại các giá trị của chúng thay vì các thuộc tính của chúng. Câu lệnh lặp này có thể được sử dụng với các Array, String, Map hoặc Set object, nhưng nó không sử dụng trên những object đơn giản. Điều này có nghĩa là nó ngược với for ... in.iterable objects, lặp lại các giá trị của chúng thay vì các thuộc tính của chúng. Câu lệnh lặp này có thể được sử dụng với các Array, String, Map hoặc Set object, nhưng nó không sử dụng trên những object đơn
giản. Điều này có nghĩa là nó ngược với for ... in. Cách đây mấy bài hôm trước, có một bài viết khá sâu về for ... of này. Bạn có thể đọc nó tại đây. For ... of trong javascript đừng bỏ lỡ viên đá quý này Video học lập trình mỗi ngày
for [let prop in ['a', 'b', 'c']]
console.log[prop]; // 0, 1, 2 [array indexes]
for [let prop in 'str']
console.log[prop]; // 0, 1, 2 [string indexes]
for [let prop in {a: 1, b: 2, c: 3}]
console.log[prop]; // a, b, c [object property names]
for [let prop in new Set[['a', 'b', 'a', 'd']]]
console.log[prop]; // undefined [no enumerable properties]For ... of
Example For ... of
for [let val of ['a', 'b', 'c']]
console.log[val]; // a, b, c [array values]
for [let val of 'str']
console.log[val]; // s, t, r [string characters]
for [let val of {a: 1, b: 2, c: 3}]
console.log[prop]; // TypeError [not iterable]
for [let val of new Set[['a', 'b', 'a', 'd']]]
console.log[val]; // a, b, d [Set values]forEach
forEach là một phương thức của Array prototype, cho phép bạn lặp lại các phần tử của một mảng. Trong khi 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. là một phương thức của Array prototype, cho phép bạn lặp lại các phần tử của một mảng. Trong khi 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.
Một điều chú ý ở đây, đó là forEach được sử dụng rộng rải nhưng vẫn có nhiều bất cập cho nên bạn có thể đọc những bài viết trước về cách sử dụng forEach[] cụ thể hơn đó là Trời sinh ra for loop sao còn sinh array.forEach trong javascript? forEach được sử dụng rộng rải nhưng vẫn có nhiều bất cập cho nên bạn có thể đọc những bài viết trước về cách sử dụng forEach[] cụ thể hơn đó là Trời sinh ra for loop sao còn sinh array.forEach trong javascript?
Example foreach
['a', 'b', 'c'].forEach[ val => console.log[val] // a, b, c [array values] ]; ['a', 'b', 'c'].forEach[ [val, i] => console.log[i] // 0, 1, 2 [array indexes] ];
Enumerable properties object có nghĩa là gì?
Enumerable properties nó đơn giản có nghĩa là thuộc tính sẽ hiển thị nếu bạn lặp lại đối tượng bằng vòng lặp for..in hoặc Object.keys. Hãy xem xét một ví dụ đơn giản: Nói về object javascriptObject.keys. Hãy xem xét một ví dụ đơn giản: Nói về object javascript
let scores = [10, 20, 30];
for [let score of scores] {
score = score + 5;
console.log[score];
}
// 15
// 25
// 35
Object.getOwnPropertyDescriptor[] trả về một đối tượng với các characteristics của property. Trong trường hợp của chúng tôi, nó sẽ return:trả về một đối tượng với các characteristics của property. Trong trường hợp của chúng tôi, nó sẽ return:
let scores = [10, 20, 30];
for [let score of scores] {
score = score + 5;
console.log[score];
}
// 15
// 25
// 35
Như bạn đã thấy enumerable: true bởi vì mỗi new property có default enumerable: trueenumerable: true bởi vì mỗi new property có default enumerable: true
Nhưng nếu bạn muốn tạo một object có enumerable: false thì bạn làm thế nào? Để làm được điều đó bạn sẽ sử dụng method sau: Object.defineProperty[]enumerable: false thì bạn làm thế nào? Để làm được điều đó bạn sẽ sử dụng method sau: Object.defineProperty[]
let scores = [10, 20, 30];
for [let score of scores] {
score = score + 5;
console.log[score];
}
// 15
// 25
// 35
Như đầu bài tôi đã nói rằng chúng ta nên tập trung vào chính vấn đề là phân biệt và khi nào nên sử dụng For ... in, for ... of và forEach[]. Cho nên tôi chỉ dừng lại và giới thiệu gọn nhẹ cho bạn những tính năng trên. Nếu bài viết này giúp cho bạn, thì hãy giúp tôi share cho tất cả mọi người đều thấy. Xin cảm ơn!