Home > Article > Web Front-end > Detailed explanation of Foreach syntax in JavaScript

Detailed explanation of Foreach syntax in JavaScript

黄舟Original: 2017-11-16 14:45:393433browse

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>

Output after clicking one:

0: blue
1: red
2: yellow

Output after clicking two:

uname: 张三
age: 18

Of course if There is a method in u1:

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

Then click two and it will output:

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

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!

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：Summary of methods for refreshing JS pagesNext article：Summary of methods for refreshing JS pages

See more

Detailed explanation of Foreach syntax in JavaScript

Related articles