Question

我在for循环中遇到了一些我不清楚的事情：

var info = {
"full_name" : "John Doe",
"title" : "FrontEnd",
"links" : {
    "blog"     : "JohnDoe.com",
    "facebook" : "http://facebook.com/JohnDoe",
        "youtube"  : "http://www.youtube.com/JohnDoe",
        "twitter"  : "http://twitter.com/JohnDoe" 
    }
};

我用这个循环遍历这个对象：

var output = "";

for (var key in info.links ) {
    if (info.links.hasOwnProperty(key)) {
        output += '<li>' +
        '<a href = "' + info.links[key] +
        '">' + key + '</a>' +
        '</li>';
        console.log(key);
    } 
}
var update = document.getElementById('links');
update.innerHTML = output;

我的问题是，当这个循环的范围内没有var键时，这个循环中的var键是什么以及为什么它可以工作？在这种情况下，var key成为info.links对象内的blog，facebook等。但为什么呢？

Answer 1

查看this以获取示例解决方案。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Problem Solver</title> <link href="other/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"></head> <body>  <div class="container-fluid"> <nav id="navbar" class="navbar navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html">F.A.Q</a></li> <li><a href="tech.html">Technician</a></li> <li><a href="da.html">Delivery Analyst</a></li> </ul> <form action="#.php" method="post" name="search_form" class="navbar-form navbar-right" > <input type="text" class="form-control" placeholder="Search..." name="search_field"> </form> </nav>  <div class="row"> <div class="col-md-9 col-lg-9 col-sm-10 col-xs-12 main myTableBlock"> <h2 class="sub-header">Results:</h2> <div class="table-responsive"> <?php $dbh = new PDO("sqlite:myDB2"); $query = $dbh->prepare("SELECT * FROM myData"); $query->execute(); $result = $query->fetchall(); echo "<table class='table table-striped table-hover' name='results_table'> <thead> <tr> <th>Incident Number</th> <th>Type of problem</th> <th>Subject of problem</th> <th>Date</th> <th>Current Status</th> </tr> </thead> <tbody>" ; foreach($result as $row) { echo "<tr class=".$row['ID']." >"; echo "<td>" . $row['incident_number'] . "</td>"; echo "<td>" . $row['incident_type'] . "</td>"; echo "<td>" . $row['incident_subject'] . "</td>"; echo "<td>" . $row['incident_time'] . "</td>"; echo "<td>" . $row['status'] . "</td>"; echo "<td>" ."<form action='myOpennerOutput.php' method='GET'>"."<input type='hidden' name='my_inc_number' value=". $row['incident_number'] .">"."<input type='submit' name='trigger' value='Show Actions' class='btn btn-primary' data-toggle='collapse' href='#collapseExample' aria-expanded='false' aria-controls='collapseExample'>". "</form>". "</td>"; } echo "</tr>"; echo "</tbody>"; echo "</table>"; ?> </div> </div>  <div class="col-md-2 sidebar myOpenner col-md-pull-1 col-lg-2 col-lg-pull-1 col-sm-2 col-sm-pull-1 col-xs-2 col-xs-pull-1"> <div class="collapse" id="collapseExample"> <div class="well"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <form action="#.php" method="post"> <label id="incident_number">Incident nr.:</label> <textarea name="actionsByTech" rows="5" cols="30" placeholder="Technician's actions:"></textarea><br> <br> <textarea name="da_description" rows="5" cols="30" placeholder="DA's description:"></textarea></br> <div class=" col-md-12 text-center"> <input type="submit" class="btn btn-primary" value="Update"> </div> </form> </div> </div> </div> </div> </div>  </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="other/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body> </html>代表info.links对象的密钥，如key等，因此blog, facebook代表值，即

info.links[key]

希望这很清楚。

查看loop说明

的此链接

Answer 2

彻底查看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

for (variable in object) { ...
}

变量“在每次迭代时为变量分配不同的属性名称。” 在您的情况下，“facebook”，“twitter”等是您在对象

中的属性名称

Answer 3

var表示您声明了一个新变量，key是您为此变量指定的名称。

由于您要在info.links中循环浏览，因此您希望能够单独调用每个var

在一个物体内循环

3 个答案: