题目

  • 参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于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. MySQL错误：2003-Can't connect to MySQL server on 'localhost'(10061 "unknown error")

    今天数据库出了一点错误之后决定重装一下,结果卡在了一个问题上,连装了5遍,加上网上各种配置教程都没能结局,错误如下图所示: 最后忽然想到会不会是因为每一次卸载的时候没有彻底卸载干净,然后就彻彻底底卸载 ...

  2. ASP.NET Core 一步步搭建个人网站（持续更新中~~~）

    摘要 ASP.NET Core2.0发布有一阵子了,这是.NET 开源跨平台的一个重大里程碑, 也意味着比1.0版本要更加成熟.目前.net core具有开源.跨平台.灵活部署.模块化架构等等特性,吸 ...

  3. spring cloud feign不支持@RequestBody+ RequestMethod.GET，报错

    1.问题梳理: 异常:org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not ...

  4. JS 函数节流和去抖

    1.什么是节流和去抖? 节流.就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不多流满一 ...

  5. Spring Boot应用 打包与部署指南

    Spring Boot的打包与部署有何特点? Java Web应用在Spring Boot之前,通常是打包成war(Web application ARchive)包,结合Tomcat来完成部署. 对 ...

  6. MySQL 性能优化的最佳20多条经验分享(二)（转）

    11. 尽可能的使用 NOT NULL 除非你有一个很特别的原因去使用 NULL 值,你应该总是让你的字段保持 NOT NULL.这看起来好像有点争议,请往下看. 首先,问问你自己"Empt ...

  7. C++反汇编第四讲,反汇编中识别继承关系,父类,子类,成员对象

    C++反汇编第四讲,反汇编中识别继承关系,父类,子类,成员对象 讲解目录: 1.各类在内存中的表现形式   备注: 主要复习开发知识,和反汇编没有关系,但是是理解反汇编的前提.     2.子类继承父 ...

  8. MySQL安装（yum、二进制、源码）

    MySQL安装(yum.二进制.源码) 目录 1.1 yum安装... 2 1.2 二进制安装-mysql-5.7.17. 3 1.2.1 准备工作... 3 1.2.2 解压.移动.授权... 3 ...

  9. 制作多级菜单hide（）与show（） toggle（）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. FastDFS教程IV-文件服务器集群搭建

    1.简介     本文主要介绍FastDFS文件服务器的集群搭建,在阅读本文之前,您需具备FastDFS文件服务器单节点安装,扩容,迁移等方面的知识.同时,您还需了解Keepalived,nginx方 ...