Chào các bạn, hôm nay chúng ta sẽ tìm hiểu về sự khác nhau giữa for...in
và for...of
trong JavaScript nhé 😁.
Tóm Tắt
Khác nhau giữa for…in và for…of JavaScript
Đối với for...in
, nó lặp qua tất cả các key
của enumerable properties trong một object. Còn for...of
sẽ lặp qua các giá trị của đối tượng lặp.
Các bạn có thể xem ví dụ dưới đây để hiểu rõ hơn:
let
colors =
[
'red'
,
'green'
,
'blue'
]
;
colors.
blog =
'homiedev.com'
;
for
(
let
i in
colors)
{
console.
log
(
i)
;
}
for
(
let
i of
colors)
{
console.
log
(
i)
;
}
Ở ví dụ trên, sự khác nhau của hai vòng lặp nằm ở chỗ for...in
lặp qua các properties của array colors
, còn for...of
lặp qua các phần tử của array colors
.
Chúng ta cùng xem tiếp một ví dụ sau, trong trường hợp này sử dụng for...of
sẽ báo lỗi 👇.
Giả sử chúng ta có object sau:
const
rappers =
{
eminem:
'1972'
,
tupac:
'1971'
}
Bây giờ chúng ta sẽ sử dụng for...in
để lặp qua object này:
for
(
i in
rappers)
{
console.
log
(
i)
;
console.
log
(
rappers[
i]
)
}
Như các bạn có thể thấy, câu lệnh for...in
có thể lặp qua object. Nhưng điều này sẽ không thể sử dụng cho for...of
.
Khi lặp bằng cách sử dụng for...of
sẽ dẫn đến lỗi TypeError:
for
(
let
i of
rappers)
{
console.
log
(
i)
;
}
Lý do là vì đối tượng sử dụng của for...of
là một iterable object. Hay nói cách khác for...of
có thể 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ụ trên, chúng ta đã sử dụng một plain object không phải iterable object nên sẽ nhận được lỗi như trên.
Kết luận
Tóm lại, sự khác nhau giữa for...in
và for...of
trong JavaScript là:
for... in
lặp qua cáckey
của enumerable properties trong một object.for... of
lặp qua các phần tử của một iterable object.