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验证表单第二部分
Nov 25 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
如何用JavaScipt测网速
May 09 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 数组基础知识小结
2010/08/20 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php生成随机数的三种方法
2014/09/10 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
python实现中文分词FMM算法实例
2015/07/10 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
上课随便讲话检讨书
2014/09/12 职场文书
公民授权委托书范本
2014/09/17 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
Java中try catch处理异常示例
2021/12/06 Java/Android
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript