JavaScript中一个对象数组按照另一个数组排序

需求:排序

  1. const arr1 = [33, 11, 55, 22, 66];
  2. const arr2 = [{age: 55}, {age: 22}, {age: 11}, {age: 66}, {age: 33}]
  3. 数组arr2中每项都是一个对象,对象中age属性 === 数组arr1中的项
  4. 将arr2数组根据对象的age值在arr1中的位置排序, 排序后的结果为 `const arr2 = [ {age: 33},{age: 11}, {age: 55}, {age: 22}, {age: 66}]

步骤:

  • 方法1(需求已知根据对象的age排序)

     const arr1 = [33, 11, 55, 22, 66];
    const arr2 = [{age: 55}, {age: 22}, {age: 11}, {age: 66}, {age: 33}] console.log('排序前arr2 => ', arr2) // 排序 arr2
    arr2.sort((prev, next) => {
    const p = arr1.indexOf(prev.age)
    const n = arr1.indexOf(next.age)
    return p - n
    }) // 排序 arr2(简写)
    arr2.sort((prev, next) => {
    return arr1.indexOf(prev.age) - arr1.indexOf(next.age)
    }) console.log('排序后arr2 => ', arr2)
    console.log(' arr1 => ', arr1)

  • 方法2 (需求未知需要根据对象的哪个属性排序)

      const ageArr = [33, 11, 55, 22, 66];
    const moneyArr = [5000, 3000, 6000, 2000, 9000]
    const objArr = [
    {age: 55, money: 6000},
    {age: 22, money: 3000},
    {age: 11, money: 2000},
    {age: 66, money: 9000},
    {age: 33, money: 5000}
    ] // 1. 将sort排序函数抽离出来
    /**
    * @description 数组sort方法的 sortby(规定排序顺序)
    * @param {String} propName 属性名(数组排序基于的属性)
    * @param {Array} referArr 参照数组(objArr数组排序的参照数组)
    */
    const sortFunc = (propName, referArr) => {
    return (prev, next) => {
    return referArr.indexOf(prev[propName]) - referArr.indexOf(next[propName])
    }
    } // 2. 排序objArr
    objArr.sort(sortFunc('age', ageArr))
    console.log('按age属性排序后的objArr\n', objArr) objArr.sort(sortFunc('money', moneyArr))
    console.log('按money属性排序后的objArr\n', objArr)

JavaScript中一个对象数组按照另一个数组排序的更多相关文章

  1. JavaScript中的数组详解

    JavaScript中的数组 一.数组的定义 数组是值的有序集合,或者说数组都是数据的有序列表. 二.创建数组 [字面量形式] 1.空数组 var arr=[]; 2.带有元素的数组 var arr= ...

  2. JavaScript中对数组和数组API的认识

    JavaScript中对数组和数组API的认识 一.数组概念: 数组是JavaScript中的一类特殊的对象,用一对中括号“[]”表示,用来在单个的变量中存储多个值.在数组中,每个值都有一个对应的不重 ...

  3. JavaScript中的数组创建

    JavaScript中的数组创建 数组是一个包含了对象或原始类型的有序集合.很难想象一个不使用数组的程序会是什么样. 以下是几种操作数组的方式: 初始化数组并设置初始值 通过索引访问数组元素 添加新元 ...

  4. JavaScript中Array(数组) 对象

    JavaScript中Array 对象 JavaScript中创建数组有两种方式 (一)使用直接量表示法: var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建 ...

  5. 前端开发:Javascript中的数组,常用方法解析

    前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...

  6. Javascript中判断数组的正确姿势

    在 Javascript 中,如何判断一个变量是否是数组? 最好的方式是用 ES5 提供的 Array.isArray() 方法(毕竟原生的才是最屌的): var a = [0, 1, 2]; con ...

  7. javascript中的数组扩展(一)

     javascript中的数组扩展(一) 随着学习的深入,发现需要学习的关于数组的内容也越来越多,后面将会慢慢归纳,有的是对前面的强化,有些则是关于前面的补充. 一.数组的本质    数组是按照次序排 ...

  8. JavaScript中对数组的操作

    原文:JavaScript中对数组的操作 一:数组的使用 1.定义:JavaScript中对数组的定义有两种形式.如: .var arr = [12,3,5,8]; .var arr = new Ar ...

  9. JavaScript中一个对象如何继承另外一个对象

    如题,JavaScript中一个对象a如何继承另外一个对象b.即将b中的属性和方法复制到a中去. 面试中遇到了这个问题,当时脑子里的想法是: 1.除了循环遍历复制,还能怎样 2.javascript中 ...

随机推荐

  1. Lucene&Solr框架之第三篇

    1.SolrCore的配置 a)schma.xml文件 b)配置中文分析器 2.配置业务域和批量索引导入 a)配置业务域 b)批量索引导入 c)Solrj复杂查询(用Query页面复杂查询.用程序实现 ...

  2. JavaScript定时器(Timer)

    版权声明:本文为博主原创文章,未经博主允许不得转载.https://www.cnblogs.com/gaoguowen/p/11119088.html 什么是定时器 简单来说就是在一段时间间隔后执行一 ...

  3. Angular(06)- 为什么数据变化,绑定的视图就会自动更新了?

    这里提一点,前端三大框架(Angular,React,Vue)的数据驱动来更新视图的原理,即 MVVM 的实现. 为什么数据发生变化,绑定的视图就会刷新了呢? 以下是我的个人理解,仅供参考: 在还是 ...

  4. angular cli 反向代理实现跨域

    版本: 1.后端实现跨域(php) header("Access-Control-Allow-Origin: *"); // // 响应类型 // header('Access-C ...

  5. Oracle 11g与12c的审计详解

    最近遇到一些脚本诱发的审计相关BUG,感觉有必要重新梳理一下11g与12c的审计模式,于是根据官网修正了一下以前的一篇笔记这里发出来. 一.审计功能的开启: SQL> show paramete ...

  6. MySQL数据库~~~~~索引

    1. 索引 索引在MySQL中也叫"键"或者"key",是存储引擎于快速找到记录的一种数据结构. 索引的数据结构: B+树 B+树性质: 索引字段要尽量小; 索 ...

  7. python-参数化-(1)(手机号码)

    一.生成手机号码,此处并没有写成类或者函数形式,上代码 import random #指定手机号码前三位格式,并随机返回一个区号,关于random参数化的相关部分自行了解type_mobile = [ ...

  8. Java之DateFormat类

    DateFormat类概述 java.text.DateFormat 是日期/时间格式化子类的抽象类,我们通过这个类可以帮我们完成日期和文本之间的转换,也就是可以在Date对象与String对象之间进 ...

  9. 【RTOS】基于V7开发板的RTX5和FreeRTOS带CMSIS-RTOS V2封装层的模板例程下载,AC6和AC5两个版本

    说明: 1.使用MDK的RTE环境开发RTX5和FreeRTOS,简单易移植,统一采用CMSIS-RTOS V2封装层. 2.DTCM是H7里面性能最高的RAM,主频400MHz,跟内核速度一样,所以 ...

  10. Codeforces Round #590 D. Distinct Characters Queries

    CF上给的标签是数据结构.但给的题解里的方法是很巧的暴力,用vector<set>维护每个字母出现的下标,每次修改加下标,擦下标.每次询问对每个字母分别lower_bound查找区间内是否 ...