需求整理:

  本篇文章主要实现的是将一个数组的中对象的属性值通过升序的方式排序,然后能够让程序可以指定对应的数组对象移动到程序的最前面。

数组如下所示:

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数组对象的属性值升序排序,并指定数组中的某个对象移动到数组的最前面的更多相关文章

  1. JavaScript中对象数组 根据某个属性值进行排序

    将下列对象数组,通过工资属性,由高到低排序 var BaiduUsers = [], WechatUsers = []; var User = function(id, name, phone, ge ...

  2. js sort方法根据数组中对象的某一个属性值进行排序

    sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {name:'zopp',age:0}, {name:'gpp' ...

  3. js sort方法根据数组中对象的某一个属性值进行排序(实用方法)

    js sort方法根据数组中对象的某一个属性值进行排序 sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {nam ...

  4. JQuery 操作对象的属性值

    通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...

  5. jquery attr()方法 添加,修改,获取对象的属性值。

    jquery attr()方法 添加,修改,获取对象的属性值. jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到 ...

  6. 使用java中的反射获得object对象的属性值

    知识点:使用java中的反射获得object对象的属性值 一:场景 这两天开发代码时,调用别人的后台接口,返回值为Object对象(json形式的),我想获得object中指定的属性值,没有对应的ge ...

  7. vue修改对象的属性值后页面不重新渲染

    原文地址:vue修改对象的属性值后页面不重新渲染 最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: [html] view plain copy &l ...

  8. 读匿名object对象的属性值

    读匿名object对象的属性值 1.定义读object对象值的功能方法 public static class StaticClass { public static string ValueByKe ...

  9. WPFS数据绑定(要是后台类对象的属性值发生改变,通知在“client界面与之绑定的控件值”也发生改变须要实现INotitypropertyChanged接口)

    WPFS数据绑定(要是后台类对象的属性值发生改变,通知在"client界面与之绑定的控件值"也发生改变须要实现INotitypropertyChanged接口) MainWindo ...

随机推荐

  1. Elasticsearch从入门到放弃:分词器初印象

    Elasticsearch 系列回来了,先给因为这个系列关注我的同学说声抱歉,拖了这么久才回来,这个系列虽然叫「Elasticsearch 从入门到放弃」,但只有三篇就放弃还是有点过分的,所以还是回来 ...

  2. Python之浅谈绑定方法

    目录 绑定方法和非绑定方法 绑定方法 对象的绑定方法 类的绑定方法 非绑定方法 总结 绑定方法和非绑定方法 类中定义的方法大致可以分为两类:绑定方法和非绑定方法.其中绑定方法又可以分为绑定到对象的方法 ...

  3. 为DLL文件添加强名称

    程序在编译时出现类似 "错误 1 程序集生成失败 -- 引用的程序集“XXXXXXXXXX”没有强名称" 这样的错误,是因为它不是强名称的,则需要进行以下操作: 例如:com.so ...

  4. iframe 透明兼容,设置iframe透明背景的方法

    从IE5.5+就支持iframe框架的背景透明.通过使用allowtransparency和background-color来设置iframe框架的透明效果,代码如下: <iframe src= ...

  5. centOS7:创建的新用户如何获得写权限

    要在root用户下使用 1.新建用户 adduser testuser //新建testuser 用户 passwd testuser //给testuser 用户设置密码 2.赋予root权限 方法 ...

  6. 邓布利多拍了拍你,并递来一份CSS魔法

    校长:阿不思·邓布bai利多 亲爱的少年:我们愉快地通知您,您已获准在CSS魔法学校就读.特此带给你一份CSS魔法秘籍,代码简单,支持个性化定制.学期定于今日开始,我们将在此静候您的猫头鹰带来您的回信 ...

  7. 题解:2018级算法第五次上机 C5-图2

    题目描述: 样例: 实现解释: 所有结点对最短路径的板子题 知识点: 寻找所有结点对最短路径,动态规划 坑点: 无坑,注意建边即可 使用的算法为floyd算法 按照程序顺序解释如下: 首先建图,以邻接 ...

  8. AutoJS 实现QQ小游戏胡莱三国爬塔

    AutoJS 开发文档参考 环境 安卓QQ 胡莱三国小游戏 AutoJS APP 使用方法 安装AutoJs,打开无障碍模式,进入到胡莱三国小游戏,在Autojs中执行脚本 代码 "auto ...

  9. CRM开发系列

    CRM,客户关系管理系统(Customer Relationship Management).企业用CRM技术来管理与客户之间的关系,以求提升企业成功的管理方式,其目的是协助企业管理销售循环:新客户的 ...

  10. Spring详细基本开发流程

    LOGO 文章已托管到GitHub,大家可以去GitHub查看阅读,欢迎老板们前来Star! 搜索关注微信公众号 码出Offer 领取各种学习资料! 一.Spring概述 1.1 Web开发中的一些问 ...