使命形貌
参考以下示例代码，页面加载后，将供应的空气质量数据数组，根据某种逻辑（比方空气质量大于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:待标签的模板字符串还不太懂，稍后弄清了补充
