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>