欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

快速获取json键值对的key名和快速根据value分组

程序员文章站 2022-06-12 20:30:22
...

最近项目中后台给返回的数据很复杂,需要各种遍历,组合,其中Object.keys(obj)和通过封装的groupBy这两个方法带给了我极大的便利

Object.keys(obj)

/* Array 对象 */ 
let arr = ["a", "b", "c"];
console.log(Object.keys(arr)); 
// ['0', '1', '2']

/* Object 对象 */ 
let obj = { foo: "bar", baz: 42 }, 
console.log(Object.keys(obj));

// ["foo","baz"]

/* 类数组 对象 */ 
let obj = { 0 : "a", 1 : "b", 2 : "c"};
console.log(Object.keys(obj)); 
// ['0', '1', '2']
复制代码

groupBy方法以及用到的reduce详解

Array.prototype.groupBy = function(prop) {
  return this.reduce(function(groups, item) {
    var val = item[prop];
    groups[val] = groups[val] || [];
    groups[val].push(item);
    return groups;
  }, {});
}

var myList = [
  {time: '12:00', location: 'mall'    },
  {time: '9:00',  location: 'store'   },
  {time: '9:00',  location: 'mall'    },
  {time: '12:00', location: 'store'   },
  {time: '12:00', location: 'market'  },
];

var byTime = myList.groupBy('time');

byTime = {
    '9:00': [
      {time: '9:00',  location: 'store' },
      {time: '9:00',  location: 'mall'  },
    ],
    '12:00': [
      {time: '12:00', location: 'mall'  },
      {time: '12:00', location: 'store' },
      {time: '12:00', location: 'market'}
    ]
}
复制代码

reduce

var total = [0, 1, 2, 3].reduce(function(sum, value) {
  return sum + value;
}, 0);
// total is 6

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]
复制代码

参数

callback 执行数组中每个值的函数,包含四个参数:

accumulator
累加器累加回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(如下所示)。

currentValue
数组中正在处理的元素。

currentIndex
数组中正在处理的当前元素的索引。如果提供了initialValue,则索引号为0,否则为索引为1。

array
调用reduce的数组
复制代码

initialValue [可选] 用作第一个调用 callback的第一个参数的值。如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

Array.prototype.groupBy = function(prop) {
  return this.reduce(function(groups, item) {
    var val = item[prop];    // 取出time 例如 9:00
    groups[val] = groups[val] || [];  // 每一次取出groups中的9:00对象,如果存在(覆盖一次),如果是12:00对象则赋值新数组
    groups[val].push(item);
    return groups;
  }, {});
}
复制代码

转载于:https://juejin.im/post/5a7be542f265da4e8c44f61b