Javascript函数理解答案

【问题标题】：Javascript Function UnderstandingJavascript函数理解
【发布时间】：2016-12-26 14:14:49
【问题描述】：

我目前正在研究javascript函数，但这些程序让我有点困惑，请解释一下下面给出的程序的全部内容，对for循环减量感到困惑。

var socialMediaIcon = {
    facebook: "http://facebook.com/haseebjumani",
    Twitter: "http://twitter.com/haseebjumani",
    whatsapp: "http://whatsapp.com/",
    flickr: "http://flicker.com/haseebjumani"
}

var social = function() {
    var output = '<ul>',
    myList = document.querySelectorAll(".social-media");

    for (var key in arguments[0]) {
        output += '<li><a href="'+ socialMediaIcon[key] + '">' + 
        '<img src="images/' + key + '.png" alt="icon for' + key + '">' + '</a></li>';        
    }

    output += '</ul>';
   
        for(var i = myList.length - 1; i >= 0; i--){
        myList[i].innerHTML = output;
    };
    

}(socialMediaIcon);

<!DOCTYPE html>
<head>
    <title>Social Media Icons</title>
</head>
<body>
    
    <nav class="social-media">g</nav>
    <h1>Welcome</h1>
    
    <p> lorem ipsum delor sit amit lorem ipsum delor sit amit lorem ipsum delor sit amit
        lorem ipsum delor sit amit lorem ipsum delor sit amit lorem ipsum delor sit amitlorem ipsum delor sit amit
        lorem ipsum delor sit amit lorem ipsum delor sit amit lorem ipsum delor sit amit lorem ipsum delor sit amit
    </p>
    <nav class="social-media"></nav>
    <script src="social.js"></script>
</body>
</html>

【问题讨论】：

你有什么问题？
在这个程序中，你可以看到有一个 for 循环，其中 i--所以我的问题是，当我编写 i 代码时 - 导航中的社交媒体图标显示 2 次，但是当我编写 i++ 代码时在浏览器中显示了 1 次，即使我在 html 编辑器中放置了 2 次 nav 标签，您也可以看到上面的 html 和 javascript 代码。
它通过 socialMediaIcons 循环并创建 html（第一个 for 循环），然后将该 html 添加到每个社交媒体元素（第二个 for 循环）
顺便说一句，我不明白你的代码结构，社交将是空的......
因为你没有图片文件夹，所以我有 facebook、Twitter、whatsapp、flickr 和 .png 的图片

标签： javascript html loops for-loop for-in-loop

【解决方案1】：

这里的问题是<nav class="social-media"></nav>在这里被使用了两次。因此，当您到达代码for(var i = myList.length - 1; i >= 0; i--) 的这一点时，它开始在您定义为myList = document.querySelectorAll(".social-media"); 的代码中查找 myList 如果您仔细查看 for 循环初始化，您会发现以下内容：

for(var i = myList.length - 1; i >= 0; i--)

First Iteration:

var i = myList.length - 1 /* 1 in this case */ 

now i >= 0  sets as True 

then you will see social icons on later .social-media as index in for loop is set as 1

Second Iteration:

var i = i-- /* here value of i is set to 0 */

now i >= 0 also sets to True

then you will seel social icons on first .social-media as index in for loop is set as 0

如果你想使用 i++ 的其他方法

请将你的 for 循环初始化为：

for(var i = 0; i <myList.length; i++)

【讨论】：