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 相关文章推荐
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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
PHP类的反射用法实例
2014/11/03 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
python实现ftp客户端示例分享
2014/02/17 Python
python中文编码问题小结
2014/09/28 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
Python Logging 日志记录入门学习
2018/06/02 Python
ipad上运行python的方法步骤
2019/10/12 Python
职工运动会邀请函
2014/02/02 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
党员自我评价2015
2015/03/03 职场文书
2015年底工作总结范文
2015/05/15 职场文书
孙振耀退休感言
2015/08/01 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
python状态机transitions库详解
2021/06/02 Python
golang中字符串MD5生成方式总结
2021/07/04 Golang
JS数组去重详情
2021/11/07 Javascript