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 编程笔记 无名函数
Jun 28 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
浅析Ajax语法
Dec 05 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
了解在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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
调试Python程序代码的几种方法总结
2015/04/28 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
python 将md5转为16字节的方法
2018/05/29 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
python 同时读取多个文件的例子
2019/07/16 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸