用js筛选数据排序
题目
- 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于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筛选数据排序的更多相关文章
- (六)Net Core项目使用Controller之一 c# log4net 不输出日志 .NET Standard库引用导致的FileNotFoundException探究 获取json串里的某个属性值 common.js 如何调用common.js js 筛选数据 Join 具体用法
(六)Net Core项目使用Controller之一 一.简介 1.当前最流行的开发模式是前后端分离,Controller作为后端的核心输出,是开发人员使用最多的技术点. 2.个人所在的团队已经选择 ...
- js 筛选数据
<input type="text" id="filterName"> <div class="scope fr"> ...
- 【转载】使用Pandas对数据进行筛选和排序
使用Pandas对数据进行筛选和排序 本文转载自:蓝鲸的网站分析笔记 原文链接:使用Pandas对数据进行筛选和排序 目录: sort() 对单列数据进行排序 对多列数据进行排序 获取金额最小前10项 ...
- 开始VS 2012中LightSwitch系列的第4部分:太多信息了!使用查询来排序和筛选数据
[原文发表地址] Beginning LightSwitch in VS 2012 Part 4: Too much information! Sorting and Filtering Data ...
- PourOver – 快速筛选和排序大的数据集合
PourOver 是一个用于对大数据集合进行快速过滤的 JavaScript 库.它可以在60fps下运行,允许您构建数据研究应用和档案,即不必等待一个数据库调用来呈现查询结果. PourOver 基 ...
- Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记
入职以后的第二个任务 根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...
- 腾讯面试题,js处理1千万条数据排序并且页面不卡顿
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 1、如何在列表,字典,集合种根据条件筛选数据?2、如何为元组中的每个元素命名,提高程序的可读性3、如何统计出序列中元素出现的频度4、如何根据字典中value的大小,对字典的key进行排序
一.数据筛选: 处理方式: 1.filter函数在py3,返回的是个生成式. from random import randint data = [randint(-100,100) for i in ...
- c#数据筛选和排序
一.TreeView SelectedNode 选中的节点 Level 节点的深度(从0开始) AfterSelect 节点选中后 ...
随机推荐
- redis配置文件之复制
主从复制使用slaveof将Redis实例作为另一个Redis服务器的副本. 1) Redis复制是异步的,master可以配置成如果它连接的slave没有达到给定的数量,就停止接受写入.2) 如果断 ...
- Unity3D_GUI (1)--按钮控件
这是自己的第一篇记录自己的技术文章,自己还是个菜鸟,有错误之处还望大家能够多多指点. 下面记录的是自己在学GUI.Button的自己认知,这里用的是代码进行控制,当然当你学熟练了就可以直接使用GUI ...
- 显示mysql线程和kill线程的命令
show processlist;//显示哪些线程正在运行. kill id //kill线程 通常在表被锁的时候用. show processlist;显示哪些线程正在运行.您也可以使用my ...
- TCP/IP协议栈 -----链路层
这节说一下链路层和ARP RARP协议 链路层: 在协议栈中链路层的目的有三个:1. 为IP模块发送或接受数据包 2.为ARP模块发送或接受ARP请求 3. 为RARP模块发送或接受RARP请求. 让 ...
- PF_RING install in centos7
很多centos7是最小化安装. 这样很多kernel就没有安装全,而且很多开发库也没有. 在安装PF_RING过程中,会缺少很多依赖. 首先安装依赖包: yum -y install numactl ...
- post 与get 区别
刷新/后退按钮 GET后退按钮/刷新无害,POST数据会被重新提交(浏览器应该告知用户数据会被重新提交). 书签 GET书签可收藏,POST为书签不可收藏. 缓存 GET能被缓存 缓存是针对URL来进 ...
- centos yum install redis
linux下yum安装redis以及使用 1.yum install redis --查看是否有redis yum 源 [root@localhost ~]# yum install r ...
- 我这样减少了26.5M Java内存!
WeTest 导读 历时五天的内存优化已经结束,这里总结一下这几天都做了什么,有哪些收获.优化了,或可以优化的地方都有哪些.(因为很多事还没做,有些结论需要一定样本量才能断定,所以叫一期)一期优化减少 ...
- java线程池的创建使用
利用java的多线程编程可以大大的提高系统的并发运行效率,线程越多并发执行的任务就越多,但是并不意味着效率会一直提高,相反会得到适得其反的效果. java中的多线程编程一共有三种方法: 继承Threa ...
- JAVA8之lambda表达式具体解释,及stream中的lambda使用
前言: 本人也是学习lambda不久,可能有些地方描写叙述有误,还请大家谅解及指正! lambda表达式具体解释 一.问题 1.什么是lambda表达式? 2.lambda表达式用来干什么的? 3.l ...