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


    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
      ', objArr)
         
         objArr.sort(sortFunc('money', moneyArr))
         console.log('按money属性排序后的objArr
      ', objArr)
      
  • 相关阅读:
    mysql 基础学习2
    mysql 基础学习1
    awk 截取某段时间的日志
    Kinaba 简单画图
    ELK系统分析Nginx日志并对数据进行可视化展示
    ELK日志分析平台搭建全过程
    python linecache模块读取文件的方法
    python windows 远程执行bat
    PHP常用函数封装
    OneinStack 安装
  • 原文地址:https://www.cnblogs.com/guojiabing/p/10872867.html
Copyright © 2020-2023  润新知