js 操作List对象集合 常用小方法

1.对List去重,根据对象某个属性去重。
2.对Lisr排序,根据对象某个属性排序。
3.将List对象转为tree结构。
4.对List对象集合,根据id分组,相同的字段累加。
5.对List对象集合过滤。
6.向List集合中添加对象,向数组里面添加元素。
7.指定一个数字,生成对应数字长度的数组。

  1. 对List去重,根据对象某个属性去重
    示例
    在这里插入图片描述
      const list = [
      {id: 1, name: 'aa' , age: 15},
      {id: 2, name: 'bb' , age: 16},
      {id: 2, name: 'cc' , age: 17},
    ];

     arrayUnique = (arr, name) => {
	  const hash = {};
	  return arr.reduce((item, next) => {
	    hash[next[name]] ? '' : hash[next[name]] = true && item.push(next);
	    return item;
	  }, []);
	};
    list = this.arrayUnique(list, 'id');

对数组去重
在这里插入图片描述

   distinct = (a) => {
    return Array.from(new Set([...a]))
  };

const obj = [1,2,2,3,3,4,5];
    console.info('obj', obj);
    console.info('distinct', this.distinct(obj));
  1. 对Lisr排序,根据对象某个属性排序
    示例
    在这里插入图片描述
     const list = [
      {id: 1, name: 'aa' , age: 15},
      {id: 3, name: 'cc' , age: 17},
      {id: 2, name: 'bb' , age: 16},
    ];
    
 compare = (property) => {
    return function (a, b) {
      const value1 = a[property];
      const value2 = b[property];
      return value2 - value1;
    };
  }

     list = list.sort(this.compare('id'))
     倒叙:return value2 - value1;
     正序:return value1 - value2;

对数组排序(按字符而非数值排序)
在这里插入图片描述在这里插入图片描述

    let arr = [10,0,488,880,13.68];
    arr = arr.sort();
    console.info('arr', arr);

按值排序

sortRule = (a,b) => {
    return a-b;
  }

    let arr = [10,0,10,880,13.68,130,1220];
    arr = arr.sort(this.sortRule);

在这里插入图片描述
3. 将List对象转为tree结构
示例
在这里插入图片描述
在这里插入图片描述

     const list = [
      {id: 1, name: '一级' , parentId: 0},
      {id: 2, name: '二级' , parentId: 1},
      {id: 3, name: '三级' , parentId: 2},
    ];

 function buildByRecursive(nodes, rootId = 0) {
  const rootMenus = nodes.filter(m => m.parentId === rootId);
  rootMenus.forEach((node) => {
    findChild(node, nodes);
  });
  return rootMenus;
}

	findChild(node, nodes) {
	  const {id} = node;
	  const filters = nodes.filter(m => m.parentId === id);
	  if (filters.length > 0) {
	    node.children = filters;
	    filters.forEach((item) => {
	      findChild(item, nodes);
	    });
	  }
	}

  1. 对List对象集合,根据id分组,相同的字段累加
    示例
    在这里插入图片描述
   const list = [
      {id: 46, name: "aa", age: 15, startTime: '2019-08-01 00:00:00', endTime: '2019-08-01: 15:23:25'},
      {id: 46, name: "aa", age: 15, startTime: '2019-08-02 00:00:00', endTime: '2019-08-02: 15:23:25'},
      {id: 46, name: "aa", age: 15, startTime: '2019-08-03 00:00:00', endTime: '2019-08-03: 15:23:25'},
      {id: 46, name: "aa", age: 15, startTime: '2019-08-04 00:00:00', endTime: '2019-08-04: 15:23:25'},
      {id: 47, name: "bb", age: 18, startTime: '2019-08-13 00:00:00', endTime: '2019-08-13: 15:23:25'},
      {id: 47, name: "bb", age: 18, startTime: '2019-08-14 00:00:00', endTime: '2019-08-14: 15:23:25'},
    ];

   getUpdateArray = (list) => {
    const obj = _.groupBy(list, (d)=>d.id);
    for (const a in obj) {
      if (obj[a].length > 1) {
        const ar = [];
        var o = {};
        let _i = 0;
        obj[a].forEach(d=>{
            for (const item in d) {
              if (o[item] !== d[item]) {
                if (o[item]) {
                  o[item + (_i)] = d[item];
                } else {
                  o[item] = d[item];
                }
              }
            }
            _i++;
          }
        );
        obj[a] = [o];
      }
    }
    return _.concat.apply([], Object.values(obj));
  };
  1. 对List对象集合过滤,filter()函数相关。
    删除集合中id=1的对象
    在这里插入图片描述
    const list = [
      {id: 1, name: 'aa' , age: 15},
      {id: 2, name: 'bb' , age: 16},
      {id: 3, name: 'cc' , age: 17},
    ];
    const filterList = list.filter(val => val.id !== 1);

取出集合中id=1的对象
在这里插入图片描述

const filterList = list.filter(val => val.id === 1);

6.向List集合中添加对象,push()函数相关。
在这里插入图片描述

 let list = [
      {id: 1, name: 'aa' , age: 15},
      {id: 2, name: 'bb' , age: 16},
      {id: 3, name: 'cc' , age: 17},
    ];
    
    list = list.push({
      id: 4,
      name: 'dd',
      age: 18,
    });

向数组里面添加元素,concat()函数相关。
在这里插入图片描述

    const obj = ['a','b','c'];
    const obj2 = obj.concat('d');

7.指定一个数字,生成对应数字长度的数组。
示例:指定一个数字5,生成一个长度为5的数组。
在这里插入图片描述

      const LEN = 5;
      const arr = [];
      for (let i=0; i < LEN; i++) {
          arr.push(0);
      }
      console.log("arr", arr);

      const arrs = new Array(5).fill('');
      console.log("arrs", arrs);

注意:fill()此方法对浏览器有要求。
https://www.runoob.com/jsref/jsref-fill.html
在这里插入图片描述

  • 4
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值