快速獲取json鍵值對的key名和快速根據value分組

數字字母下劃線發表於2018-02-08
原文網址 : https://juejin.im/post/5a7be542f265da4e8c44f61b
JSON

最近專案中後臺給返回的資料很複雜，需要各種遍歷，組合，其中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;
  }, {});
}
複製程式碼

相關文章