问答

javascript数组对象排序问题

作者:admin 2021-04-09 我要评论

现在有 arr1 和 arr2 两个数组,以 arr1 字段 顺序 和 值 为准,对 arr2 进行 排序 和 更新 value值 let arr1 = [ { title:"姓名", property:"name", width:120 ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

现在有arr1arr2两个数组,以arr1字段顺序为准,对arr2进行排序更新value值

let arr1 = [
    {
        title:"姓名",
        property:"name",
        width:120
    },
    {
        title:"年龄",
        property:"age", 
        width:120
    },
    {
        title:"角色",
        property:"role",
        width:120
    },
    {
        title:"修改前",
        property:"modify",
        width:120
        children:[
            {
                title:"体重",
                property:"weight",
                width:120
            },
            {
                title:"身高",
                property:"tall",
                width:120
            }
        ]
    }
]
let arr2 = [
   {
        title:"年龄",
        property:"age",
        width:100,
        date:()=>{},
        visible:false,
        id:2
    },
    {
        title:"修改前",
        property:"modify",
        width:100,
        children:[
            {
                title:"身高",
                property:"tall",
                width:100,
                visible:true,
                id:5
            },
            {
                title:"体重",
                property:"weight",
                width:100,
                visible:true,
                id:6
            }
        ]
    },
    {
        title:"姓名",
        property:"name",
        width:100,
        visible:false,
        id:3
    },
    {
        title:"角色",
        property:"role",
        width:100,
        visible:true,
        id:1
    }
]

想要如下效果

let arr3 = [
    {
        title:"姓名",
        property:"name",
        width:120,
        visible:false,
        id:3
    },
    {
        title:"年龄",
        property:"age",
        width:120,
        visible:false,
        id:2,
        renderWidth: 140,
        date:()=>{}
    },
    {
        title:"角色",
        property:"role",
        width:120,
        visible:true,
        id:1
    },
    {
        title:"修改前",
        property:"modify",
        width:120,
        children:[
            {
                title:"体重",
                property:"weight",
                width:120,
                visible:true,
                id:6
            },
            {
                title:"身高",
                property:"tall",
                width:120,
                visible:true,
                id:5
            }
        ]
    }
]
###

这是我试验后的结果


const childOrderMap = new Map();

// 获取到顺序以及 children 的顺序
function getOrder (arr, key) {
  return arr.map(item => {
    if (item.children) {
      childOrderMap.set(item[key], getOrder(item.children, key));
    }
    return item[key];
  });
};

const order = getOrder(arr1, 'property');

function mapOrder(array, order, key) {
  return array.sort((a, b) => {
    const itemA = a[key];
    const itemB = b[key];
    // 对 children 进行排序
    if (a.children) {
      const childOrder = childOrderMap.get(itemA);
      a.children = mapOrder(a.children, childOrder, key);
    }
    if (b.children) {
      const childOrder = childOrderMap.get(itemB);
      b.children = mapOrder(b.children, childOrder, key);
    }
    return order.indexOf(itemA) - order.indexOf(itemB);
  })
}

const result = mapOrder(arr2, order, 'property');
console.log(result);

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器