search

Home >Web Front-end >JS Tutorial >What is the difference between for in loop and for loop in js

What is the difference between for in loop and for loop in js

一个新手
一个新手Original
2017-09-09 13:04:161988browse

JavaScript for...in statement

The for...in statement is used to loop through the properties of an array or object.

for ... in Each time the code in the loop is executed, an operation will be performed on the elements of the array or the properties of the object.

Tip: for-in loops should be used to traverse non-array objects. Using for-in to loop is also called "enumeration". ·

Syntax:

for (变量 in 对象)
{    在此执行代码}

"Variable" is used to specify variables. The specified variables can be array elements or attributes of objects.

Example: Use for ... in to loop through the array. 

<html><body><script type="text/javascript">var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}</script></body></html>

Note 1: The for in loop will not arrange the output according to the subscript of the attribute. 

//code from http://caibaojian.com/js-loop-for-in.html"first":"first",   "zoo":"zoo",  "2":"2",  "34":"34",  "1":"1",  "second":"second"};for (var i in obj) { console.log(i); };输出：1234firstzoosecond

When executing, press chrome to execute. First, extract the non-negative integer keys, sort the output, and then output the rest in the order of definition. Due to this weird setting, avalon's ms-with object sorting is not output as expected. You can only force users not to define key names with pure numbers.

Example 1: A new attribute is defined on the prototype object of the array, and there is no problem using the for loop 

function getNewArray(){var array=[1,2,3,4,5];Array.prototype.age=13;
var result = [];for(var i=0;i<array.length;i++){
result.push(array[i]);
}alert(result.join(''));
}

Example 2: A for in loop is used, but it gives us the same expectation Still got the correct result of 12345

function getArrayTwo(){var array=[1,2,3,4,5 ];
var result=[];
for(var i in array){
result.push(array[i]);
}alert(result.join(''));
}

Example 3: After adding attributes to the prototype, it is enumerated by default, and finally outputs 1234513

function getNewArrayTwo(){var array=[1,2,3,4,5 ];
Array.prototype.age=13;var result=[];
for(var i in array){
result.push(array[i]);
}alert(result.join(''));
}

So it is recommended not to perform a for in loop on the array, in fact In the book High Performance JavaScript, it is also emphasized that the for in loop is not good, because it always accesses the prototype of the object to see if there are attributes on the prototype, which unintentionally adds extra time to the traversal. pressure.

Solution:

If an object has a property with the given name, then Object.prototype.hasOwnProperty(name) returns true. If the object inherits this property from the prototype chain, or does not have such a property at all, false is returned. Limit the for in loop to traverse the current through hasOwnProperty, without considering its prototype properties. 

function finalArray(){var array=[1,2,3,4,5 ];
Array.prototype.age=13;
var result=[];for(var i in array){if(array.hasOwnProperty(i)){
result.push(array[i]);
}
}alert(result.join(''));
}

Notes:

1. Some browsers, such as the early Safari browser, do not support this method

2. Objects often Being used as a hash value, there is a risk that hasOwnProperty is blocked by another attribute (but I guess no one is so boring to use this attribute)

The above is the detailed content of What is the difference between for in loop and for loop in js. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Understanding of prototype chain and inheritance in jsNext article：Understanding of prototype chain and inheritance in js

Related articles

See more