美文网首页
2020-12-17 JavaScript中一个对象数组按照另一

2020-12-17 JavaScript中一个对象数组按照另一

作者: 半眼鱼 | 来源:发表于2020-12-17 10:52 被阅读0次

需求:排序

  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}]


    image

步骤:

  • 方法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)
    
    
    image
  • 方法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)
    

相关文章

  • 2020-12-17 JavaScript中一个对象数组按照另一

    需求:排序 const arr1 = [33, 11, 55, 22, 66]; const arr2 = [{a...

  • JavaScript Array对象

    JavaScript Array对象用于创建数组,操作已有的数组,数组是引用对象,在内存指针指向另一个内存空间。数...

  • javaScript对象

    javaScript并不是纯粹的面向对象的语言,在javaScript中一切东西都是对象,如字符串,数字,数组,日...

  • JavaScript(Day02)

    1、JavaScript数组 2、JavaScript对象的使用 3、JavaScript内置对象

  • js的数组、对象、map、set存储数据

    数组 js数组不区分元素类型,数组的使用,请参考我的另一篇文章javascript Array的基本用法 对象(经...

  • 类数组对象与arguments

    原文出处 JavaScript深入之类数组对象与arguments 类数组对象 所谓的类数组对象: 拥有一个 le...

  • JavaScript易混点

    数组与对象 数组 JavaScript数组就是对象,每个数组都有一个length属性。 区别与使用 数组使用整数作...

  • JS基础整理 - 2

    1 JavaScript Array(数组)对象 ![Array(数组)对象.png](http://upload...

  • 理解javascript类数组

    什么是类数组 javascript中一些看起来像却不是数组的对象,叫做类数组。也就是说,为一些常规对象增加一些属性...

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

    场景下拉列表有4个选项用户按照先后排序后保存[2, 4, 1, 3]保存完后,按照顺序进行排序 思路,两个数组,排...

网友评论

      本文标题:2020-12-17 JavaScript中一个对象数组按照另一

      本文链接:https://www.haomeiwen.com/subject/qqaagktx.html