Tóm Tắt
Giới thiệu nội dung bài viết
Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người về cách khai báo và sử dụng For of của ES6. Lần lượt giới thiệu và giải thích khái niệm và ví dụ về For of của ES6 là gì?
1. Giới thiệu về For of
ES6 cung cấp cho chúng ta một chức năng mới để duyệt qua các phần tử như Array, String, Map, Set hoặc các đối tượng thông qua vòng lặp for of.
Cú pháp vòng lặp for of
1 2 3for
(
variable
of
iterable
)
{
// statements
}
Variable được dùng để duyệt qua các phần tử trong mảng. Chúng ta có thể sử dụng từ khoá var, let, const để khai báo trước biến variable.
iterable là object chứa dựng các phần tử.2. Duyệt qua mảng
1 2 3 4 5 6let
scores
=
[
80
,
90
,
70
];
for
(
let
score
of
scores
)
{
score
=
score
+
5
;
console
.
log
(
score
);
}
Chúng ta sẽ nhận được kết quả là 85,95,75.
Nếu chúng ta muốn giá trị biến score không thay đổi thì sưer dụng từ khoá const thay vì let như sau
1 2 3 4 5let
scores
=
[
80
,
90
,
70
];
for
(
const
score
of
scores
)
{
console
.
log
(
score
);
}
kết quả nhận được là 80,90,70
3. Lấy vị trí của các phần tử trong mảng
Để lấy được vị trí của các phần tử trong mảng chúng ta có thể sử dụng vòng for kết hợp với phương thức entries() của mảng như sau.
1 2 3 4 5let
colors
=
[
'
Red
'
,
'
Green
'
,
'
Blue
'
];
for
(
const
[
index
,
color
]
of
colors
.
entries
())
{
console
.
log
(
`
${
color
}
is at index
${
index
}
`
);
}
Chúng ta sẽ nhận được kết quả là
1 2 3Red
is
at
index
0
Green
is
at
index
1
Blue
is
at
index
2
4. Duyệt qua chuỗi
Chúng ta có thể sử dụng for of để duyệt qua các chuỗi như sau.
1 2 3 4let
str
=
'
abc
'
;
for
(
let
c
of
str
)
{
console
.
log
(
c
);
}
Kết quả nhận được là a,b,c
5. Duyệt qua Map
Chúng ta sử dụng for of duyệt các phần tử Map như sau.
1 2 3 4 5 6 7 8 9let
colors
=
new
Map
();
colors
.
set
(
'
red
'
,
'
#ff0000
'
);
colors
.
set
(
'
green
'
,
'
#00ff00
'
);
colors
.
set
(
'
blue
'
,
'
#0000ff
'
);
for
(
let
color
of
colors
)
{
console
.
log
(
color
);
}
Kết quả nhận được là :
1 2 3[
'
red
'
,
'
#ff0000
'
]
[
'
green
'
,
'
#00ff00
'
]
[
'
blue
'
,
'
#0000ff
'
]
6. Duyệt qua Set
Chúng ta có thể sử dụng for of duyệt qua tập hợp Set như sau
1 2 3 4 5let
nums
=
new
Set
([
1
,
2
,
3
]);
for
(
let
num
of
nums
)
{
console
.
log
(
num
);
}
7. Sự khác nhau for of và for in
Chúng ta sử dụng for in để duyệt qua các thuộc tính của một đối tượng. Nó không sử dụng để duyệt các tập hợp như Array, Map hoặc Set
Không giống như vòng lặp for in vòng lặp for of được sử dụng để duyệt tập hợp hơn là duyệt các đối tượng.
8. Sự khác nhau for of và for
Anh có ví dụ sau để duyệt qua các phần tử trong mảng.
1 2 3 4 5let
ranks
=
[
'
A
'
,
'
B
'
,
'
C
'
];
for
(
let
i
=
0
;
i
<
ranks
.
length
;
i
++
)
{
console
.
log
(
ranks
[
i
]);
}
Đoạn code trên không có gì sai, tuy nhiên chúng ta phải theo dõi index (i) tăng lên, nếu mảng lồng mảng thì độ phức tạp sẽ rất cao. Chúng ta sẽ khó khăn trong việc theo dõi index trong mảng.
ES6 cho ra đời for of để giảm đi độ phức tạp tránh lỗi xảy ra khi theo dõi index của mảng. Nếu mảng lồng mảng thì độ phức tạp sẽ ít hơn vì chúng ta chỉ sử dụng giá trị trực tiếp (rank) mà không cần phải theo dõi index trong mảng.
1 2 3for
(
let
rank
of
ranks
)
{
console
.
log
(
rank
);
}
9. Demo Video
Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm
Các khoá học lập trình MIỄN PHÍ tại đây