题目

  • 参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于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. Tarjan算法：求解图的割点与桥（割边）

    简介: 割边和割点的定义仅限于无向图中.我们可以通过定义以蛮力方式求解出无向图的所有割点和割边,但这样的求解方式效率低.Tarjan提出了一种快速求解的方式,通过一次DFS就求解出图中所有的割点和割边 ...

  2. pymysql 模块介绍

    pymysql模块是python与mysql进行交互的一个模块. pymysql模块的安装: pymysql模块的用法: import pymysql user=input('user>> ...

  3. 备忘录模式（Memento）

    备忘录模式(Memento) 主要目的是保存一个对象的某个状态,以便在适当的时候恢复对象,个人觉得叫备份模式更形象些,通俗的讲下:假设有原始类A,A中有各种属性,A可以决定需要备份的属性,备忘录类B是 ...

  4. uva11636-Hello World!

    题意:已知有一行printf(“Hello World!”\n);以后就可以复制,问多少次之后就可以达到所需要的行数. 题解:模拟: #include<iostream> #include ...

  5. 实践作业2：黑盒测试实践——编写自动化脚本并拍摄测试过程视频 Day 6

    下午下课之后小组成员一起交流了一下实验过程遇到的一些问题,并汇总了下各个项目完成情况 该实验目前(写博客是时间)基本完成,具体情况如下 (1)分析系统需求 .(done) (2)设计测试用例.(don ...

  6. mysql读写分离的操作动作依据（读写分离基本依据）

    读的操作: 1.select 2.show 3.explain explain显示了MySQL如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. 4.desc ...

  7. spring aop 动态代理批量调用方法实例

    今天项目经理发下任务,需要测试 20 个接口,看看推送和接收数据是否正常.因为对接传输的数据是 xml 格式的字符串,所以我拿现成的数据,先生成推送过去的数据并存储到文本,以便验证数据是否正确,这时候 ...

  8. windows 怎样查看port占用情况

    開始--执行--cmd 进入命令提示符 输入netstat -ano 就可以看到全部连接的PID 之后在任务管理器中找到这个PID所相应的程序假设任务管理器中没有PID这一项,能够在任务管理器中选&q ...

  9. Codeforces Round #261 (Div. 2)459D. Pashmak and Parmida&#39;s problem（求逆序数对）

    题目链接:http://codeforces.com/contest/459/problem/D D. Pashmak and Parmida's problem time limit per tes ...

  10. VMWare 虚拟化 Ubuntu 64 （16.04）-- docker 无法链接 pull 镜像 ？(solved)

    背景 根据项目的需要,虚拟化一个Ubuntu OS 来玩 docker,虚拟机选择的是WMWare (VMware-player-14.0.0-6661328); Ubuntu的镜像来自于官网(ubu ...