Tiếp theo series học js miễn phí, Thế giới JS share về vòng lặp for-in trong JavaScript, Nó được sử dụng để lặp lại các thuộc tính của một đối tượng. Nó có thể là một công cụ sửa lỗi tuyệt vời nếu chúng ta muốn hiển thị nội dung của một đối tượng. Vòng lặp for-in chỉ lặp lại trên các khóa đó của một đối tượng có thuộc tính đếm được của chúng được đặt thành “true”. Các giá trị khóa trong một đối tượng có bốn thuộc tính (giá trị, có thể ghi, có thể đếm được và có thể định cấu hình). Có thể đếm được khi được đặt thành “true” có nghĩa là chúng ta có thể lặp lại thuộc tính đó. Bạn có thể đọc về bốn thuộc tính chính trong phần thuộc tính thuộc tính của Đối tượng trong JavaScript .
1.Cú pháp:
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
for (let i in obj1) {
// Prints all the keys in
// obj1 on the console
console.log(i);
}
2.Điểm quan trọng:
- Sử dụng vòng lặp for-in để lặp qua các đối tượng không thuộc mảng. Mặc dù chúng ta có thể sử dụng vòng lặp for-in cho một mảng, nhưng nó thường không được khuyến khích. Thay vào đó, hãy sử dụng vòng lặp for để lặp qua một mảng.
- Các thuộc tính được lặp lại với vòng lặp for-in cũng bao gồm các thuộc tính của các đối tượng cao hơn trong Nguyên mẫu của chuỗi.
- Thứ tự các thuộc tính được lặp lại có thể không khớp với các thuộc tính được xác định trong đối tượng.
Ví dụ: Một ví dụ đơn giản để minh họa cho vòng lặp for-in.
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
//declaring a object employee
const courses = {firstCourse:'JavaScript',
secondCourse:'React',
thirdCourse:'Angular'};
let value = '';
//using for in loop
for (let item in courses) {
value += courses[item] + '<br>';
}
document.getElementById("val").innerHTML = value;
Đầu ra:
JavaScript React Angular
Ở đây trong ví dụ trên những gì đã xảy ra là:
- Vòng lặp for-in JavaScript lặp lại trên đối tượng các khóa học(courses).
- Đối với mỗi lần lặp lại, một khóa(courses) được trả về (mục-item)
- Bây giờ mục này có thể được sử dụng để truy cập giá trị của đối tượng
- Giá trị của khóa(courses) được cung cấp bởi các khóa học [mục-item]
Ví dụ: Vòng lặp for-in lặp lại các thuộc tính của một đối tượng và các thuộc tính của chuỗi nguyên mẫu của nó. Nếu chúng ta muốn hiển thị cả hai thuộc tính của đối tượng “student1” chỉ thuộc về đối tượng đó và chuỗi nguyên mẫu, thì chúng ta có thể thực hiện nó bằng vòng lặp for.
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
const courses = {
// Declaring a courses object
firstCourse: "C++ STL",
secondCourse: "DSA Self Paced",
thirdCourse: "CS Core Subjects"
};
// Creating a new empty object with
// prototype set to courses object
const student1 = Object.create(courses);
// Defining student1 properties and methods
student1.id = 123;
student1.firstName = "Prakhar";
student1.showEnrolledCourses = function(){
console.log(courses);
}
// Iterating over all properties of
// student1 object
for (let prop in student1) {
console.log(prop + " -> "
+ student1[prop]);
}
Đầu ra:
"id -> 123"
"firstName -> Prakhar"
"showEnrolledCourses -> function(){
window.runnerWindow.proxyConsole.log(courses);
}"
"firstCourse -> C++ STL"
"secondCourse -> DSA Self Paced"
"thirdCourse -> CS Core Subjects"
Ví dụ: Vòng lặp for-in lặp lại các thuộc tính của một đối tượng và các thuộc tính của chuỗi nguyên mẫu của nó. Nếu chúng ta chỉ muốn hiển thị các thuộc tính của đối tượng “student1” chỉ thuộc về đối tượng đó chứ không thuộc chuỗi nguyên mẫu, thì chúng ta có thể thực hiện kiểm tra “nếu” bằng phương thức hasOwnProperty() .
// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs
const courses = {
// Declaring a courses object
firstCourse: "C++ STL",
secondCourse: "DSA Self Paced",
thirdCourse: "CS Core Subjects"
};
// Creating a new empty object with
// prototype set to courses object
const student1 = Object.create(courses);
// Defining student1 properties and methods
student1.id = 123;
student1.firstName = "Prakhar";
student1.showEnrolledCourses = function () {
console.log(courses);
}
// Iterating over only those properties
// of student 1 object which is not on
// its prototype chain
for (let prop in student1) {
if (student1.hasOwnProperty(prop)) {
console.log(prop + " -> "
+ student1[prop]);
}
}
Đầu ra:
id -> 123
firstName -> Prakhar
showEnrolledCourses -> function () {
console.log(courses);
}
Vòng lặp for-in với kiểm tra hasOwnProperty() lặp lại các thuộc tính của đối tượng.
Trên đây là tất cả những gì về Vòng lặp for-in trong javascript mà bạn cần biết. Nếu bạn có bất kỳ câu hỏi liên quan tới Vòng lặp for-in, hãy chủ động liên hệ và inbox cho chúng tôi, để giúp đỡ bạn sớm nhất
Tiếp theo, hãy cùng Thế giới JS tìm hiểu thêm các kiến thức về Javascript trong các bài tiếp theo trong series học miễn phí Javascript từ cơ bản tới nâng cao.
Nếu bạn cảm thấy hữu ích và yêu thích Thế giới JS, hãy tham gia và theo dõi chúng tôi để nhận thêm nhiều kiến thức MIỄN PHÍ hơn nữa nhé:
Share to learn more than!
