以百度前端技术学院的js任务三为例，复习一下关于js数组的几个点
题目
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>
<ul id="source">
<li>北京空气质量：<b>90</b></li>
<li>上海空气质量：<b>70</b></li>
<li>天津空气质量：<b>80</b></li>
<li>广州空气质量：<b>50</b></li>
<li>深圳空气质量：<b>40</b></li>
<li>福州空气质量：<b>32</b></li>
<li>成都空气质量：<b>90</b></li>
</ul>
<ul id="resort">
<!--
<li>第一名：北京空气质量：<b>90</b></li>
<li>第二名：北京空气质量：<b>90</b></li>
<li>第三名：北京空气质量：<b>90</b></li>
-->
</ul>
<button id="sort-btn">排序</button>
<script type="text/javascript">
/**
* getData方法
* 读取id为source的列表，获取其中城市名字及城市对应的空气质量
* 返回一个数组，格式见函数中示例
*/
function getData() {
/*
coding here
*/
/*
data = [
["北京", 90],
["北京", 90]
……
]
*/
return data;
}
/**
* sortAqiData
* 按空气质量对data进行从小到大的排序
* 返回一个排序后的数组
*/
function sortAqiData(data) {
}
/**
* render
* 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
* 格式见ul中的注释的部分
*/
function render(data) {
}
function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);
}
function init() {
// 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
}
init();
</script>
</body>
</html>
我的代码
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>
<ul id="source">
<li>北京空气质量：<b>90</b></li>
<li>上海空气质量：<b>70</b></li>
<li>天津空气质量：<b>80</b></li>
<li>广州空气质量：<b>50</b></li>
<li>深圳空气质量：<b>40</b></li>
<li>福州空气质量：<b>32</b></li>
<li>成都空气质量：<b>90</b></li>
</ul>
<ul id="resort">
<!--
<li>第一名：北京空气质量：<b>90</b></li>
<li>第二名：北京空气质量：<b>90</b></li>
<li>第三名：北京空气质量：<b>90</b></li>
-->
</ul>
<button id="sort-btn">排序</button>
<script type="text/javascript">
/**
* getData方法
* 读取id为source的列表，获取其中城市名字及城市对应的空气质量
* 返回一个数组，格式见函数中示例
*/
window.onload = function() {
var source = document.getElementById('source');
var source_li = source.getElementsByTagName('li');
var resort = document.getElementById('resort');
var bn = document.getElementsByTagName('button')[0];
//定义data数组，定义的位置很重要
var data = [];
//str一定要等于空字符串，不然的话第一个数据就会是undfined
var str='';
var n=0;
function getData() {
for (var i = 0; i < source_li.length; i++) {
var arr = source_li[i].innerHTML;
var Arr = [];//如果是在for循环外定义的这个数组，那生成的将会是一个一维数组，非二维
Arr.push(arr.slice(0,2));//数组的slice方法，复制数组的0到2位
Arr.push(arr.slice(10,12));
data.push(Arr);//这个返回的不直接是一个直观的Data二维数组，但他其实是对的。我在这里因为没有直观的看到data数组而踩了很多坑
};
return data;
}
function sortAqiData(data) {
data.sort(function(a,b){
return a[1] - b[1];//因为data数组的第2位才是数字，所以要选到第二位再进行比较
});
return data;
}
function render(data) {
for (var i = 0; i < source_li.length; i++) {
n++;
str += '<li>第'+n+'名：'+data[i][0]+'-'+data[i][1]+'</li>';
resort.innerHTML= str;
}
}
function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);
}
function init() {
bn.onclick = function(){
btnHandle();
bn.disabled="disabled";
}
// 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
}
init();
}
</script>
</body>
</html>
取出文本
方法一：
source.getElementsByTagName('li')[i].innerHTML
这种方法会将整个
方法二：
source.getElementsByTagName('li')[i].innerText
这种方法只会取出
方法三
source.getElementsByTagName('li')[i].childNodes[1]
是第二个节点，childNodes[1]就是获取这个节点里的内容
生成数组
数组的slice方法
slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,end)
| 参数 | 描述 |
|---|---|
| start | 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。 |
| end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。 |
数组的push方法
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
arrayObject.push(newelement1,newelement2,....,newelementX)
生成二维数组
我在这里踩了很多坑，后来发现，要把数组放在for循环里面定义，然后在for循环里用两次slice方法，这样就会是循环一次加入一组数据，而不是循环一次加入一个数据。
存在的问题，事件绑定
我原来的想法是给按钮绑定两个事件“排序”和“收起”，用addEventListener（）方法；
bn.addEventListener('click',f1);//排序
bn.addEventListener('click',f2);//清空列表
可是我发现点一次两个事件就都执行了，就照成整个效果不变。