JS 对数组的操作(排序、分组、合并，数据格式重构，递归查询)

UserGuan

已于 2025-01-26 11:09:59 修改

阅读量5.4k

点赞数 4

分类专栏： JavaScript类文章标签：算法 javascript

于 2022-11-23 14:11:13 首次发布

本文链接：https://blog.csdn.net/AdminGuan/article/details/127997961

版权

JavaScript类专栏收录该内容

29 篇文章

订阅专栏

JS 数组中根据某个字段进行排序

const arr = [
{ name: "崔喻琪", age: 32 },
{ name: " 王忱景", age: 18 },
{ name: " 房真睿", age: 27 },
{ name: "姬泉孝", age: 20 },
{ name: "余嘉芳", age: 16 },
{ name: "孙平卉", age: 23 },
];
console.log(this.abilitySort(arr, "age", true));

/** 根据传入的字段进行排序
 * @param arr 需要排序的数组
 * @param property 排序的字段
 * @param desc true.升序 false.降序
 * @returns {*} 排好序后的数组
 */
abilitySort(arr, property, desc) {
  return arr.sort(function (a, b) {
    const val1 = a[property];
    const val2 = b[property];
    if (desc) {
      return val1 - val2; // 升序排列
    } else {
      return val2 - val1; // 降序排列
    }
  });
},

JS 数组中根据某个字段进行分组

const arr = [
{ id: "1001", name: "崔喻琪", age: 32 },
{ id: "1001", name: " 王忱景", age: 18 },
{ id: "1001", name: " 房真睿", age: 27 },
{ id: "1002", name: "姬泉孝", age: 20 },
{ id: "1002", name: "余嘉芳", age: 16 },
{ id: "1003", name: "孙平卉", age: 23 },
];
console.log(this.abilitySort(arr, "id"));

/** 根据传入的字段进行分组
 * @param arr 需要分组的数组
 * @param property 分组的字段
 * @returns {*[]} 已分好组的数组
 */
abilitySort(arr, property) {
  let map = {};
  for (let i = 0; i < arr.length; i++) {
    const ai = arr[i];
    if (!map[ai[property]]) map[ai[property]] = [ai];
    else map[ai[property]].push(ai);
  }
  let res = [];
  Object.keys(map).forEach((key) => {
    res.push({ [property]: key, data: map[key] });
  });
  return res;
},

JS 将数组分为 n 个一组

const list = [
{ id: 1, name: '宰父谷枫' },
{ id: 2, name: '买孟' },
{ id: 3, name: '疏学林' },
{ id: 4, name: '次如风' },
{ id: 5, name: '巧紫雪' }
];
console.log(this.datumGroup(list, 3));

/** 将数组分为 n 个一组
 * @param data 需要操作的数组数据
 * @param n 多少个为一组(默认4个为一组)
 * @returns {*[]} 已分好组的数组
 */
datumGroup(data, n = 4) {
  let newArr = [];
  for (let i = 0, j = data.length; i < j; i += n) {
    newArr.push(data.slice(i, i + n));
  }
  return newArr;
},

JS 数组根据特定规则进行排序

const list = [

{ id: 1, name: '张三' },

{ id: 2, name: '邬如风' },

{ id: 3, name: '童雯华' },

{ id: 4, name: '续馨香' },

{ id: 5, name: '骑萌' },

{ id: 6, name: '平慕雁' }

];

const sequence = [4, 5, 6, 1, 2, 3]; // 排序规则

console.log(this.specificSort(list, sequence, 'id'));

/** 根据指定的字段与排序规则进行数组排序
 * @param arr 需要排序的数组
 * @param rule 指定排序规则
 * @param property 排序的字段
 * @returns {*} 排好序后的数组
 */
specificSort(arr, rule, property) {
  return arr.sort((a, b) => {
    return rule.indexOf(a[property]) - rule.indexOf(b[property]);
  });
},

JS 数组对象合并，并删除重复项

const arr1 = [{ id: "1", value: 10 }, { id: "2", value: 20 }];
const arr2 = [{ id: "1", value: 10 }, { id: "2", value: 20 }, { id: "3", value: 30 }];
console.log(this.arrObjMergeDelRepeat(arr1, arr2)); // [{"id":"1","value":10},{"id":"2","value":20},{"id":"3","value":30}]

/** 数组对象合并，并删除重复项
 * @param {Object} arr1 需要合并的数组1
 * @param {Object} arr2 需要合并的数组2
 * @returns {*} 已合并且删除重复项的数组
 */
arrObjMergeDelRepeat(arr1, arr2) {
  const ids = new Set(arr1.map(({ id }) => id));
  return [...arr1, ...arr2.filter(({ id }) => !ids.has(id))];
},

JS 数组根据传入的字段重构为嵌套结构

const list = [
{ name: 'test-demo-index', path: 'test/demo/index.html' },
{ name: 'test-demo-list', path: 'test/demo/list.html' },
{ name: 'test-demo1-index', path: 'test/demo1/index.html' },
{ name: 'test1-demo-index', path: 'test1/demo/index.html' }
];
console.log(this.buildNestedStructure(list, 'path'));

/** 数组根据传入的字段重构为嵌套结构
 * @param arr 需要重构的数组
 * @param property 指定重构的字段
 * @param nodeName 嵌套结构的节点名称，默认：label
 * @param childName 嵌套结构的子节点名称，默认：children
 * @returns {*[]} 重构后的数组
 */
buildNestedStructure(arr, property, nodeName = 'label', childName = 'children') {
  const result = []
  arr.forEach(item => {
    const parts = item[property].split('/')
    let curLevel = result
    parts.forEach(part => {
      const existingNode = curLevel.find(node => node[nodeName] === part)
      if (!existingNode) {
        const newNode = { [nodeName]: part, [childName]: [], ...item }
        curLevel.push(newNode)
        curLevel = newNode[childName]
      } else {
        curLevel = existingNode[childName]
      }
    })
  })
  return result
},

JS 数组根据传入的字段重构为阶梯结构

const list = [
{ name: 'test-demo-index', path: 'test/demo/index.html' },
{ name: 'test-demo-list', path: 'test/demo/list.html' },
{ name: 'test-demo1-index', path: 'test/demo1/index.html' },
{ name: 'test1-demo-index', path: 'test1/demo/index.html' }
];
console.log(this.buildLadderStructure(list, 'path'));

/** 数组根据传入的字段重构为阶梯结构
 * @param arr 需要重构的数组
 * @param property 指定重构的字段
 * @param nodeName 节点名称，默认：label
 * @returns {*[]} 重构后的数组
 */
buildLadderStructure(arr, property, nodeName = 'label') {
  const result = []
  const uniqueVal = new Set()
  arr.forEach(item => {
    const parts = item[property].split('/')
    let curValue = ''
    parts.forEach(part => {
      curValue = curValue ? `${curValue}/${part}` : part
      // 添加到输出数组和 Set 中(如果尚未存在)
      if (!uniqueVal.has(curValue)) {
        uniqueVal.add(curValue)
        result.push({ [nodeName]: curValue, ...item })
      }
    })
  })
  return result
},

JS 根据传入的值对数组进行递归查询

const list = [
  {
    'label': 'test',
    'pathLevel': 'test',
    'rank': 1,
    'rankTotal': 3,
    'children': [
      {
        'label': 'demo',
        'pathLevel': 'test/demo',
        'rank': 2,
        'rankTotal': 3,
        'children': [
          {
            'label': 'index.html',
            'pathLevel': 'test/demo/index.html',
            'rank': 3,
            'rankTotal': 3,
            'children': [],
            'name': 'test-demo-index',
            'path': 'test/demo/index.html'
          },
          {
            'label': 'list.html',
            'pathLevel': 'test/demo/list.html',
            'rank': 3,
            'rankTotal': 3,
            'children': [],
            'name': 'test-demo-list',
            'path': 'test/demo/list.html'
          }
        ],
        'name': 'test-demo-index',
        'path': 'test/demo/index.html'
      },
      {
        'label': 'demo1',
        'pathLevel': 'test/demo1',
        'rank': 2,
        'rankTotal': 3,
        'children': [
          {
            'label': 'index.html',
            'pathLevel': 'test/demo1/index.html',
            'rank': 3,
            'rankTotal': 3,
            'children': [],
            'name': 'test-demo1-index',
            'path': 'test/demo1/index.html'
          }
        ],
        'name': 'test-demo1-index',
        'path': 'test/demo1/index.html'
      }
    ],
    'name': 'test-demo-index',
    'path': 'test/demo/index.html'
  },
  {
    'label': 'test1',
    'pathLevel': 'test1',
    'rank': 1,
    'rankTotal': 3,
    'children': [
      {
        'label': 'demo',
        'pathLevel': 'test1/demo',
        'rank': 2,
        'rankTotal': 3,
        'children': [
          {
            'label': 'index.html',
            'pathLevel': 'test1/demo/index.html',
            'rank': 3,
            'rankTotal': 3,
            'children': [],
            'name': 'test1-demo-index',
            'path': 'test1/demo/index.html'
          }
        ],
        'name': 'test1-demo-index',
        'path': 'test1/demo/index.html'
      }
    ],
    'name': 'test1-demo-index',
    'path': 'test1/demo/index.html'
  }
];

console.log(this.recursiveFindArr(list, 'label', 'demo'));

/** 根据传入的值对数组进行递归查询
 * @param arr 需要查询的数组
 * @param property 指定查询的字段，例如：name
 * @param target 需要查询的值，例如：张三
 * @param childName 子节点名称，默认：children
 * @returns {*|null} 查询结果
 */
recursiveFindArr(arr, property, target, childName = 'children') {
  for (const item of arr) {
    if (item[property] === target) return item
    if (item[childName] && item[childName].length > 0) {
      const result = this.recursiveFindArr(item[childName], property, target, childName)
      if (result) return result
    }
  }
  return null
},

JS 根据传入的字段构建菜单树

const arr = [
{ 'id': '0001', 'pid': '0000', 'name': '客户管理' },
{ 'id': '0002', 'pid': '0000', 'name': '审批管理' },
{ 'id': '0003', 'pid': '0000', 'name': '用户管理' },
{ 'id': '0004', 'pid': '0002', 'name': '审批处理' },
{ 'id': '0005', 'pid': '0002', 'name': '审批申请' },
{ 'id': '0006', 'pid': '0004', 'name': '新增任务审批' },
{ 'id': '0007', 'pid': '0004', 'name': '结案审批' },
{ 'id': '0008', 'pid': '0005', 'name': '新增任务审批' },
{ 'id': '0009', 'pid': '0005', 'name': '结案审批' },
{ 'id': '0010', 'pid': '0003', 'name': '用户查询' }
];

console.log(this.buildMenuTree(res.data.content, 'pid', 'id', '0000'));

/** 根据传入的字段构建菜单树
 * @param arr 需要构建菜单树的数组
 * @param property 指定字段，即根据此字段与父节点的某个字段进行关联
 * @param relationField 与指定字段关联的相关字段，即子节点与父节点相关联的字段，如：id 与 pid
 * @param topDefVal 顶级类目的默认值，即一级菜单的默认值
 * @param subOpt 子选项的属性值，默认：children
 * @returns {*[]} 已构建好的菜单树
 */
buildMenuTree(arr, property, relationField, topDefVal, subOpt = 'children') {
  // 创建一个 id -> node 的映射
  const map = new Map()
  arr.forEach(item => {
    item[subOpt] = []
    map.set(item[relationField], item)
  })
  // 构建树形结构
  const tree = []
  arr.forEach(item => {
    if (item[property] === topDefVal) {
      tree.push(item) // 顶层节点
    } else {
      const parent = map.get(item[property])
      if (parent) {
        parent[subOpt].push(item) // 添加为父节点的子节点
      }
    }
  })
  // 返回结果
  return tree
},

当 subOpt 为空数组时，将其置为 null 值

/** 根据传入的字段构建菜单树
 * @param arr 需要构建菜单树的数组
 * @param property 指定字段，即根据此字段与父节点的某个字段进行关联
 * @param relationField 与指定字段关联的相关字段，即子节点与父节点相关联的字段，如：id 与 pid
 * @param topDefVal 顶级类目的默认值，即一级菜单的默认值
 * @param subOpt 子选项的属性值，默认：children
 * @returns {*[]} 已构建好的菜单树
 */
buildMenuTree(arr, property, relationField, topDefVal, subOpt = 'children') {
  // 创建一个 id -> node 的映射
  const map = new Map()
  arr.forEach(item => {
    item[subOpt] = []
    map.set(item[relationField], item)
  })
  // 构建树形结构
  const tree = []
  arr.forEach(item => {
    if (item[property] === topDefVal) {
      tree.push(item) // 顶层节点
    } else {
      const parent = map.get(item[property])
      if (parent) {
        parent[subOpt].push(item) // 添加为父节点的子节点
      }
    }
  })
  // 遍历所有节点，若 subOpt 为空数组则将其置为 null 值
  function processChildren(nodes) {
    nodes.forEach(node => {
      if (node[subOpt].length === 0) {
        node[subOpt] = null
      } else {
        processChildren(node[subOpt])
      }
    })
  }
  processChildren(tree)
  // 返回结果
  return tree
},

JS 对数组 2 中与数组 1 相同的值进行标记

const arr1 = [
{ id: '0001', pid: '0000', name: '客户管理' },
{ id: '0002', pid: '0000', name: '审批管理' },
{ id: '0003', pid: '0000', name: '用户管理' },
{ id: '0004', pid: '0002', name: '审批处理' },
{ id: '0005', pid: '0002', name: '审批申请' },
{ id: '0006', pid: '0004', name: '新增任务审批' },
{ id: '0007', pid: '0004', name: '结案审批' },
{ id: '0008', pid: '0005', name: '新增任务审批' },
{ id: '0009', pid: '0005', name: '结案审批' },
{ id: '0010', pid: '0003', name: '用户查询' }
];

const arr2 = [
{ id: '0001', pid: '0000', name: '客户管理' },
{ id: '0002', pid: '0000', name: '审批管理' },
{ id: '0003', pid: '0000', name: '用户管理' }
];

console.log(this.markExistence(arr1, arr2, { isExist: true }));

/** JS 对数组 2 中与数组 1 相同的值进行标记
 * 即：判断 arr2 数组的值存于 arr1 数组中，若存在，则为 arr1 数组对应元素添加指定对象
 * 非破坏性修改，即该方法不会改变原始数组，而是返回一个新的数组
 * @param arr1 基础数组，即参照对象
 * @param arr2 待检测的数组
 * @param appendObj 追加的指定对象
 * @returns {*[]} 结果集
 */
markExistence(arr1 = [], arr2 = [], appendObj = {}) {
  // 提取 arr2 中的 id 集合
  const arr2Ids = new Set(arr2.map(item => item.id))
  // 生成新数组，不修改原始 arr1
  return arr1.map(item => ({
    ...item,
    ...(arr2Ids.has(item.id) && appendObj) // 如果存在，则添加指定对象
  }))
},