选自百度前端学院 任务十四:零基础JavaScript编码(二)

学习目的 {.h2c}

学习任务 {.h2c}

参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于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>

任务分析 {.h2c}

初看题目,主要是两个方面的问题:一个是读取列表并过滤排序;另一个是将合适数据数据显示在<ul id="aqi-list"></ul>里。

过滤和排序

JS数组过滤可以用Array filter() 方法。题目要求是空气质量指数大于60的城市,所以fitlter()方法如下:

aqiData.filter(function(value){
      return value[1]>60;
  })

数组排序可以使用简单的冒泡排序,为了简化代码,可以用JavaScript sort() 方法。题目要求是从高到低,所以sort()所用里用的函数应该是return b[1]-a[1];

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

获取 DOM 元素对象并设置元素的内容

获取DOM元素对象的方法有多样,常用的有getElementById()getElementsByName()getElementsByTagName()

任务结果和代码 {.h2c}

污染城市列表

本文由 小TiD笔记 发布在小TiD笔记,转载此文请保持文章完整性,并请附上文章来源(小TiD笔记)及本页链接。

原文链接: https://www.tidnotes.ga/2019/08/javascript%e7%ac%94%e8%ae%b0%e4%b8%80-%e5%8a%a8%e6%80%81%e6%b7%bb%e5%8a%a0%e5%86%85%e5%ae%b9.html