任务十四：零基础JavaScript编码（二）

时间：2023-02-13 14:07:37

任务目的

  • 在上一任务基础上继续JavaScript的体验
  • 学习JavaScript中的if判断语法，for循环语法
  • 学习JavaScript中的数组对象
  • 学习如何读取、处理数据，并动态创建、修改DOM中的内容

 

任务描述

  • 参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于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>

任务注意事项

  • 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 其中的数据以及60的判断逻辑可以自行设定
  • 建议不使用任何第三方库、框架
  • 示例代码仅为示例，可以直接使用，也可以完全自己重写

 

 

任务完成及总结：

 实现思路：首先将符合条件的城市刷选出来，然后进行排序，最后将结果输出，下面请看相关案例。

案例一：

(function () {
//选出空气质量指数大于60的城市
var sortCount = aqiData.filter(function(item){
return (item[1] > 60);
    });
//对大于60的城市进行从大到小排序
    sortCount.sort(function(a, b){
return b[1] - a[1];
    });
var aqiList = document.getElementById('aqi-list');
//将结果显示
for(var i = 0; i < sortCount.length; i++){
         aqiList.innerHTML += '<li>第' + (i + 1) + '名：' + sortCount[i][0] + '(样例) , ' + sortCount[i][1] + '</li>';
            }            
})();

利用filter函数将符合相关条件的城市选出来，同时把所有刷选出的数据存储在新数组中。更多详情请戳JS中filter（）方法。接着根据新数组的第二个数值进行从大到小的排序，更多sort（）知识请戳JS中sort（）方法。其中还能继续优化，把innerHTML替换为createTextNode（），如：

for(var i = 0; i < sortCount.length; i++){
//aqiList.innerHTML += '<li>第' + (i + 1) + '名：' + sortCount[i][0] + '(样例) , ' + sortCount[i][1] + '</li>';
var li = document.createElement("li");
    li.appendChild(document.createTextNode("第"+(i+1)+"名："+sortCount[i][0]+","+sortCount[i][1]));
    aqiList.appendChild(li);
 }

 demo演示

 

案例二：

(function () {
var oList = document.getElementById("aqi-list");
var arr = ["一","二","三","四","五"];
//sort 从大到小
     aqiData.sort(function(a,b){
return b[1]-a[1];
     });
     oList.innerHTML = "";
for(var i=0;i<aqiData.length;i++){

if(aqiData[i][1]>60){
　　　　　　//创建一个节点          var oLi = document.createElement("li");
          oLi.innerHTML = '第'+arr[i]+'名：'+aqiData[i][0]+','+aqiData[i][1];
　　　　　　//向节点oList添加子节点oLi          oList.appendChild(oLi);
        }
     }
})();

思路大同小异，只是在运算速度上要比案例一要慢，原因是含有双重循环，并且环内appendChild重排会引起性能下降。更多详情请戳JS中appendChild（）方法。

 

案例三：

(function () { 
var chineseNumbers = ["一","二","三","四","五","六","七","八","九","十"];

var contentStr = "";
  aqiData.filter(function(element){return element[1] > 60;})
         .sort(function (d1,d2){ return d2[1] - d1[1]; })
         .forEach(function (element,index){
    contentStr += "<li>第" + chineseNumbers[index] + "名：" + element[0] + "，" + element[1] + "</li>";    
  });

  document.getElementById("aqi-list").innerHTML = contentStr;

})();

该案例别样的使用了链式调用，以及使用了ES5新增的array.forEach方法来代替for循环遍历处理数组元素，并使用了element.innerHTML属性一次性改变元素的DOM结构

标签：

相关文章