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 ...
随机推荐
- shell把字符串中的字母去掉,只保留数字
1 编辑测试文件 [root@hz-kvm cephdisk3]# cat > 1.txt <<EOF> 120Tib> EOF 2 显示文件[root@hz-kvm c ...
- 近期Java高级开发岗面试总结
原文出处:公众号:编程大道 作者:walking 近期Java高级开发岗面试总结 哈喽大家好,我是walking,这是我的公众号:编程大道. 很久没和大家见面了,文章更新的速度略有延后.这个公众号断断 ...
- Kali Day1
一.最新版本的Kali Linux的账号名和密码都是kali. 如何切换root 步骤如下: 1. 设置密码 sudo passwd root 2. 切换身份 su 3. 图示 二.快捷键 1. K ...
- 洛谷 P4047 [JSOI2010]部落划分
这道题其实就是无线通讯网的双倍经验啦,只是在输出的时候不同罢了.还是一样的\(kruskal\)算法,但是在求的时候,应该在\(now=n-k+1\)的时候结束.本来到\(n-k\)就行了的,但是由于 ...
- PHPstorm常用快捷键(Windows)
本文整理本人在日常工作中使用最频繁的PHPstorm快捷键,以作为自己的总结备忘,也希望能够帮到有需要的小伙伴. 以下快捷键大致按本人的使用频率从高到低来介绍. 1.复制.粘贴 Ctrl+c .Ctr ...
- css如何让文字不换行显示?
在CSS中,可以通过white-space属性来实现文字不换行显示:只要将white-space属性的值为nowrap就可强制文字不换行. white-space属性指定元素内的空白怎样处理.它有以下 ...
- POJ3263 Tallest Cow 差分
题目描述 FJ's N (1 ≤ N ≤ 10,000) cows conveniently indexed 1..N are standing in a line. Each cow has a p ...
- CF819B Mister B and PR Shifts 思维题
分析 这道题\(n\leq10^{6}\),显然\(n^{2}\)的暴力是无法解决问题的 那么我们可以考虑数列的某一种性质 因为最终的答案是\(\sum{n \atop i=1} |p_i - i|\ ...
- 通过手写服务器的方式,立体学习Http
前言 Http我们都已经耳熟能详了,而关于Http学习的文章网上有很多,各个知识点的讲解也可说是深入浅出.然而,学习过后,我们对Http还是一知半解.问题出在了哪? Http是一个客户机与服务器之间的 ...
- SpringBoot2.x入门:应用打包与启动
前提 这篇文章是<SpringBoot2.x入门>专辑的第5篇文章,使用的SpringBoot版本为2.3.1.RELEASE,JDK版本为1.8. 这篇文章分析一个偏向于运维方面的内容: ...