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

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