Js数组对象的属性值升序排序,并指定数组中的某个对象移动到数组的最前面
需求整理:
本篇文章主要实现的是将一个数组的中对象的属性值通过升序的方式排序,然后能够让程序可以指定对应的数组对象移动到程序的最前面。
数组如下所示:
var arrayData= [{name: "夏明", Id:24}, {name: "小红", Id: 25},{name: "大袁", Id: 22},{name: "大姚", Id: 23},{name: "小芳", Id: 18}];
首先把数组中的Id值通过升序的方式排序:
//源数组
var arrayData= [{name: "夏明", Id:24}, {name: "小红", Id: 25},{name: "大袁", Id: 22},{name: "大姚", Id: 23},{name: "小芳", Id: 18}]; //重写排序方法
var compare = function (attribute) {
return function (obj1, obj2) {
var val1 = obj1[attribute];
var val2 = obj2[attribute];
if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
}
}
var newArrayData=arrayData.sort(compare('Id'));//通过Id排序完成后的数组
console.log(newArrayData);
排序完成后输出的值:
[{ name: "大袁", Id: 22 }, { name: "大姚", Id: 23 }, { name: "夏明", Id: 24 },{ name: "小红", Id: 25 }]
找到Id为23的对象,移动到数组的最前面去(注意Id值唯一):
实现原理:因为移除数组对象需要找到对应数组对象的下标索引才能进行移除,现在我们需要移除Id=23的对象,让其排到最前面去(先找到对象下标,然后把给数组对象赋值给temporaryArry临时数组,然后在通过下标移除newArrayData中的该对象值,最后将arrayData等于temporaryArry.concat(newArrayData)重新渲染数组数据)。
代码实现:
//创建临时数组
var temporaryArry=[]; //找到数组中Id=23的下标索引(从0开始)
let currentIdx=newArrayData.findIndex(v=>v.Id==23);
console.log('Id=23的索引值为:',currentIdx); //把Id=23的对象赋值给临时数组
temporaryArry.push(newArrayData[currentIdx]); //移除数组newArray中Id=23的对象
newArrayData.splice(currentIdx,1);//从start[一般为对象的索引]的位置开始向后删除delCount个元素 console.log('移除后的数据',newArrayData); //重新渲染数组
newArrayData=temporaryArry.concat(newArrayData); console.log(newArrayData);
输出结果:
[{ name: "大姚", Id: 23 }, { name: "小芳", Id: 18 }, { name: "大袁", Id: 22 }, { name: "夏明", Id: 24 },{ name: "小红", Id: 25 }]
Js数组对象的属性值升序排序,并指定数组中的某个对象移动到数组的最前面的更多相关文章
- JavaScript中对象数组 根据某个属性值进行排序
将下列对象数组,通过工资属性,由高到低排序 var BaiduUsers = [], WechatUsers = []; var User = function(id, name, phone, ge ...
- js sort方法根据数组中对象的某一个属性值进行排序
sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {name:'zopp',age:0}, {name:'gpp' ...
- js sort方法根据数组中对象的某一个属性值进行排序(实用方法)
js sort方法根据数组中对象的某一个属性值进行排序 sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {nam ...
- JQuery 操作对象的属性值
通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...
- jquery attr()方法 添加,修改,获取对象的属性值。
jquery attr()方法 添加,修改,获取对象的属性值. jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到 ...
- 使用java中的反射获得object对象的属性值
知识点:使用java中的反射获得object对象的属性值 一:场景 这两天开发代码时,调用别人的后台接口,返回值为Object对象(json形式的),我想获得object中指定的属性值,没有对应的ge ...
- vue修改对象的属性值后页面不重新渲染
原文地址:vue修改对象的属性值后页面不重新渲染 最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: [html] view plain copy &l ...
- 读匿名object对象的属性值
读匿名object对象的属性值 1.定义读object对象值的功能方法 public static class StaticClass { public static string ValueByKe ...
- WPFS数据绑定(要是后台类对象的属性值发生改变,通知在“client界面与之绑定的控件值”也发生改变须要实现INotitypropertyChanged接口)
WPFS数据绑定(要是后台类对象的属性值发生改变,通知在"client界面与之绑定的控件值"也发生改变须要实现INotitypropertyChanged接口) MainWindo ...
随机推荐
- DOM-BOM-EVENT(3)
3.Node常用属性 childNodes 获取所有子节点 <div id="wrap"> <div>1111</div> <div> ...
- Myeclipse启动WebLogic 总是报账号密码无效<Authentication denied: Boot identity not valid
在MyEclipse下配置了Weblogic 11后,每次启动从报错: Critical> 看了下描述,是用户名及密码什么的问题,我想起来,配置Weblogic 的域的时候将密码改成了12345 ...
- Redis系列(十):数据结构Set源码解析和SADD、SINTER、SDIFF、SUNION、SPOP命令
1.介绍 Hash是以K->V形式存储,而Set则是K存储,空间节省了很多 Redis中Set是String类型的无序集合:集合成员是唯一的. 这就意味着集合中不能出现重复的数据.可根据应用场景 ...
- YOLOV4源码详解
一. 整体架构 整体架构和YOLO-V3相同(感谢知乎大神@江大白),创新点如下: 输入端 --> Mosaic数据增强.cmBN.SAT自对抗训练: BackBone --> CSPDa ...
- Django项目中集成第三方登录时出现的错误
原以为是被反爬 没想到 总结:这里的http应该是https协议,以后要更加小心 了,不能犯这种低级错误
- 每日一题 - 剑指 Offer 47. 礼物的最大价值
题目信息 时间: 2019-07-02 题目链接:Leetcode tag:动态规划 难易程度:中等 题目描述: 在一个 m*n 的棋盘的每一格都放有一个礼物,每个礼物都有一定的价值(价值大于 0). ...
- VScode 配置c/c++环境(结合各大网站的blog和官方文档)
第一步:下载mingw64 首先,在各大搜索引擎上搜索mingw64,进入其官网下载即可 需要注意的是,下载默认的是先从网页上下载下载器,再进行选择下载.但是在部分电脑上下载会出现什么mingw64. ...
- let import export React入门实例教程 connect provider combineReducers 箭头函数 30分钟掌握ES6/ES2015核心内容 Rest babel
let与var的区别 http://www.cnblogs.com/snandy/archive/2015/05/10/4485832.html es6 导入导出 http://www.csdn.ne ...
- td文字溢出显示省略号
昨天遇到移动端表格td中文字溢出问题,写了溢出隐藏样式,居然没起作用! { overflow:hidden;//溢出隐藏 white-space:nowrap;//文字不换行 text-overflo ...
- activiti6基础01-如何数据库操作及相关表
官网文档:https://www.activiti.org/userguide/#queryAPI 1. Activit的简单源码解读 activiti的官方文档讲解详细很详细,也很范.按着 ...