JS对数组对象进行一些操作的工具方法,如排序、树状结构转化、查找父级属性等

1、为对象数组排序

一个由对象组成的数组,对数组根据对象的某一个属性进行排序处理

/**
 * 为对象数组进行排序
 * @param {Object} objArr 需要排序的对象数组
 * @param {String} objParamName 对象中需要排序的属性名字(字符串类型)
 * @param {String} type 'sb'为从小到大排序, 'bs'为从大到小排序
 */
function objSort(objArr, objParamName, type) {
    switch (type) {
        case 'sb':
            objArr.sort((obj1, obj2) => {
                var value1 = obj1[`${objParamName}`]
                var value2 = obj2[`${objParamName}`]
                if (value1 < value2) return -1 //想要value1 < value2的话就返回-1
                else if (value1 > value2) return 1 //想要value1 > value2的话就返回1
                else return 0
            })
            break;
        case 'bs':
            objArr.sort((obj1, obj2) => {
                var value1 = obj1[`${objParamName}`]
                var value2 = obj2[`${objParamName}`]
                if (value1 < value2) return 1 //想要value1 < value2的话就返回-1
                else if (value1 > value2) return -1 //想要value1 > value2的话就返回1
                else return 0
            })
            break;
    }
}

2、扁平结构数组转化成树状结构数组

在展现一些场景,如多级菜单、多级部门等,通常需要树状结构的数据进行展示,要是后端返回的数据是扁平化结构的,格式如下

let array = [
	{id: '1', parentId: null, ...},
	{id: '2', parentId: null, ...},
	{id: '1_1', parentId: '1', ...},
	{id: '2_1', parentId: '2', ...},
	{id: '2_2', parentId: '2', ...},
	......
]

需要经过处理转化成树状结构,格式如下

[
	{id: '1', parentId: null, children: [{id: '1_1', parentId: '1'}]},
	{id: '2', parentId: null, children: [{id: '2_1', parentId: '2'}, {id: '2_2', parentId: '2']
]
/**
 * 扁平数据结构转化成树状数据结构
 * @param {Array} originList 要转换成树状结构的扁平结构数组
 * @param {Object} options 配置
 * {key: 'id', parentKey: 'parentId', children: 'children'} 字段名称的配置项
 * key为当前节点的字段名,parentKey为父节点的字段名,children为子节点数组的字段名
 */
function transformTree(originList, options = {}) {
    const {
        key = 'id',
        parentKey = 'parentId',
        childrenKey = 'children'
    } = options
    function transformTree(list) {
        let tree = [];
        list.forEach((item, index) => {
            if (!item[parentKey]) {
                const temp = queryChildren(item, list);
                tree.push(temp);
            }
        });
        return tree;
    }
    function queryChildren(parent, list) {
        const children = [];
        list.forEach((item, index) => {
            if (parent[key] == item[parentKey]) {
                const temp = queryChildren(item, list);
                children.push(temp);
            }
        });
        if (children.length) parent[childrenKey] = children;
        return parent;
    }
    return transformTree(originList)
}

// 使用
let treeList = transformTree(array)
console.log(treeList)

3、Array[Object]中根据Object的某一属性(如id)查找父级该属性的值

现在有一个数组,数据如下,查找id是2_1_1的所有父级id

let array = [{
    id: '1', children: [
        {
            id: '1_1', children: [
                { id: '1_1_1', children: [{ id: '1_1_1_1' }] }
            ]
        }
    ]
},
{
    id: '2', children: [
        {
            id: '2_1', children: [
                { id: '2_1_1' },
                { id: '2_1_2' },
                { id: '2_1_3' },
            ]
        },
        { id: '2_2' },
        { id: '2_3' },
    ]
}]
/**
 * 根据多层对象中某一层对象的id获取父层的id直至顶层
 * @param {Array} data 要查找的对象
 * @param {String} value 目标数据
 * @param {String} paramName 目标数据字段名
 * @returns {Array} 返回自身包括所有父层该字段名的值的数组
 */
function jsonQueryParentByChild(data, value, paramName, arr = []) {
    data.find(item => {
        if (item[paramName] == value) {
            arr.unshift(item[paramName]);
            return true;
        } else if (item.children && item.children.length) {
            arr = util.jsonQueryParentByChild(
                item.children,
                value,
                paramName,
                arr
            );
            if (arr.length) {
                arr.unshift(item.id);
                return true;
            } else return false;
        }
        return false;
    });
    return arr;
}

// 使用
let result = jsonQueryParentByChild(array, '2_1_1', 'id')
console.log(result) // ['2', '2_1', '2_1_1']

4、判断两个对象的数据是否完全相同

/**
 * 判断两个对象的数据是否相同
 * @param {Object} x 对象一
 * @param {Object} y 对象二
 * @returns Boolean 相同则返回true,反之返回false
 */
function objEquals(x, y) {
    let f1 = x instanceof Object;
    let f2 = y instanceof Object;
    if (!f1 || !f2) {
        return x === y;
    }
    if (Object.keys(x).length !== Object.keys(y).length) {
        return false;
    }
    for (let p in x) {
        let a = x[p] instanceof Object;
        let b = y[p] instanceof Object;
        if (a && b) {
            util.objEquals(x[p], y[p]);
        } else if (x[p] != y[p]) {
            return false;
        }
    }
    return true;
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值