Javascript for() loop w/ object declaration and IN reserved word - just looking for some clarification
I am working an a basic learning script below. My main question is in the for() declaration what is the 'IN' reserved word and how does the starName relate to it because it is not defined anywhere earlier on the page.
I am trying to understand how the for() loop is "thinking" with that starName in star statement.
<script type="text/javascript">
var star = {};
star["Polaris"] = new Object;
star["Mizar"] = new Object;
star["Aldebaran"] = new Object;
star["Rigel"] = new Object;
star["Polaris"].constellation = "Ursa Minor";
star["Mizar"].constellation = "Ursa Major";
star["Aldebaran"].constellation = "Taurus";
star["Rigel"].constellation = "Orion";
</script>
</head>
<body id="mainbody">
<script type="text/javascript">
for (starName in star) {
var para = document.createElement('p');
para.id = starName;
para.appendChild(document.createTextNode(starName +
": " + star[starName].constellation));
document.getElementsB开发者_JAVA百科yTagName("body")[0].appendChild(para);
}
</script>
<!-- output below -->
<p id="Polaris">Polaris: Ursa Minor</p>
<p id="Mizar">Mizar: Ursa Major</p>
<p id="Aldebaran">Aldebaran: Taurus</p>
<p id="Rigel">Rigel: Orion</p>
The for ... in syntax enumerates all enumerable properties of an object.
starName will be a string that represents the name of the property. You can that access that property (and do plenty of other things) like that:
var p = star[starName];
Now there are a couple things you should be aware of when using the for ... in syntax:
Make use of hasOwnProperty to safeguard against properties added higher in the prototype chain.
Object.prototype.allObjectWillInheritThis = 1;
/// ...
for (var starName in star) {
if (star.hasOwnProperty(starName)) {
// Do your thing
}
}
Filter out functions. Chances are you are not interested in function but in properties.
for (var starName in star) {
if (star.hasOwnProperty(starName) &&
typeof star[starName] !== 'function') {
// Do your thing
}
}
Maybe this will help: for(newVariable in existingVariable);
The for-loop construct creates a new variable that you can use as the current value in your loop. The second value is a variable you want to loop on.
As pointed out by Bryan, the for-in construct only loops on enumerable properties. If you want to check if something is enumerable, you can call .propertyIsEnumerable(0) on it.
How it works, is star is an array (or object) with multiple values. Imagine an array with numbers 1 to 10.
The in keyword iterates through the array and assigns the value to starName. So the array with numbers 1 to 10 will iterate 10 times, and each time starName will become the next value.
The order is based on the index of the array (or object)
This construction
for(var key in collection) { ... }
allows to iterate over enumerable keys in JS collections (objects/maps and arrays).
On each iteration key will get new key value contained in the collection.
Note #1: for(...in...) has a "cool" feature of iterating not only through keys defined on objects themselves but also in their prototypes.
Note #2: Key variable should have 'var' keyword in front of it in order this loop to work effectively. Without 'var' the 'key' variable will be created in global namespace.
加载中,请稍侯......
精彩评论