题目

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

    # AutoMapper在asp.netcore中的使用  automapper 是.net 项目中针对模型之间转换映射的一个很好用的工具,不仅提高了开发的效率还使代码更加简洁,当然也是开源的,htt ...

  2. 高性能、高可用、高扩展ERP系统架构设计

    ERP之痛 曾几何时,我混迹于电商.珠宝行业4年多,为这两个行业开发过两套大型业务系统(ERP).作为一个ERP系统,系统主要功能模块无非是订单管理.商品管理.生产采购.仓库管理.物流管理.财务管理等 ...

  3. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  4. Uncaught TypeError: download is not a function at HTMLAnchorElement.onclick (index.html:25)

    前段时间调试html报了这样的一个错误 Uncaught TypeError: download is not a function     at HTMLAnchorElement.onclick ...

  5. CMMI-4中19个PA的大致描述

    组织过程资产库下面有组织级标准过程库, 这个库里一共有19各PA(就是标准过程啦) PA的英文是Process Area       CM(配置管理过程,英文是Configuration Manage ...

  6. MYSQL常见运算符和函数

    字符函数 (1)CONCAT():字符连接 SELECT CONCAT('IMOOC','-','MySQL');//IMOOC-MySQL SELECT CONCAT (first_name,las ...

  7. python学习之路day2

    模块学习: 标准库: os: 第三方库:

  8. YiShop_最全微信营销涨粉技巧

    在我们开始推广企业订阅号之前,我们必须思考微信营销策略,客户通过微信可以获得什么?企业通过微信可以得到什么?微分销专家建议企业微信定位为互动.服务工具,因为获取一个粉丝很难,可是失去一个粉丝,却是一件 ...

  9. Okio 之初探黄龙

    Okio 是一个包装了 java.io 和 java.nio api 的库,以便可以更容易的访问.存储以及处理数据. ByteStrings 和 Buffers Okio 是围绕着两个容器类构建起来的 ...

  10. [亲测]ASP.NET Core 2.0怎么发布/部署到Ubuntu Linux服务器并配置Nginx反向代理实现域名访问

    前言 ASP.NET Core 2.0 怎么发布到Ubuntu服务器?又如何在服务器上配置使用ASP.NET Core网站绑定到指定的域名,让外网用户可以访问呢? 步骤 第1步:准备工作 一台Liun ...