题目

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

    一.Java开发平台 JavaSE  标准版 Java应用程序 application  五子棋.计算器.qq JavaEE  企业版  Java企业级应用 JavaME 微型版  小型设备    A ...

  2. java+jsp+sql server实现网页版四则运算.

    设计思路: 1需要的工具以及实现这个算法和代码的事先条件. (1)sql server里面建议一个叫t_result的表)(当然你起什么名字都可以),里面输入所需要的列名.id,firstnumber ...

  3. Java IO（2）阻塞式输入输出（BIO）的字节流与字符流

    在上文中<Java IO(1)基础知识——字节与字符>了解到了什么是字节和字符,主要是为了对Java IO中有关字节流和字符流有一个更好的了解. 本文所述的输出输出指的是Java中传统的I ...

  4. SpringMVC集成Shiro、读取数据库操作权限

    1.Maven添加Shiro所需的jar包 <dependency> <groupId>org.apache.shiro</groupId> <artifac ...

  5. IntelliJ IDEA（二） ：面板介绍

    一.面板说明 IDEA面板的全貌如下图 二.菜单栏 下面会简单介绍下一些常用的部分菜单使用,如有疑问或补充欢迎留言. (1).File文件 1. New:新建一个工程 可以新建project,导入已存 ...

  6. php XSS安全过滤代码

    function remove_xss($val) { // remove all non-printable characters. CR(0a) and LF(0b) and TAB(9) are ...

  7. 【垃圾回收】Java内存回收实践经验 防止内存报警

    jdk6和7服务器端(-server) 默认的新生代的垃圾回收器为:PS Scavenge,老年代默认的垃圾回收器为:PS MarkSweep 目前项目使用了jdk7,tomcat7,经常出现内存堆使 ...

  8. 76、django之内置Admin

    本篇导航: 配置路由 定制Admin Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contrib.auth django ...

  9. flask_login 整合 pyjwt + json 简易flask框架

    现在很多框架都实现前后端分离,主要为了适应以下几个目的: 1,前后端的分离,可以使前端开发和后端开发更加分工明确,而不是后端还需要在视图模板中加入很多{% XXXX %}标签 2,是为了适应跨域调用或 ...

  10. 在应用中更新App版本号

    在应用中, 为了提高用户体验, 会提供更新版本号的功能. 那么怎样实现呢? 我写了一个简单的Demo, 说明一下, 须要注意几个细节. 使用了Retrofit和Rx处理网络请求. Github下载地址 ...