MDN上 最近发现两个数组的新特性

Array.prototype.group() 和 Array.prototype.groupToMap() 这两个目前都还处于实验阶段，但是相信不久后就能兼容

那么这个特性有什么有用呢？下面就让我们一起来使用一下

Array.prototype.group()

MDN描述：该**group()** 方法根据提供的测试函数返回的字符串值对调用数组的元素进行分组。返回的对象对每个组都有单独的属性，包含具有组中元素的数组。
其实简单来说 就是用来分组

group(function(element, index, array) { /* … */ }, thisArg)

• callbackFn

  对数组中每个元素执行的函数

  使用以下参数调用该函数：

  • element

    数组中当前元素的值。

  • index

    数组中当前元素的索引（位置）。

  • array

    group()被调用的数组。

  回调返回的对象表示当前元素的组。必须可以将此返回的回调值强制转换为字符串（然后将其用作最终返回对象中的属性名称）。

• thisArg 可选的

  用作thisinside的对象callbackFn。

  该参数在箭头函数中被忽略，因为它们有自己的词法范围，将被使用。否则，如果thisArg未指定，则使用this执行范围，或者undefined在严格模式下调用函数。

返回值

一个Object包含所有组的属性，每个组都分配给一个包含相关组元素的数组。该值是一个不继承自 的对象Object.prototype。

实战

对职位进行分组

const EmployeeTable = [
{name: 'liu_ju', age: 24, job: 'web'},
{name: 'huang_si', age: 27, job: 'java'},
{name: 'zhou_zhen', age: 31, job: 'php'},
{name: 'li_you', age: 27, job: 'java'},
{name: 'fu_ren', age: 29, job: 'go'},
] 

const result = EmployeeTable.group(({job})=>job)

/**

result is
{
  web: [
    { name: 'liu_ju', age: 24, job: 'web' },

  ],
    java: [
      { name: 'huang_si', age: 27, job: 'java' },
      { name: 'li_you', age: 27, job: 'java' },

    ],
    php: [
      { name: 'zhou_zhen', age: 31, job: 'php' },
    ],
    go: [
      { name: 'fu_ren', age: 29, job: 'go' },
    ]
}


*/

对年龄进行分组

const EmployeeTable = [
{name: 'liu_ju', age: 24, job: 'web'},
{name: 'huang_si', age: 27, job: 'java'},
{name: 'zhou_zhen', age: 31, job: 'php'},
{name: 'li_you', age: 27, job: 'java'},
{name: 'fu_ren', age: 29, job: 'go'},
]; 
function ageGroup({age}){
    return age > 30 ? senior : advance
}

const reslt2 = EmployeeTable.group(ageGroup)

/**
result2 is
{
  senior: [
    {name: 'zhou_zhen', age: 31, job: 'php'},
  ],
  advance: [
    {name: 'liu_ju', age: 24, job: 'web'},
    {name: 'huang_si', age: 27, job: 'java'},
    {name: 'li_you', age: 27, job: 'java'},
    {name: 'fu_ren', age: 29, job: 'go'},
  ]
}

*/

Array.prototype.groupToMap()

其实跟group差不多，只不多这个转成了map的形式， 有点类似于 object 和 map 的区别，

参数

• callbackFn

  对数组中的每个元素执行的函数。

  使用以下参数调用该函数：

  • element

    数组中的当前元素。

  • index

    数组中当前元素的索引（位置）。

  • array

    groupToMap()被调用的数组。

  回调返回的值（对象或原语）表示当前元素的组。

• thisArg 可选的

  用作thisinside的对象callbackFn。

  该参数在箭头函数中被忽略，因为它们有自己的词法范围，将被使用。否则，如果thisArg未指定，则使用this执行范围，或者undefined在严格模式下调用函数。

返回值

具有每个组的键的Map对象，每个键分配给包含关联组的元素的数组。

例外

• TypeError

  指定的回调函数不可调用。

const array = [1, 2, 3, 4, 5];

const odd  = { odd: true };
const even = { even: true };
array.groupToMap((num, index, array) => {
  return num % 2 === 0 ? even: odd;
});
//  Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }

返回的是一个 Map 结构，它的键名就是分组函数返回的两个对象odd和even。

总结 我个人感觉这两个方法都是很好用的，特别是在我们的项目中需要进行分组的时候， 感觉跟数据库的group有点类似，希望尽快成为标准，到时候大家都可以尝试使用起来