任务目的
- 在上一任务基础上继续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); }
案例二：
(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结构