Hướng dẫn cách sử dụng for…in trong JavaScript. Bạn sẽ học được cách dùng for…in để lấy thuộc tính từ Object trong JavaScript sau bài học này.

• Bài viết liên quan: for of trong JavaScript và cách lấy giá trị từ đối tượng

For…in trong JavaScript và cách lấy thuộc tính từ Object

for…in trong JavaScript là vòng lặp được sử dụng để lấy các thuộc tính của Object dưới dạng một mảng trong JavaScript. Chúng ta sử dụng for…in với cú pháp sau đây:

Trong đó

• variable là biến được sử dụng để gán lần lượt các thuộc tính của Object
• object là đối tượng cần lấy thuộc tính

Nếu chỉ có 1 câu lệnh duy nhất trong khối for…in 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:

Để hiểu rõ hơn, chúng ta cùng xem ví dụ sau đây. Giả sử chúng ta có một Object sau:

const user= {name:'Suzuki', old:90, sex:'male'};

Object user trên có 3 thuộc tính là name, old và sex, và chúng ta sẽ lần lượt lấy các giá trị tương ứng của chúng là Suzuki, 90 và male bằng for…in trong JavaScript như sau:

const user= {name:'Suzuki', old:90, sex:'male'};
for (let i in user){
  console.log(user[i]);
}

console.log("END");

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

1. Đánh giá Object user. Nếu Object là null hoặc undefined thì kết thúc vòng lặp. Trường hợp ngược lại thì sẽ lấy lần lượt thuộc tính trong object và gán vào biến i.
2. Dùng biến i và thực thi lệnh bên trong khối for…in
3. Lặp lại vòng lặp cho tới khi lấy hết thuộc tính từ trong Object.
4. 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

Khi sử dụng for…in trong Javascript, các thuộc tính của Object sẽ được lấy dưới dạng một mảng, do đó chúng ta không dùng cách thông thường để lấy thuộc tính ( Object.property) mà sẽ dùng cách truy cập vào phần tử trong mảng (array[i]) để lấy các thuộc tính như Kiyoshi đã trình bày ở trên.

Lưu ý khi sử dụng for…in trong mảng JavaScript

Khi sử dụng for…in trong mảng trong JavaScript, kết quả trả về sẽ là các thuộc tính của mảng đó, bao gồm cả index của các phần tử chứa trong mảng.

Ví dụ:

const myarray = [3, 5, 7];
console.log(myarray);
//> [ 3, 5, 7 ]

//Thêm một thuộc tính {foo:'hello'}vào mảng
myarray.foo = 'hello';
console.log(myarray);
//> [ 3, 5, 7, foo: 'hello' ]

//Lấy thuộc tính của mảng bằng for...in
for (const i in myarray) {
    console.log(i); 
}

//> 0
//> 1
//> 2
//> foo

Tuy nhiên, chúng ta không nên sử dụng for…in để lấy các giá trị từ trong một mảng trong JavaScript, vì giống như dưới đây thì các giá trị thực của mảng lẫn giá trị của thuộc tính trong mảng đều được in ra màn hình.

const myarray = [3, 5, 7];
myarray.foo = 'hello';

for (const i in myarray) {
    console.log(myarray[i]); 
}
//> 3
//> 5
//> 7
//> hello

Thay vào đó, hãy sử dụng tới for…of trong JavaScript để lấy các giá trị của mảng trên như sau:

const myarray = [3, 5, 7];
myarray.foo = 'hello';

for (const i of myarray) {
    console.log(i); 
}
//> 3
//> 5
//> 7

• Xem thêm: for of trong JavaScript và cách lấy giá trị từ đối tượng

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

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…in trong JavaScript và cách lấy thuộc tính 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.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/vong-lap-trong-javascript/for-in-trong-javascript/