需求整理:

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

数组如下所示:

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. python从文件载入字典

    data = np.load('dict_.npy') data = data.item() 不加最后一句,data不是字典类型

  2. 手把手教你把web应用丢到服务器上(单页应用+ 服务端渲染)

    前两篇文章中,我分别介绍了框架的搭建利用vue-cli + vant搭建一个移动端开发模板,并且把项目中axios请求和vuex的用法做了简要的介绍如何在项目里管理好axios请求与vuex.在这两篇 ...

  3. python中 _、__、__xx__() 区别及使用场景

    1.访问权限(private.public)与继承方式(只有public继承) 在面向对象编程语言中,类的属性与方法都会设置访问控制权限,从而满足我们的设计需求.一般而言,我们通常会将对象的属性设置为 ...

  4. windows 下 node 安装 react

    当前node.npm都已安装了. 可是在执行 安装 react的时候总是报错 最后会生成一个报错的txt文件(  <npm-@googlegroups.com>npm-debug.log) ...

  5. 《算法笔记》6.7小节 问题 A: 简单计算器

    又是大模拟淦淦淦淦淦淦淦 思路: 这道题我居然用的队列orz. 言归正传,这道题就是模拟计算器.从读题目样例可以发现,数字的个数只比符号的个数多一个,那么这就给我们了思路:用队列,先提前放出一个数,每 ...

  6. C#由转换二进制所引起的思考,了解下?

    前言 最近遇到很有意思转换二进制的问题,有部分童鞋俨然已了解,可能也有一部分童鞋没碰到过也就不知情,这里我们来深入学习下转换二进制所带来的问题. 二进制转换问题 假设现在我们有一个int类型的数据,它 ...

  7. Appium移动端自动化测试--搭建模拟器和真机测试环境

    详细介绍安装Android Studio及Android SDK.安装Appium Server. 文章目录如下 目录 文章目录如下 模拟器--安装Android Studio及Android SDK ...

  8. Angular实现购物车全选

    直接上代码 <!DOCTYPE html> <html ng-app="myApp" > <head> <meta charset=&qu ...

  9. 多线程01-CAS (CompareAndSwap)

    1.基本概念 原子性是不可中断的最小操作:在Java中,一般通过加锁或者自旋CAS方式来确保原子操作: 而CAS(compareAnd swap)作为Java中常用的保证原子性的手段,JDK1.5之后 ...

  10. Navigation Nightmare POJ - 1984

    Navigation Nightmare Farmer John's pastoral neighborhood has N farms (2 <= N <= 40,000), usual ...