javascript中对一个对象数组按照对象某个属性进行排序

在javascript中,对象和数组是两种不同的类型,这和php中的数组概念不同。在javascript中,也有一些精妙的算法,用来对一些对象进行排序。我在面试迅雷的时候,也拿到一道题,当时做题的时候考虑到时间,没有去仔细研究,回来后再读了一些方法,就知道真正的考点在哪里了。

我们现在有一组“学生”对象,包含“名字,年龄”等属性,现在要求一个算法,把这些对象放在一个数组里,可以实现按照年龄对这些对象进行排序。

var sdts = [{name:"小明",age:12},{name:"小红",age:13},{name:"小花",age:11}
]

那么考点在哪里呢?实际上在于数组对象的sort方法。

Array.sort(fun)

fun是一个函数,排序根据这个函数返回值来进行判断,如果返回值小于0表示两个元素不需要交换位置,1表示要用交互位置,0表示相等,实际上<=0等效。

sort方法有两个注意点:

  1. 会操作原始数组,经过操作后原始数组发生变化
  2. 默认排序按照字符编码排序,例如,我们有下面的一个例子:
var arr1 = [14,23,11,6,87,67];
arr1.sort();// [11,14,23,6,67,87] 按字符而非数值排序

想要完成值比较排序,必须传入sort参数(函数)进行规制制定:

function sortRule(a,b) {return a-b; // 如果a>=b,返回自然数,不用交换位置
}
arr1.sort(sortRule);

但是,如果遇到我们上面题目中一样,每个元素并非是数组,而是对象,那应该怎么去处理呢?其实道理是一样的,只不过我们要在规制函数中重新编写一个适合对象的规制:

functon sortRule(a,b) {return a.age - b.age;
}

当然,这样写会遇到一些问题,这是我们在明确知道要进行排序的对象数组的情况,倘若对象数组元素不存在age属性,那就会报错了,因此,你在撰写自己的规则时,应该更加丰富它的规则判断。

加入我们现在不规定按照哪一个属性排序,比如除了age属性,我们还有学生的分数score属性,我们偶尔需要按照年龄排序,偶尔又需要按照score排序,希望能重复用这个算法,应该怎么办呢?

function sortBy(field) {return function(a,b) {return a[field] - b[field];}
}
arr1.sort(sortBy("score"));

没错,核心的代码就这么简单了,一些可能抛出错误的判断,自己去考虑吧。在这种想法下面,我们还可以做一个设想:假如score相等的情况下,我们是否可以按照年龄的大小排序输出?

function sortBy(field1,field2) {return function(a,b) {if(a.field1 == b.field1) return a.field2 - b.field2;return a.field1 - b.field1;}
}
arr1.sort(sortBy("score","age"));

没错,其实也就这么简单,你甚至可以使用argments来获取更多的参数,用以传入更多的字段作为判断条件。

 

转载来自:http://www.tangshuang.net/2406.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413355.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[css] 用css画一个五边形和一个六边形

[css] 用css画一个五边形和一个六边形 五边形&#xff1a;clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); 六边形&#xff1a;clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 七边形&#xff1a;clip-path: polygon(50% 0%…

[css] 你有没有使用过“形似猫头鹰”(例:`* + *{ ... }`) 的选择器?

[css] 你有没有使用过“形似猫头鹰”&#xff08;例&#xff1a;* *{ ... }&#xff09; 的选择器&#xff1f; 以前常用&#xff0c;比如li li {margin-top: 1rem; } 这样可以给除了第一个li以外的li指定样式&#xff0c;比如在两个li之间加上margin个人简介 我是歌谣&…

HTML5 Web 存储(localStorage和sessionStorage)

localStorage生命周期是永久&#xff0c;除非主动清除localStorage信息&#xff0c;否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端&#xff08;即浏览器&#xff09;中保存&#xff0c;不参与和服务器的通信。 // 1、保存数据到本地// 第一个参数是保存的…

面向对象之反射、包装、(定制)

什么是反射&#xff1f; 反射的概念是由Smith在1982年首次提出的&#xff0c;主要是指程序可以访问、检测和修改它本身状态或行为的一种能力&#xff08;自省&#xff09;&#xff0c; 这一概念的提出很快引发了计算机科学领域关于应用反射的研究。它首次被程序语言的设计领域所…

[css] 为什么说css中能用子代选择器的时候不要用后代选择器?

[css] 为什么说css中能用子代选择器的时候不要用后代选择器&#xff1f; 选择从右到左依次解析匹配&#xff0c;所以后代选择器会去找它的所有父级&#xff0c; 而子代选择器只会选择直接的父级&#xff1b;减少匹配次数&#xff0c;提高效率个人简介 我是歌谣&#xff0c;欢…

javascript基本函数

如何使用jquery刷新当前页面 下面介绍全页面刷新方法&#xff1a;有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象&#xff08;用于框架&#xff09; opener.location.reload()刷新父窗口对象&#xff08;用于单开窗口&…

[css] 如何给文字的color设置渐变

[css] 如何给文字的color设置渐变 .text {background: -webkit-linear-gradient(#eee, #333);-webkit-background-clip: text;-webkit-text-fill-color: transparent; }个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。…

微信小程序运行报错---invoke event

微信小程序页面跳转 //跳转到新的页面&#xff0c;新的页面带有返回按钮&#xff0c;不能跳转到tabBar页面&#xff0c;否则会报invoke event之类的错误 wx.navigateTo({url: }) //跳转到新的页面&#xff0c;不带返回按钮&#xff0c;但是不能太偶转到tabBar页面&#xff0…

js 静止f1到f12 和屏蔽鼠标右键

//静止键盘f1-f12 function testKeyDown(event) { if ((event.keyCode 112) || //屏蔽 F1 (event.keyCode 113) || //屏蔽 F2 (event.keyCode 114) || //屏蔽 F3 (event.keyCode 115) || //屏蔽 F4 //(event.keyCode 116) || //屏蔽 F5 (event.keyCode 117) || //屏蔽 F6…

[css] 如何在白天和黑夜自动切换页面的颜色?

[css] 如何在白天和黑夜自动切换页面的颜色&#xff1f; 媒体查询的内容都是设备的属性&#xff1a;宽度高度&#xff0c;旋转方向&#xff0c;打印样式&#xff0c;分辨率 所以用媒体查询的话&#xff0c;需要用户的设备拥有切换黑暗模式的功能 借助 js 切换页面颜色的话&…

py 的 第 30 天

首先学习了一下socket&#xff0c;这个经过周末作业总算是掌握精髓了&#xff0c;可能还没掌握只是以为掌握了? import socketserverclass MyServer(socketserver.BaseRequestHandler):def handle(self):passserver socketserver.ThreadingTCPServer((192.168.13.84,8001,),M…

Error: Cannot find module 'webpack-cli'--解决方案

npm install webpack-cli -g 全局安装解决 今日赠语&#xff1a; 哈佛大学研究心理学表示&#xff1a; 1、床乱糟糟的人&#xff0c;比穿整洁的人&#xff0c;创造力平均要高出50% 2、经常迟到的人&#xff0c;比不迟到的人&#xff0c;幽默感平均要高出70% 3、饭量大的人&…

[css] CSS中哪些属性会引起GPU渲染,会增加耗电吗?

[css] CSS中哪些属性会引起GPU渲染&#xff0c;会增加耗电吗&#xff1f; 肆无忌惮的开启GPU硬件加速&#xff0c;会导致大量消耗设备电量&#xff0c;降低电池寿命等问题。个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很…

[css] OOCSS有哪些好处?对应的库有哪些?

[css] OOCSS有哪些好处&#xff1f;对应的库有哪些&#xff1f; 有语义的类名&#xff0c;逻辑性强的层次关系 可重用&#xff0c;样式和结构的分离&#xff0c;容器和内容的分离 Kite个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但…

分享菜单效果

分享菜单效果&#xff1a; 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 <title>分享菜单</title>6 <style>7 #div1{width: 100px; height: …

vue中的js引入图片,必须require进来

vue怎样能把assets里面的图片拿出来&#xff1f; 1.在img标签里面直接写上路径&#xff1a; <img src"../assets/a1.png" class"" width"100%"/> 2.利用数组保存再循环输出&#xff1a; return {imgs: [{url: require(/assets/slide1.…

[css] 如何解决IE6浮动时产生双倍边距的BUG?

[css] 如何解决IE6浮动时产生双倍边距的BUG&#xff1f; 1.当块级元素有浮动样式的时候&#xff0c;给元素添加margin-left和margin-right样式&#xff0c;在ie6下就会出现双倍边距2.给当前元素添加样式&#xff0c;使当前元素不为块&#xff0c;如&#xff1a;display:inline…

CSP 行车路线 最短路变型

问题描述&#xff1a; 小明和小芳出去乡村玩&#xff0c;小明负责开车&#xff0c;小芳来导航。小芳将可能的道路分为大道和小道。大道比较好走&#xff0c;每走1公里小明会增加1的疲劳度。小道不好走&#xff0c;如果连续走小道&#xff0c;小明的疲劳值会快速增加&#xff0c…

vue使用axios并存数据到state

npm安装 npm install axios --save main.js导入 // 引入axios&#xff0c;并加到原型链中 import Axios from axios import QS from qs Vue.prototype.$axios Axios Vue.prototype.qs QS 各子模块中使用&#xff0c;通过原型链 this.$axios ...... get实例 <div id&…

[css] 如何让IE6支持min-width和max-width?

[css] 如何让IE6支持min-width和max-width&#xff1f; 利用IE特有的css语法 .className {max-width:620px;min-width:1px;_width:expression(this.scrollWidth > 620 ? "620px":(this.scrollWidth < 1? "1px":"auto")); }个人简介 我…