JS根据json数组多个字段排序及json数组常用操作


Posted in Javascript onJune 06, 2019

js 根据json数组多个字段排序的实现代码如下所示:

/**数组根据数组对象中的某个属性值进行排序的方法 
  * 使用例子:newArray.sort(sortByArr(['number'],false)) //表示根据number属性降序排列;若第二个参数不传递,默认表示升序排序
  * @param attr 排序的属性 ['name','sex'...],根据一个字段或者多个字段排序
  * @param rev true表示升序排列,false降序排序
  * */

function sortByArr(arr, rev) {
 if (rev == undefined) {
 rev = 1;
 } else {
 rev = (rev) ? 1 : -1;
 }
 return function(a, b) {
 for (var i = 0; i < arr.length; i++) {
 let attr = arr[i]
 if (a[attr] != b[attr]) {
 if (a[attr] > b[attr]) {
 return rev * 1;
 } else {
 return rev * -1;
 }
 }
 }
}
}

PS:Js 中对 Json 数组的常用操作

我们首先定义一个json数组对象如下:

var persons = [
  {name: "tina", age: 14},
  {name: "timo", age: 15},
  {name: "lily", age: 16},
  {name: "lucy", age: 16}
]

一. 根据对象属性值得到相应对象

//1. 获取 name 等于 lily 的对象
var lily = persons.filter((p) => {
  return p.name == "lily";
});
console.log(lily); //打印结果 [{name: "lily", age: 16}]
//注:filter()方法返回的是一个数组
var twins = persons.filter((p) => {
  return p.age == 16;
});
console.log(twins); //打印结果 [{name: "lily", age: 16},{name: "lucy", age: 16}]

二. 删除其中一个对象

//删除 name 等于 tina 的对象,利用splice()方法
//1. 首先我们要得到这个对象
var tina = persons.filter((p) => {
  return p.name == "tina";
});
//2. 其次得到这个对象在数组中对应的索引
var index = persons.indexOf(tina[0]);
//3. 如果存在则将其删除,index > -1 代表存在
index > -1 && persons.splice(index, 1);
console.log(persons);
//打印结果 [{name: "timo", age: 15}, {name: "lily", age: 16}, {name: "lucy", age: 16}]

三. 修改其中一个对象的属性值

//将 name 等于 timo 的 age 修改为 20
//1. 得到 timo 对象
var timo = persons.filter((p) => {
  return p.name == "timo";
});
//2. 修改age
timo[0].age = 20;

四. 往数组中添加一个对象

//这个最简单了
persons.push({name: "similar", age: 18});

 ——注: 以上的所有操作都会对原数组产生直接影响。

总结

以上所述是小编给大家介绍的JS根据json数组多个字段排序及json数组常用操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 #Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 #Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 #Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 #Javascript
详解新手使用vue-router传参时注意事项
Jun 06 #Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 #Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 #Javascript
You might like
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
十天学会php(2)
2006/10/09 PHP
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
python求解水仙花数的方法
2015/05/11 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python 调用Java实例详解
2017/06/02 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
大学迎新标语
2014/06/26 职场文书
骨干教师申报材料
2014/12/17 职场文书
机动车交通事故协议书
2015/01/29 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
环境卫生标语
2015/08/03 职场文书