js创建dom节点+数组排序

<!DOCTYPE html>
<html>

<head>
    <title>创建dom</title>
</head>

<body>
    <ul>
    </ul>
    <script type="text/javascript">
    var aqiData = [
        ["北京", 90],
        ["上海", 50],
        ["福州", 10],
        ["广州", 50],
        ["成都", 90],
        ["西安", 100]
    ];
    aqiData.sort(function (a,b){    //1
      return a[1] - b[1];   //2
    });
    console.log(aqiData);
    (function () {
      var nodeUl = document.getElementsByTagName("ul")[0];   
      for (var i = 0; i < aqiData.length; i++) {    
        var nodeLi = document.createElement("li");    //3
        nodeLi.innerHTML = "第"+(i+1)+"名:"+ aqiData[i];    //4
        nodeUl.appendChild(nodeLi);   //5
      };
    })();

    </script>
</body>

</html>

页面加载后，将提供的空气质量数据数组，按照某种逻辑进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示，本文是按照空气质量从小到大排序。

//1　　数组的sort方法接受一个参数，非必要，此参数必须是一个函数，这个函数会被sort调用。

//2　　sort应该是通过冒泡算法来进行比较，所以我们可以看成只有2个数进行比较，本文是依照每个城市的空气指数排序的，所以就 return a[1] - b[1]；如果返回值大于0，a就放在b前面，小于0，则反之，2个数排序本就只有2种状态，多个数也是一个模式，sort内部的实现应该也是如此了。

//3　　js用document.createElement("标签名")这种方式创建新节点的；

//4　　添加内容进去；

//5　　nodeA.appendChild(nodeB)；

posted on 2018-03-30 02:02 漏三刀阅读(306) 评论(0) 编辑收藏举报