JS学习（一）

最新推荐文章于 2023-03-10 15:52:25 发布

Candy链上笔记

最新推荐文章于 2023-03-10 15:52:25 发布

阅读量878

点赞数 1

文章标签： filter 前端

本文链接：https://blog.csdn.net/koudan567/article/details/51483391

版权

百度前端技术学院上有这么一个小练习，作为一个菜鸟，写完之后，对filter和sort有了更深刻的认识。

任务是这样描述的：参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <h3>污染城市列表</h3>
  <ul id="aqi-list">
<!--   
    <li>第一名：福州（样例），10</li>
    <li>第二名：福州（样例），10</li> -->
  </ul>

<script type="text/javascript">

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["广州", 50],
  ["成都", 90],
  ["西安", 100]
];

(function () {

  /*
  在注释下方编写代码
  遍历读取aqiData中各个城市的数据
  将空气质量指数大于60的城市显示到aqi-list的列表中
  */

})();

</script>
</body>
</html>

我们其实要实现的就是function函数。在这道题中我使用了filter，开始用if判断，后来想起filter,就直接使用了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
</head>
<body>
<h3>污染城市列表</h3>
<ul id="aqi-list">
</ul>
<script type="text/javascript">
    var aqiData = [
        ["北京", 90],
        ["上海", 50],
        ["福州", 10],
        ["广州", 50],
        ["成都", 90],
        ["西安", 100]
    ];
    (function () {
        var arr =["一","二","三","四","五","六"];
        var BSixty = aqiData.filter(function (x) {
                return x[1] > 60;
        });
        var BSixty = BSixty.sort(function (x,y) {
            return y[1] - x[1];
        })
        for(var i=0;i<BSixty.length;i++){
            var newNode = document.getElementById('aqi-list');
            var newLi=document.createElement('li');
            newNode.appendChild(newLi);
            newLi.innerHTML = "第"+arr[i]+"名: "+BSixty[i];
        }
    })();
</script>
</body>
</html>

因为aqiData是二维数组，所以BSixty = aqiData.filter(function (x) {return x[1] > 60;}）即使用X数组的第二个元素判断，其大于60，就返回。
同样sort是对数组进行排序，我们是要降序输出，所以var BSixty = BSixty.sort(function (x,y) { return y[1] - x[1];})
输出的实现就如下：