【JS】中一个对象数组按照另一个数组排序

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

需求：排序

数组arr2中每项都是一个对象，对象中age属性 === 数组arr1中的项
将arr2数组根据对象的age值在arr1中的位置排序，

const arr1 = [33, 11, 55, 22, 66];

const arr2 = [{age: 55}, {age: 22}, {age: 11}, {age: 66}, {age: 33}]

排序后的结果为 `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)

需求：首页页面每个小方块顺序按照左侧菜单返回顺序排放

（因为首页小方块是写死的一个数组并不是接口返回。所以还要组装一下数据）

1.找到相同的值进行判断，（这里取两个数组的path来判断）

1.1 从接口中获取到左侧数据，并找到所有菜单的path

 getMenu() {
      const that = this;
      buildMenus().then((res) => {
        // 排序
        let allPath = res.map(r => {
          return r.path
        })
       console.log(allPath ,'allPath )
       //['/lockMaterial', '/order', '/barcodes ', '/log', '/materiel', '/report', '/internet', '/system', '/userManager'] , 'allPath'
      });
    },

打印结果

右侧数据数组

options: [
        {
          id: "kanban",
          path: "/lockMaterial",
          imgURL: require("../assets/images/kanban.png"),
          name: "KANBAN",
          imgSize: "img-css1",
          bgcolor: "box-css1",
          textcolor: "bt-text1",
          url: "/lockMaterial/index",
        },

        {
          id: "lightOrder",
          path: "/order",
          imgURL: require("../assets/images/main5.png"),
          imgSize: "img-css5",
          bgcolor: "box-css5",
          textcolor: "bt-text5",
          url: "/order/workOrder",
        },
        {
          id: "filManger",
          path: "/materiel",
          imgURL: require("../assets/images/main6.png"),
          imgSize: "img-css6",
          bgcolor: "box-css6",
          textcolor: "bt-text6",
          url: "/materiel/componentParts",
        },
        {
          id: "barcode",
          path: "/barcodes ",
          imgURL: require("../assets/images/main7.png"),
          imgSize: "img-css7",
          bgcolor: "box-css7",
          textcolor: "bt-text7",
          url: "/barcodes /barcode",
        },
        {
          id: "lot",
          path: "/internet",
          imgURL: require("../assets/images/main8.png"),
          imgSize: "img-css8",
          bgcolor: "box-css8",
          textcolor: "bt-text8",
          url: "/internet/orderSetting",
        },
        {
          id: "bigdata",
          path: "/log",
          imgURL: require("../assets/images/main10.png"),
          imgSize: "img-css10",
          bgcolor: "box-css10",
          textcolor: "bt-text10",
          url: "/log/taskLog",
        },
 
        {
          id: "system",
          path: "/system",
          imgURL: require("../assets/images/main12.png"),
          imgSize: "img-css12",
          bgcolor: "box-css12",
          textcolor: "bt-text12",
          url: "/system/bunker",
        },
        {
          id: "inOutData",
          path: "/report",
          imgURL: require("../assets/images/table.png"),
          imgSize: "img-css14",
          bgcolor: "box-css14",
          textcolor: "bt-text14",
          url: "/report/inOutData",
        },
        {
          id: "userManager",
          path: "/userManager",
          imgURL: require("../assets/images/user.png"),
          imgSize: "img-css15",
          bgcolor: "box-css23",
          textcolor: "bt-text23",
          url: "/userManager/peoples",
        },
      ],

完整代码

getMenu() {
      const that = this;
      buildMenus().then((res) => {
        // 排序
        let allPath = res.map(r => {
          return r.path
        })
        that.options.sort((prev, next) => {
          const p = allPath.indexOf(prev.path)
          const n = allPath.indexOf(next.path)
          return p - n
        })
        //console.log(allPath, 'allPath')
        // console.log(a, ';that.options')
      });
    },

效果