JS任务三:零基础JavaScript编码(三)

Lesson

Reference

Demo

Note

数组对象遍历、读写、排序等操作

  • 遍历
    Element.children和Element.childNodes都是子元素
    childNodes会把多余的空格或回车统计进去

  • 插入
    数组的尾部插入使用push,Node节点的内部插入使用append。

  • 排序
    采取sort方法。
    但因为sort默认按照字符串排序,所以应该让sort方法按照自定义方式排序。
    函数中如果返回值大于零则a排在b后面。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    [10111, 1101, 111].sort(function (a, b) {
    return a - b;
    })
    // [111, 1101, 10111]

    function sortAqiData(data) {
    return data.sort(function(a,b){
    return a[1] - b[1];
    })
    }
    //本例中需要用到二维数组的第二个数据

字符串处理操作

  • slice()
    slice方法用于从原字符串取出子字符串并返回,不改变原字符串。
    它的第一个参数是子字符串的开始位置,第二个参数是子字符串的结束位置(不含该位置)。
    ‘JavaScript’.slice(0, 4) // “Java”

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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]
……
]
*/

var data = new Array;
var source = document.getElementById('source');
for( var i = 0; i<source.children.length; i++){
var city = source.children[i].innerText.slice(0,2);
var number = source.children[i].children[0].innerText;
var dataEach = new Array;
dataEach.push(city);
dataEach.push(number);
data.push(dataEach);
}

return data;

}

/**
* sortAqiData
* 按空气质量对data进行从小到大的排序
* 返回一个排序后的数组
*/

function sortAqiData(data) {
return data.sort(function(a,b){
return a[1] - b[1];
})
}

/**
* render
* 将排好序的城市及空气质量指数,输出显示到id位resort的列表中
* 格式见ul中的注释的部分
*/

function render(data) {
var resort = document.getElementById('resort');
var cnNo = ['一','二','三','四','五','六','七','八','九'];
for (var i=0;i<data.length;i++){
var city = data[i][0];
var number = data[i][1];
var newli = document.createElement('li');
var text = document.createTextNode('第'+cnNo[i]+'名:'+city+'空气质量:');
var newb = document.createElement('b');
var textb = document.createTextNode(number);
newb.append(textb);
newli.append(text);
newli.append(newb);
resort.append(newli);
}
}

function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);
}

function init() {

// 在这下面给sort-btn绑定一个点击事件,点击时触发btnHandle函数

}

init();

</script>

</body>
</html>