说到遍历,首先想到的是数组的遍历,方法不要太多,比如 for, forEach,map,filter,every,some等

   下面来看下,用法 首先 定义一个数组:

      

    1. for循环,需要知道数组的长度,才能遍历,

    2. forEach循环,循环数组中每一个元素并采取操作, 没有返回值, 可以不用知道数组长度

      

    3. map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新的数组,原数组不变

      

    4. filter函数, 过滤通过条件的元素组成一个新数组, 原数组不变

      

    5. some函数,遍历数组中是否有符合条件的元素,返回Boolean值

      

    6. every函数, 遍历数组中是否每个元素都符合条件, 返回Boolean值

      

当然, 除了遍历数组之外,还有遍历对象,常用方法 in

    

     in 不仅可以用来 遍历对象,还可以用来遍历数组, 不过 i 对应与数组的 key值

     

介绍完遍历,下面说一下工作中遇到的情况,后台传给我一个对象数组,我需要排序再显示,看到有介绍用 sort 排序的方法,如下

   

var arr1 = [
{name: 'te', value: 5},
{name: 'te', value: 2},
{name: 'we', value: 3},
{name: 'ee', value: 1},
{name: 'ee', value: 4}
]; var by = function(type){
return function(o,p){
console.log(o,p);
var a;
var b;
if(typeof o === 'object' && typeof p === 'object' && o && p){
a = o[type];
b = p[type];
if(a === b) {
return 0;
}
if(typeof a === typeof b){
console.log(a, b);
return a < b ? -1 : 1
}
return typeof a < typeof b ? -1 : 1;
}else {
throw('字段有误');
}
}
}
console.log(arr1.sort(by('value')));

  显示如下:

    

总结:

  排序应用场景很多 , 所以要弄清楚,明白,方可游刃有余。望小伙伴多多提意见!

补充:  后面发现, 后台传过来的数组中,每个对象按 value 排序, value > 5的按顺序排在前面,小于5排在后面

    思考后, 可以在原来的的方法中这样写,将数组分成2段,大于等于5和小于5,交换位置即可

  

var arr1 = [
{name: 'te', value: 5},
{name: 'te', value: 2},
{name: 'we', value: 3},
{name: 'ee', value: 1},
{name: 'ee', value: 4}
]; var sortObj = function(arr, type , num){
var by = function(type){
return function(o,p){
var a;
var b;
if(typeof o === 'object' && typeof p === 'object' && o && p){
a = o[type];
b = p[type];
if(a === b) {
return 0;
}
if(typeof a === typeof b){
console.log(a, b);
return a < b ? -1 : 1
}
return typeof a < typeof b ? -1 : 1;
}else {
throw('字段有误');
}
}
}; var cacheArr = arr.sort(by('value')); //通过num 把数组分成两段
var arrBf = cacheArr.filter(function(item){
if(item.value < num){
return item;
}
});
var arrAf = cacheArr.filter(function(item){
if(item.value >= num){
return item;
}
}); //交换位置 即可得到
var newArr = arrAf.concat(arrBf);
return newArr;
};
console.log(sortObj(arr1, 'value' , 3));

  

js中的那些遍历的更多相关文章

  1. js中的数组遍历

    js中的数组遍历是项目中经常用到的,在这里将几种方法做个对比. ! for循环:使用评率最高,也是最基本的一种遍历方式. let arr = ['a','b','c','d','e']; for (l ...

  2. 项目中一次排序规则的改动,注意到js中map的遍历的顺序

    背景:项目需要对前端页面上某个插件的下拉选择项进行排序,需要按照配置的顺序显示. 首先调查后台,发现sql语句中已经添加order by.之后发现查询结果遍历后封装进HashMap,这里改为LinkH ...

  3. js中4种遍历语法比较

    前言:本文主要比较for.for-in.forEach和for-of的异同以及优缺点. for for循环是最原始最易理解的循环遍历方式 for(var index = 0;index < ar ...

  4. phpcms抛出的二维数组转移到js,js中for....in遍历数组,用“.”连接来读出一维数组值

    直切正题: 1.phpcms在模版中读出数组有很多中方法,如,{pc:content action="lists"}或{pc:get sql=""},经过{lo ...

  5. JS 中的数组遍历方式效率比较

    JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代码如下: ; j < ...

  6. js中for循环遍历的写法

    众所周知,for循环是编程中必不可少的知识点:那么如何高效的写出循环呢? 我们要先知道for循环的基础样式是由自有变量自增自减和if判组成的: 1 for(条件){ 2 执行语句 3 } 而for循环 ...

  7. JS中的一些遍历方法

    1.遍历数组 以下遍历方法中for循环性能最好,而且优化版for循环性能最高.只有forEach不能跳出循环. 在循环数组时,如果在循环过程中对数组进行了增删改,那么在后面的每次循环中,进行操作的都是 ...

  8. js中的节点遍历+类数组对象

    firstChild  第一个子元素 lastChild  最后一个子元素 childNodes[n]  =   childNodes.item(n)    第n+1个子元素 parentNode  ...

  9. js 中数组的遍历

    var x = ['a','b','c'] x.forEach(function(val,k){ console.log(val + '--' +k); }) a--0 b-- 1 c-- 2 var ...

随机推荐

  1. JAVA基础之ServletContext应用

    创建一个登陆的界面,并且统计次数! 导入jar包; 1. driver=com.mysql.jdbc.Driver url=jdbc:mysql://localhost:3306/java0603?u ...

  2. DCL 管理权限

    一个数据库里面有着多个用户,每个用户的权限也不仅相同. 一.查询权限 1.基本语法格式: show grants for '用户名'@'主机名';  2.具体操作 查看 user1 用户的权限 注意: ...

  3. C++线程同步之事件(生产者与消费者问题)

    #include <windows.h> #include <stdio.h> HANDLE g_hSet = NULL; HANDLE g_hClear = NULL; HA ...

  4. 整合91平台接入的ANE

    来源:http://www.swfdiy.com/?p=1328 91平台接入的SDK只有objectC版和java版, 现在如果要在AIR里使用SDK,只能编写ANE整合进来. 91SDK = 几个 ...

  5. 设置redis开机自动启动

    注意:win7执行命令前面可不需要加路径,win10必须要加路径 命令: redis-server --service-install redis.windows.conf 执行完成之后,打开服务管理 ...

  6. RedHat6.9下替换yum源

    因为RedHat的yum需要收费,且要注册后才能使用.因此想把Yum源更新为CentOS的.使用的RedHat版本为6.9,因此对应的CentOS版本也要为6.9 1. 检查并删除原有的yum源 rp ...

  7. MySQL Backup--Xtrabackup远程备份和限速备份

    使用xbstream 备份到远程服务器 ##xbstream 备份到远程服务器 innobackupex \ --defaults-file="/export/servers/mysql/e ...

  8. Jmeter4.0 _Beanshell解析并获取json响应数据数组长度

    我们在做jmeter接口测试的时候,有时候碰到开发没返回数据total,只返回了一条条记录,可是呢,我们又需要知道到底返回了多少条数据时,咋办呢?咋办呢?咋办呢? 不要急,接下来,让我们见证奇迹是如何 ...

  9. JVM的深入理解:由一次Quartz的定时任务引发的“A cannot cast to A”的问题

    由Quartz框架引发的“A cannot cast to A”的问题 起因与问题描述 向新开的项目中添加定时任务,部署集群,添加了热加载(springboot-dev-tools),发现在转型时候出 ...

  10. 渗透之路基础 -- XXE注入漏洞

    XXE漏洞 XXE漏洞全称XML External Entity Injection即xml外部实体注入漏洞,XXE漏洞发生在应用程序解析XML输入时,没有禁止外部实体的加载,导致可加载恶意外部文件, ...