从2018百度前端技术学院看代码究竟应该怎么写(2)
任务描述
参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于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>实现代码
我的思路：
先将数组中满足条件的元素过滤到一个对象中，再按对象的值排序，构造字符串，生成li元素，添加,不过后看到别人直接利用二维数组直接进行排序构造觉得也挺简单的,不过本次也回顾了下对象按键值排序的方法，所以就不打算改了,下面会贴出一个更优雅10分的实现：
<script type="text/javascript">
var aqiData = [
["北京", 90],
["上海", 50],
["福州", 10],
["广州", 50],
["成都", 90],
["西安", 100]
];
var ul = document.getElementById('aqi-list');
(function () {
var obj = {};
aqiData.forEach(function(item){
if(item[1]>60){
obj[item[0]]= item[1];
}
})
var result = Object.keys(obj).sort(function(a,b){
return -(obj[a]-obj[b]);
});
for(item in result){
var index = ['一','二','三','四','五','六','七'];
var text = '第'+index[item]+'名:'+result[item]+','+obj[result[item]];
var li = document.createElement('li');
li.innerHTML = text;
ul.appendChild(li);
}
})();
</script>10分实现
为何是10分，想必大家看了代码就知道了：
<script type="text/javascript">
var aqiData = [
["北京", 90],
["上海", 50],
["福州", 10],
["广州", 90],
["成都", 50],
["西安", 100]
];
/*创建li元素*/
function creatLi(index,arr,num){
arr[index].unshift("第"+num+"名");
var childNode = document.createElement("li");
childNode.innerHTML = arr[index];
document.getElementById('aqi-list').appendChild(childNode);
}
/*数据过滤、排序*/
function dataFilter() {
/*将大于40的数据保存到fileData数组中*/
var x;
var filData = new Array();
for (x in aqiData){
if (aqiData[x][1]>40){
filData.push(aqiData[x]);
}
}
/*对filData按数值降序排列*/
filData.sort(function(x,y){
return y[1]-x[1];
});
/*考虑并列情况，记排名*/
var num = 1;
for (var i = 0; i<filData.length; i++){
if ((i !==0) && (filData[i][1] !== filData[i-1][2])){
num++;
}
/*创建li元素*/
creatLi(i,filData,num);
}
};
dataFilter()
</script>功能模块耦合程度特别低，这也给了我们一个启示，在实际编写代码时能封装抽象成一个函数的尽量抽象成函数，这样既方便理解也方便后期维护。
ES6打脸
刚准备做下一个任务,随手打开笔记区一个点赞量最高的笔记，分分钟被ES6打脸，告诉我上面内个10分是啥(黑人问号脸),于是乎分分钟又拿ES6写了一遍，不然阮老师的《ES6教程》白看了，代码如下，简洁程度大家自己看
<script type="text/javascript">
var aqiData = [
["北京", 90],
["上海", 50],
["福州", 10],
["广州", 50],
["成都", 90],
["西安", 100]
];
const ul = document.getElementById("aqi-list");
(function(){
//使用filter方法获取空气质量指数大于60的城市
const filteredCity = aqiData.filter(city => {return city[1]>60})
//使用sort方法将空气质量指数大于60的几个城市进行降序排序
const sortedCity = filteredCity.sort((a,b) => {return b[1]-a[1]})
//使用map方法对排好序的数组添加相应格式和相关文字，名次顺序可以使用数组的indexOf方法获得；
const mapedCity = filteredCity.map(city => {return `<li>第${filteredCity.indexOf(city)+1}名:${city[0]},${city[1]}</li>`})
//使用forEach方法将数组元素遍历添加到<ul>的innerHTML中
mapedCity.forEach(city => ul.innerHTML+=city)
})();
</script>模板字符串
写到这突然发现我对ES6的模板字符串还不是很熟悉，在此补充一下吧：MDN文档
ps:待标签的模板字符串还不太懂，稍后弄清了补充