for...in trong JavaScript và cách lấy thuộc tính từ đối tượng | Laptrinhcanban.com

for...in trong JavaScript và cách lấy thuộc tính từ đối tượng

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.

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, oldsex, và chúng ta sẽ lần lượt lấy các giá trị tương ứng của chúng là Suzuki, 90male 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

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.

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.