题目

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

  • 第一步用for循环获取数据

  • 将数字数据添加到一个新数组

  • 筛选数据进行判断

  • 对新数组用sort()方法进行排序

  • 将结果添加到html中

<!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],

  ["重庆",80]

];

function sortNumber(a,b)

{

return b-a;

}

(function () {

  var arr = new Array();

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

  var str = '';

  var n=0;

  //用for循环获取数据

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

    //将数字数据添加到一个新数组

    if(aqiData[i][1]>60) {

      arr.push(aqiData[i][1]);

    }

  }

  arr.sort(sortNumber);

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

    n++;

    str += '<li>第'+n+'名：'+aqiData[i][0]+'，'+arr[i]+'</li>';

    ul.innerHTML= str;

  }

})();

</script>

</body>

</html>

JS中的sort方法

sort() 方法用于对数组的元素进行排序。

arrayObject.sort(sortby)
返回值

对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

说明

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

  • 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
  • 若 a 等于 b，则返回 0。
  • 若 a 大于 b，则返回一个大于 0 的值。

如果不使用函数，则按照字母表的顺序排序

<script type="text/javascript">

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

document.write(arr + "<br />")//10,5,40,25,1000,1

document.write(arr.sort())//1,10,1000,25,40,5

</script>

如果需要对数字的大小排序就要创建一个函数

<script type="text/javascript">

function sortNumber(a,b)

{

return a - b

}

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

document.write(arr + "<br />")

document.write(arr.sort(sortNumber))

//10,5,40,25,1000,1

//1,5,10,25,40,1000

</script>

用js筛选数据排序的更多相关文章

  1. （六）Net Core项目使用Controller之一 c# log4net 不输出日志 .NET Standard库引用导致的FileNotFoundException探究 获取json串里的某个属性值 common.js 如何调用common.js js 筛选数据 Join 具体用法

    (六)Net Core项目使用Controller之一 一.简介 1.当前最流行的开发模式是前后端分离,Controller作为后端的核心输出,是开发人员使用最多的技术点. 2.个人所在的团队已经选择 ...

  2. js 筛选数据

    <input type="text" id="filterName"> <div class="scope fr"> ...

  3. 【转载】使用Pandas对数据进行筛选和排序

    使用Pandas对数据进行筛选和排序 本文转载自:蓝鲸的网站分析笔记 原文链接:使用Pandas对数据进行筛选和排序 目录: sort() 对单列数据进行排序 对多列数据进行排序 获取金额最小前10项 ...

  4. 开始VS 2012中LightSwitch系列的第4部分：太多信息了！使用查询来排序和筛选数据

    [原文发表地址]  Beginning LightSwitch in VS 2012 Part 4: Too much information! Sorting and Filtering Data ...

  5. PourOver – 快速筛选和排序大的数据集合

    PourOver 是一个用于对大数据集合进行快速过滤的 JavaScript 库.它可以在60fps下运行,允许您构建数据研究应用和档案,即不必等待一个数据库调用来呈现查询结果. PourOver 基 ...

  6. Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记

    入职以后的第二个任务  根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...

  7. 腾讯面试题,js处理1千万条数据排序并且页面不卡顿

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 1、如何在列表，字典，集合种根据条件筛选数据？2、如何为元组中的每个元素命名，提高程序的可读性3、如何统计出序列中元素出现的频度4、如何根据字典中value的大小，对字典的key进行排序

    一.数据筛选: 处理方式: 1.filter函数在py3,返回的是个生成式. from random import randint data = [randint(-100,100) for i in ...

  9. c#数据筛选和排序

    一.TreeView SelectedNode    选中的节点            Level    节点的深度(从0开始)                AfterSelect    节点选中后 ...

随机推荐

  1. WCF、WebAPI、WCFREST、WebService之间的区别和选择

    转载翻译,原文:http://www.dotnet-tricks.com/Tutorial/webapi/JI2X050413-Difference-between-WCF-and-Web-API-a ...

  2. sublime3配置php环境

    最后的演示效果: 1. 按照sublime3开始前的准备工作 Ctrl+Shift+P,再输入install ,最后再输入想要安装的软件 (输入install会有几十秒的延迟,请不要重复操作) 配置p ...

  3. Dashboard集群

    #Dashboard集群 openstack pike 部署 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##.Dashboard集群 #####在 ...

  4. 03.redis与ssm整合（mybatis二级缓存）

    SSM+redis整合 ssm框架之前已经搭建过了,这里不再做代码复制工作. 这里主要是利用redis去做mybatis的二级缓存,mybaits映射文件中所有的select都会刷新已有缓存,如果不存 ...

  5. 《Linux命令行与shell脚本编程大全》第二十五章 创建与数据库、web及电子邮件相关的脚本

    25.1 MySQL数据库 /* 但是我在虚拟机上安装的时候居然不提示输入密码. 这个可以参考http://blog.csdn.net/sinat_21302587/article/details/7 ...

  6. Java基础(二)-static关键字分析

    static关键字是我们在编程中经常会使用到的,但有些可能只知其然而不知其所以然.下面介绍static关键字的作用再通过例子结合说明. static关键字共有五种作用(先说明static所修饰的不会改 ...

  7. git学习资料包

    1.廖雪峰老师的git教程:https://www.liaoxuefeng.com    -----点击“GIT教程”开始学习 2.菜鸟教程git学习:http://www.runoob.com/gi ...

  8. c# textbox的滚动条总是指向最底端

    当我第一次添加滚动条时候,我发现滚动条总是跑向上方,经过研究 解决方案如下: this.textBox1.Focus(); 获取焦点 this.textBox1.Select(this.textBox ...

  9. VantPy自动化测试框架

    1.必须要谈的一点,就是我们学习自动测试不是用来炫耀的,而是用来提升自身能力的. 2.这个框架不是通用框架,只是在这里灌输这个框架的思想,让每个人写框架都易如反掌 3.如果没有python基础的同学, ...

  10. Android IntentService的使用和源码分析

    引言 Service服务是Android四大组件之一,在Android中有着举足重轻的作用.Service服务是工作的UI线程中,当你的应用需要下载一个文件或者播放音乐等长期处于后台工作而有没有UI界 ...