Detailed explanation of Foreach syntax in JavaScript-JS Tutorial-php.cn

Detailed explanation of Foreach syntax in JavaScript

黄舟

Release： 2017-11-16 14:45:39

Original

3419 people have browsed it

When I see the title, I believe many friends will say foreach Isn’t it just a loop statement? Yes, Foreach is indeed a loop statement, but many friends don’t know how to master it familiarly. Today we will show you Detailed introduction to the Foreach syntax in JavaScript!

First of all, although it is called Foreach syntax, the keyword is still for. This syntax is just a simplification of the usually used for syntax.

This syntax is usually used to traverse the array. At this time, each loop gets the index of the array (an integer number), and then obtains the array name through the array name [integer index] Object.

But this syntax can also be used to traverse the object, and get the attribute name of the object (a string). Then pass the object name [attribute name] You can get the object.

So the key to understanding this syntax is to understand what exactly is obtained in each loop.

In fact, the realization of this function benefits from the fact that the array index of JavaScript can be a string. If not (think of Java), there will be no such thing.

<html>
<heap>
<script type="text/javascript">
    var mycolors = new Array(&#39;blue&#39;,&#39;red&#39;,&#39;yellow&#39;);
    function f1(){        
        var content="";
        for(var key in mycolors){
            content += key+": "+mycolors[key]+"<br/>";
        }    
        document.getElementById("content").innerHTML = content;
    }
    
    function User(){}
    
    function f2(){                
        var u1=new User();
        u1.uname="张三";
        u1.age="18";
        
        var content="";
        for(var key in u1){
            content += key+": "+u1[key]+"<br/>";
        }    
        document.getElementById("content").innerHTML = content;
    }
</script>
</heap>
<body>
<input type="button" id="c1" name="c1" onclick="f1();" value="click one"/>    
<input type="button" id="c2" name="c2" onclick="f2();" value="click two"/>    
<div id="content"></div>
</body>
</html>

Copy after login

Output after clicking one:

0: blue
1: red
2: yellow

Copy after login

Output after clicking two:

uname: 张三
age: 18

Copy after login

Of course if There is a method in u1:

u1.sai=function(){
   alert("hello");
}

Copy after login

Then click two and it will output:

uname: 张三
age: 18
sai: function(){ alert("hello"); }

Copy after login

Summary:

Looking at the last clever thing, you should now know how to traverse a JSON object, and you should also have a certain understanding of the foreach statement. I hope it will be helpful to you!

Related recommendations:

Detailed explanation of the use of forEach and each in JavaScript

JavaScript forEach() method explanation

javascript forEach function implementation code

The above is the detailed content of Detailed explanation of Foreach syntax in JavaScript. For more information, please follow other related articles on the PHP Chinese website!