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中valueOf函数与toString方法深入理解
Dec 02 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
php中session与cookie的比较
2015/01/27 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
js实现文本框支持加减运算的方法
2015/08/19 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
django rest framework之请求与响应(详解)
2017/11/06 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
python numpy 按行归一化的实例
2019/01/21 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
python3实现绘制二维点图
2019/12/04 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
锦旗标语大全
2014/06/23 职场文书
班级出游活动计划书
2014/08/15 职场文书
党支部活动策划方案
2014/08/18 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
如何用JavaScipt测网速
2021/05/09 Javascript
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis