任务目的

  • 在上一任务基础上继续JavaScript的体验
  • 学习JavaScript中的if判断语法，for循环语法
  • 学习JavaScript中的数组对象
  • 学习如何读取、处理数据，并动态创建、修改DOM中的内容

任务描述

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

任务注意事项

  • 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 其中的数据以及60的判断逻辑可以自行设定
  • 建议不使用任何第三方库、框架
  • 示例代码仅为示例，可以直接使用，也可以完全自己重写

任务完成及总结：

实现思路：首先将符合条件的城市刷选出来，然后进行排序，最后将结果输出，下面请看相关案例。

案例一：

(function () {

     //选出空气质量指数大于60的城市

    var sortCount = aqiData.filter(function(item){

         return (item[1] > 60);

    });

    //对大于60的城市进行从大到小排序

    sortCount.sort(function(a, b){

         return b[1] - a[1];

    });

     var aqiList = document.getElementById('aqi-list');

    //将结果显示

    for(var i = 0; i < sortCount.length; i++){

         aqiList.innerHTML += '<li>第' + (i + 1) + '名：' + sortCount[i][0] + '(样例) , ' + sortCount[i][1] + '</li>';

            }

})();

利用filter函数将符合相关条件的城市选出来，同时把所有刷选出的数据存储在新数组中。更多详情请戳JS中filter（）方法。接着根据新数组的第二个数值进行从大到小的排序，更多sort（）知识请戳JS中sort（）方法。其中还能继续优化，把innerHTML替换为createTextNode（），如：

for(var i = ; i < sortCount.length; i++){

    //aqiList.innerHTML += '<li>第' + (i + 1) + '名：' + sortCount[i][0] + '(样例) , ' + sortCount[i][1] + '</li>';

    var li = document.createElement("li");

    li.appendChild(document.createTextNode("第"+(i+)+"名："+sortCount[i][]+","+sortCount[i][]));

    aqiList.appendChild(li);

 }

demo演示

案例二：

(function () {

     var oList = document.getElementById("aqi-list");

     var arr = ["一","二","三","四","五"];

     //sort 从大到小

     aqiData.sort(function(a,b){

       return b[]-a[];

     });

     oList.innerHTML = "";

     for(var i=;i<aqiData.length;i++){

       if(aqiData[i][]>){
　　　　　　//创建一个节点

          var oLi = document.createElement("li");

          oLi.innerHTML = '第'+arr[i]+'名：'+aqiData[i][]+','+aqiData[i][];
　　　　　　//向节点oList添加子节点oLi

          oList.appendChild(oLi);

        }

     }

})();

思路大同小异，只是在运算速度上要比案例一要慢，原因是含有双重循环，并且环内appendChild重排会引起性能下降。更多详情请戳JS中appendChild（）方法。

案例三：

(function () {

  var chineseNumbers = ["一","二","三","四","五","六","七","八","九","十"];

  var contentStr = "";

  aqiData.filter(function(element){return element[] > ;})

         .sort(function (d1,d2){ return d2[] - d1[]; })

         .forEach(function (element,index){

    contentStr += "<li>第" + chineseNumbers[index] + "名：" + element[] + "，" + element[] + "</li>";

  });

  document.getElementById("aqi-list").innerHTML = contentStr;

})();

该案例别样的使用了链式调用，以及使用了ES5新增的array.forEach方法来代替for循环遍历处理数组元素，并使用了element.innerHTML属性一次性改变元素的DOM结构

任务十四：零基础JavaScript编码（二）的更多相关文章

  1. 零基础JavaScript编码（二）

    任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...

  2. 零基础JavaScript编码（三）总结

    任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...

  3. 零基础JavaScript编码（一）

    任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...

  4. 任务十六：零基础JavaScript编码（四）

    任务目的 在上一任务基础上继续JavaScript的体验 深入学习JavaScript的事件机制及DOM操作 学习事件代理机制 学习简单的表单验证功能 学习外部加载JavaScript文件 任务描述 ...

  5. 任务十五：零基础JavaScript编码（三）

    任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历.读写.排序等操作 学习简单的字符串处理操作 任务描述 参 ...

  6. 任务十七：零基础JavaScript编码（五）

    任务目的 在上一任务基础上继续JavaScript的体验 接触更加复杂的表单对象 实现页面上的一个完整交互功能 用DOM实现一个柱状图图表 任务描述 参考以下示例代码,原始数据包含几个城市的空气质量指 ...

  7. 任务十三：零基础JavaScript编码（一）

    任务目的 JavaScript初体验 初步明白JavaScript的简单基本语法,如变量.函数 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 参考以 ...

  8. 二十四. Python基础(24)--封装

    二十四. Python基础(24)--封装 ● 知识结构   ● 类属性和__slots__属性 class Student(object):     grade = 3 # 也可以写在__slots ...

  9. IM开发者的零基础通信技术入门(二)：通信交换技术的百年发展史(下)

    1.系列文章引言 1.1 适合谁来阅读? 本系列文章尽量使用最浅显易懂的文字.图片来组织内容,力求通信技术零基础的人群也能看懂.但个人建议,至少稍微了解过网络通信方面的知识后再看,会更有收获.如果您大 ...

随机推荐

  1. 使用python requests库写接口自动化测试--记录学习过程中遇到的坑（1）

    一直听说python requests库对于接口自动化测试特别合适,但由于自身代码基础薄弱,一直没有实践: 这次赶上公司项目需要,同事小伙伴们一起学习写接口自动化脚本,听起来特别给力,赶紧实践一把: ...

  2. 使用vmtools来设置windows和linux的共享文件夹

    目的:通过vmtools来实现windows和linux的共享文件夹 步骤: 1.前提条件是vmtools已经安装 2.在windows任意磁盘新建一个共享文件夹 3.进入虚拟机->设置-> ...

  3. Oracle Net Configuration(监听程序和网络服务配置)

    1.在Oracle服务端和客户端都安装完之后,就需要配置监听程序和本地网络服务,以便外部程序和工具的访问,所以Oracle提供了两款自带的工具来配置它们分别是 Net Configuration.Ne ...

  4. Centos 7网卡设置

    #yum install net-tools.x86_64 #cd /etc/sysconfig/network-scripts/ #mv ifcfg-eno16780032 ifcfg-eth0 手 ...

  5. EasyNetQ自定义异常消息处理

    20140310补充: rabbitmq有requeue属性,可以选择消息是否返回队列,另,本文的解决方式非常之山寨,只能应用于发送和接收方式. 这几天在折腾消息队列,在.Net环境下有基于Rabbi ...

  6. c#随便写写 数据层和表现层，队列执行

    base.xxx() 调用父类的方法

  7. 2-3 树/红黑树（red-black tree）

    2-3 tree 2-3树节点: null节点,null节点到根节点的距离都是相同的,所以2-3数是平衡树 2叉节点,有两个分树,节点中有一个元素,左树元素更小,右树元素节点更大 3叉节点,有三个子树 ...

  8. poj 1595 Prime Cuts

    Prime Cuts Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 10610   Accepted: 4046 Descr ...

  9. 万物智联，腾讯云 IoT 边缘计算揭秘——云+未来峰会开发者专场回顾

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:现在是万物互联的时代,智能穿戴设备,智能家居,无人商业,改变了我们的生活方式.预计到2021年,全球物联网设数将达到150亿,超过手机 ...

  10. Hibernate 一对一映射(惟一外键)