Hướng dẫn for...in trong javascript

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:

for [biến in object ] {
    Câu lệnh 1 trong khối for…in ;
    Câu lệnh 2 trong khối for…in;
    …
}

Trong đó

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:

for [biến in object ]
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 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:

Đá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.
Dùng biến i và thực thi lệnh bên trong khối for…in
Lặp lại vòng lặp cho tới khi lấy hết thuộc tính từ trong Object.
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];



myarray.foo = 'hello';
console.log[myarray];



for [const i in myarray] {
    console.log[i]; 
}

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]]; 
}

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]; 
}

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];

iterable.foo = 'hello';


for [let i in iterable] {
    console.log[i]; 
}






for [let i of iterable] {
  console.log[i];
}

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.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="//creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a> và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="//www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="//images.dmca.com/Badges/DMCABadgeHelper.min.js">

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

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

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

Tổng kết

Bài viết liên quan

do...while trong JavaScript và vòng lặp có ít nhất 1 lần chạy

For lồng [for trong for] trong JavaScript

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

For trong JavaScript và vòng lặp với số lần cụ thể

Break trong JavaScript và cách thoát khỏi vòng lặp

Continue trong JavaScript và cách bỏ qua vòng lặp

Vòng lặp vô hạn trong JavaScript

While trong JavaScript và vòng lặp không giới hạn số lần

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề