In JavaScript for: In Loop Trap Introduction

Source: Internet
Author: User
Tags hasownproperty

The loop counter in the for...in loop is a string, not a number it contains the name of the current property or the index of the current array element, and here's a good example. Everyone knows that there are two ways to iterate an object in javascript:
(1) for loop;
(2) for. in loop;
Using a For loop to iterate over an algebraic group of objects is already commonplace for everyone. However, use the for: In the loop, you have to pay attention, why do you say so? Listen to me, everybody.
JavaScript provides a special loop (that is, for. In loop), used to iterate over the properties of an object or each element of an array, the loop counter in the for...in loop is a string, not a number. It contains the name of the current property or the index of the current array element.
Case one:
Copy CodeThe code is as follows:
Use for: In looping through object properties
varperson={
Name: "Admin",
Age:21,
Address: "Shandong"
};
For (vari in person) {
Console.log (i);
}
The result of the execution is:
Name
Age
Address
When traversing an object, the variable i, which is the loop counter, is the property name of the object.
Copy CodeThe code is as follows:
Use for: In looping through an array
Vararray = ["admin", "manager", "DB"]
For (Vari in array) {
Console.log (i);
}
Execution Result:
0
1
2
When iterating through an array, the variable i is the index of the current array element, which is the loop counter
Case TWO:
But now it seems for. In the loop is very useful ah, however, don't be happy too early, look at the following example:
Copy CodeThe code is as follows:
var array =["admin", "manager", "DB"];
Add a Name property to the array's prototype
Array.prototype.name= "Zhangsan";
for (var i in array) {
Alert (Array[i]);
}
Operation Result:
Admin
Manager
Db
Zhangsan
Gee, wonders, how can a zhangsan come out of nowhere
Now, let's see what happens with a for loop?
Copy CodeThe code is as follows:
Vararray = ["admin", "manager", "DB"];
Add a Name property to the array's prototype
Array.prototype.name = "Zhangsan";
for (var i =0; i<array.length; i++) {
Alert (Array[i]);
};
Operation Result:
Admin
Manager
Db
Oh, now I see, for. The in loop iterates through the methods and properties in a type's prototype (prototype), so this can lead to unexpected errors in the code. To avoid this problem, we can use the hasOwnProperty () method of the object to avoid this problem, and the hasOwnProperty () method returns True if the property or method of the object is non-inherited. That is, the check here does not involve properties and methods inherited from other objects, only properties that are created directly in the particular object itself.
Case THREE:
Copy CodeThe code is as follows:
Vararray = ["admin", "manager", "DB"];
Array.prototype.name= "Zhangshan";
For (Vari in array) {
If the property is not directly created by the object itself (that is, it is a property in the prototype), the display is skipped
if (!array.hasownproperty (i)) {
Continue
}
Alert (Array[i]);
}
Operation Result:
Admin
Manager
Db
Everything is intact again, hey, do not know, comrades watching what feelings, is not a kind of "clear clouds see sunny" feeling ah, hehe

In JavaScript for: In Loop Trap Introduction

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.