HOME › học javascript - lập trình javascript cơ bản>>05. vòng lặp trong javascript

for...of trong JavaScript và cách lấy giá trị từ đối tượng

15 tháng 7 ,2021

Hướng dẫn cách sử dụng for…of trong JavaScript. Bạn sẽ học được cách dùng for…of để lấy giá trị từ iterable objects (các đối tượng có thể lặp lại) trong JavaScript, cũng như sự khác biệt giữa for…in và for…of trong javascript sau bài học này.

Bài viết liên quan: for in trong JavaScript và cách lấy thuộc tính từ đối tượng

For…of trong JavaScript

For…of trong JavaScript là vòng lặp được sử dụng để lấy các giá trị của iterable objects (các đối tượng có thể lặp lại) theo thứ tự index. Chúng ta sử dụng for…of với cú pháp sau đây:

for (variable of iterable_objects ) {
    Câu lệnh 1 trong khối for…of ;
    Câu lệnh 2 trong khối for…of ;
    …
}

Trong đó

variable được sử dụng để gán lần lượt các giá trị của iterable objects (các đối tượng có thể lặp lại)
iterable objects là các đối tượng có thể lặp lại như mảng, DOM, chuỗi v.v.. trong JavaScript.

Nếu chỉ có 1 câu lệnh duy nhất trong khối for..of thì chúng ta có thể lược bỏ đi cặp dấu ngoặc nhọn {} và sử dụng cú pháp sau:

for (variable of iterable_objects )
Câu lệnh;

Để hiểu rõ hơn, chúng ta cùng xem ví dụ sau đây. Giả sử chúng ta có một iterable objects (các đối tượng có thể lặp lại) là một mảng như sau:

const user= ['Suzuki', 90, 'male'];

iterable objects (các đối tượng có thể lặp lại) user trên có 3 giá trị là Suzuki, 90 và male , và chúng ta sẽ lấy chúng ra lần lượt bằng for…of trong JavaScript như sau:

const user= ['Suzuki', 90, 'male'];
for (let value of user){
  console.log(value);
}

console.log("END");

Vòng lặp for…of trong JavaScript ở trên sẽ chạy như sau:

Đánh giá iterable objects (các đối tượng có thể lặp lại). Nếu iterable objects (các đối tượng có thể lặp lại) là null hoặc undefofed thì kết thúc vòng lặp. Trường hợp ngược lại nếu iterable objects chứa phần tử thì sẽ lấy lần lượt giá trị trong iterable objects và gán vào biến value.
Dùng biến value và thực thi lệnh bên trong khối for…of
Lặp lại vòng lặp cho tới khi lấy hết giá trị từ trong iterable objects.
Kết thúc vòng lặp và thực thi câu lệnh tiếp theo của chương trình.

Kết quả chương trình:

Suzuki
90
male
END

Sử dụng for…of trong JavaScript

Chúng ta có thể sử dụng for…of trong JavaScript để lấy giá trị trong các iterable objects như mảng, chuỗi, set, dom v.v… trong JavaScript, miễn là objects đó chứa ít nhất 1 phần tử là được. Dưới đây là một số ví dụ.

Sử dụng for…of trong JavaScript để lấy giá trị từ mảng

const array = [1, 2, 3];

for (let value of array) {
  console.log(value);
}
// 1
// 2
// 3

Sử dụng for…of trong JavaScript để lấy giá trị từ DOM

Ví dụ chúng ta có mã HTML sau:

<body>
 
  <p>text 1</p>
  <p>text 2</p>
  <p>text 3</p>
 
</body>

Chúng ta sẽ sử dụng for…of trong JavaScript để lấy và in ra màn hình toàn bộ các phần tử của tag <p> như sau:

//Lấy DOM chứa tất cả các thẻ tag p
var p = document.getElementsByTagName( 'p' );

//Sử dụng for...of để lấy các giá trị từ DOM
for( var element of p ) { 
   console.log( element );
}

Kết quả:

<p>text 1</p>
<p>text 2</p>
<p>text 3</p>

Sử dụng for…of trong JavaScript để lấy giá trị từ chuỗi

const string = 'abcd';

for (let value of string) {
  console.log(value);
}
// a
// b
// c
// d

Sử dụng for…of trong JavaScript để lấy giá trị từ MAP

const map = new Map([['a', 10], ['b', 20], ['c', 30]]);

for (let value of map) {
  console.log(value);
}
// [ 'a', 10 ]
// [ 'b', 20 ]
// [ 'c', 30 ]

Sử dụng for…of trong JavaScript để lấy giá trị từ SET

const set = new Set([1, 2, 3]);

for (let value of set) {
  console.log(value);
}
// 1
// 2
// 3

Lưu ý khi sử dụng for…of trong JavaScript

Ở phần trên chúng ta đã học được cách sử dụng cơ bản của for…of trong JavaScript rồi. Cú pháp for…of trong JavaScript khá đơn giản, nên thường được sử dụng để lấy phần tử trong mảng hay DOM v.v…

Tuy nhiên, chúng ta cần phải lưu ý khi sử dụng cú pháp này, đó là chỉ có thể sử dụng for…of trong JavaScript với các iterable Object (các đối tượng chứa nhiều phần tử) mà thôi. Chúng ta không thể sử dụng for…of với Object thông thường trong JavaScript

Lấy ví dụ, khi chúng ta sử dụng for…of với một Object trống:

var obj = new Object();

for(var item of obj) { 
  console.log( item );
}

Lỗi sau đây sẽ xảy ra ngay:

TypeError: obj is not iterable

Sự khác biệt giữa for…in và for…of trong javascript

Trong bài trước chúng ta đã học qua bài for…of, và bài này là for in, và chúng ta đều biết cả for…of và for in đều giống nhau ở chỗ chúng được sử dụng để lặp lại một cái gì đó trong JavaScript. Sự khác biệt là ở chỗ thứ chúng lặp lại là hoàn toàn khác nhau.

Câu lệnh for in sẽ lặp lại các thuộc tính của một đối tượng.

Trong khi đó câu lệnh for…of sẽ lặp lại các giá trị của đối tượng đó.

Ví dụ, khi sử dụng for in và for…off với một mảng sẽ cho ra các kết quả khác nhau sau đây:

const iterable = [3, 5, 7];
//Thêm một thuộc tính vào mảng
iterable.foo = 'hello';

//Lấy thuộc tính của mảng bằng for in
for (let i in iterable) {
    console.log(i); 
}
//> 0
//> 1
//> 2
//> foo

//Lấy giá trị của mảng bằng for...of
for (let i of iterable) {
  console.log(i);
}
//> 3
//> 5
//> 7

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về for…of trong JavaScript và cách lấy giá trị từ đối tượng rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.