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

  • 时间:
  • 5578人关注

这篇文章主要介绍了js根据json数组多个字段排序及json数组常用操作,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下,另外这篇文章主要知识点是关于js、json数组排序、json数组、javascript的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:javascript
  • 编辑整理:赖明俊
  • 教程字数:1657字节
  • 阅读时间:大概16分钟
  • 下载本教程(DOC版)
  • 《Vue.js前端开发基础与项目实战》项目源码
  • JSON-handle
  • Quick Javascript Switcher
  • Vue.js devtools
  • JSON Formatter
  • 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数组常用操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


    上一篇:js中split()方法获取的数组长度知识点讲解

    下一篇:微信小程序MUI导航栏透明渐变功能代码

    相关内容

    • java与jsp的区别

      java是一种语言类似于C语言等的编程语言,而JSP(JavaServer Pages)是一种动态网页技术标准。 JSP和JAVA的区别,JSP算是JAVA一种技术吧,用在网页编程上,因为JAVA不能直接写在html上,但jsp能,jsp就是Servlet程序,当JSP收到客户的请求时,SCRIPTLET(脚本小程序)就会被执行,脚本段将被插入到JSP所生成的目标Servlet的Serivce函数中.所以脚本小程序不能写方法(函数),因为方法里面不能再有方法了.JSP的执行过程。 1、首先,JAVA是一门

      12-17JSP和JAVA的区别

      阅读更多
    • js可以替代java吗

      nodejs不会替代java。在虚拟机层面 node.js 基于的v8 VM看起来很不错,但和Java的 VM 一比,差距甚远。在服务器领域,特别是拥有众多 CPU 和大量内存的环境下,Java 的 VM 几乎是你能在地球上找到的最好的 VM。而v8既不能充分利用多CPU的性能,也不能将内存充分利用。Node.js是从前端转过来的,恰恰前端是计算机领域少数几个不需要计算机体系知识就能胜任的职业。想要真正做到像java那样水平,计算机体系性的知识必不可少。Node.js特别适合中小型系统的快速开

      12-13js能替代java吗

      阅读更多
    • JAVA直接访问jsp页面报404吗

      404表示的是路径未找到错误,解决办法如下: 【解决方法】 1、首先看错误信息 第一行 2、这里有出错的路径,也就是哪个找不到的路径 3、然后回程序中找调用这个路径的地方,确定路径写的是否正确,是否可达。 JSP页面运行时报的404错处理方法如下: 保证在你的Console窗口中看不到任何起到影响的Exception(jsp在编译的时候会先检查web.xml文件,如果全部正常,没有任何Exception的话,才会成功部署到.metadata\.plugins\org.eclipse.wst.server.

      12-12JAVA访问jsp页面报404吗

      阅读更多
    • jsp实质是java程序对吗

      JSP页面在本质上就是Servlet程序,当JSP页面在首次被访问时,Web容器就会将JSP页面转化为Servlet,只需要做一次。如index.jsp在首次被访问时,Web容器会将其翻译成一个index_jsp.java文件,即Servlet代码。 JSP是服务器端的一种基于java语言的网页技术,它是由一些JSP标记,java程序段以及HTML文件组成的结合体,以java语言作为其内置的脚本语言。实质上是通过调用JSP引擎来生成java文件,再将这个java文件编译成类文件,并执行这个类文件以生成动态

      12-05jsp实质是java程序吗

      阅读更多
    • jsp文件就是java文件吗

      jsp文件不是java文件,java是一种语言类似于C语言等的编程语言,而JSP(JavaServer Pages)是一种动态网页技术标准。jsp是一个网页页面,相当于复杂的html。其中可以插入script代码,当然也可以插入java代码。j ava是一个类文件,在java学习初期主要是写java文件的。如果不写页面的话是没有页面效果的。 1、JSP的写的代码,不利于代码重用。JAVA本来就是面向对象的语言,但在JSP中,体现不出来代码重用的优势。如果把一些通用的代码写成JAVA文件,就方便了很多,例

      12-02jsp文件是java文件吗

      阅读更多
    • JavaScript基础教程

      JavaScript基础教程

      本书是经典的JavaScript入门书,以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式

      大小:14 MBJS教程

      点击下载
    • 看透JavaScript:原理、方法与实践

      看透JavaScript:原理、方法与实践

      本书由资深软件开发专家撰写,凝聚其多年开发经验,系统、深入、全面地阐释JavaScript,内容涉及流行的Web开发实践,结合实际案例进行讲解,授人以渔。本书内容并不局限于某个具体功能的

      大小:251 MBJavaScript

      点击下载
    • 同构JavaScript应用开发

      同构JavaScript应用开发

      大小:10.4 MBJavaScript

      点击下载
    • 趣学JavaScript:教孩子学编程

      趣学JavaScript:教孩子学编程

      大小:42.7 MBJavaScript

      点击下载
    • 21天学通HTML+CSS+JavaScript Web开发

      21天学通HTML+CSS+JavaScript Web开发

      21天学通HTML CSS JavaScript Web开发(第7版) 是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本,作者在本书囊括了新的HTML5与CSS3技术,并采用易于理解的步骤式教程讲解了这些技

      大小:104.9 MB前端

      点击下载
    • JavaScript ES6函数式编程入门经典

      JavaScript ES6函数式编程入门经典

      本书使用JavaScript ES6带你学习函数式编程。你将学习柯里化、偏函数、高阶函数以及Monad等概念。具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      大小:46.3 MBJavaScript

      点击下载
    • JavaScript核心技术开发解密

      JavaScript核心技术开发解密

      这本书针对JavaScript 中的核心技术,结合前沿开发实践,全面的讲解与分析JavaScript 的内存、函数、执行上下文、面向对象、模块等重点知识

      大小:68.4 MBJavaScript

      点击下载

    学习笔记