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 ...
随机推荐
- 【转载】npx 真香
npx 主要提供了一些便捷操作: 调用项目安装的模块 避免全局安装模块 使用不同版本的 node 执行 GitHub 源码 原文地址:http://www.ruanyifeng.com/blog/20 ...
- CentOS 6.4 安装 rar软件(tar.gz 包)并注册成功
1.下载地址: www.rarlab.com/download.htm 2.解压tar.gz文件(cd进入文件目录) # cd /home/wjshan0808/Documents # ls rarl ...
- 阿里云Linux CentOS8.1 64位服务器安装LNMP(Linux+Nginx+MySQL+PHP) 并发调试之MySQL配置
mysql高并发配置 要在mysqld下设置 1. 修改back_log参数值:由默认的50修改为500.(每个连接256kb,占用:125M) back_log=500 back_log值指出MyS ...
- 洛谷 P3574 [POI2014]FAR-FarmCraft
题目传送门 题目描述 输入输出格式 输入格式: 输出格式: 一行,包含一个整数,代表题目中所说的最小时间. 输入输出样例 样例输入 样例输出 提示 分析 我们设f[x]为遍历完以x为根的子树且将这棵子 ...
- 不懂SpringApplication生命周期事件?那就等于不会Spring Boot嘛
学习方法之少废话:吹牛.装逼.叫大哥. 作者:A哥(YourBatman) 公众号:BAT的乌托邦(ID:BAT-utopia) 文末是否有彩蛋:有 目录 前言 正文 生命周期事件流程图 版本说明: ...
- Docker-教你如何通过 Docker 快速搭建各种测试环境
今天给大家分享的主题是,如何通过 Docker 快速搭建各种测试环境,本文列举的,也是作者在工作中经常用到的,其中包括 MySQL.Redis.Elasticsearch.MongoDB 安装步骤,通 ...
- 通过调试对WriteFile()API的钩取
通过调试对WriteFile()API的钩取 0x00 目标与思路 目标:钩取指定的notepad.exe进程writeFile()API函数,对notepad.exe进程的写入的字符保存时保存为大写 ...
- 一文梳理Web存储,从cookie,WebStorage到IndexedDB
前言 HTTP是无状态的协议,网络早期最大的问题之一是如何管理状态.服务器无法知道两个请求是否来自同一个浏览器.cookie应运而生,开始出现在各大网站,然而随着前端应用复杂度的提高,Cookie 也 ...
- NameNode是如何存储元数据的?
1.NN的作用 保存HDFS上所有文件的元数据! 接受客户端的请求! 接受DN上报的信息,给DN分配任务(维护副本数)! 2.元数据的存储 元数据存储在fsiamge文件+edits文件中! fsim ...
- scrapy 基础组件专题(二):下载中间件
下载器中间件是介于Scrapy的request/response处理的钩子框架,是用于全局修改Scrapy request和response的一个轻量.底层的系统. 1.激活Downloader Mi ...