关于一个分组统计的函数

Question

const countBy = (arr, fn) =>
  arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val, i) => {
    acc[val] = (acc[val] || 0) + 1;
    return acc;
  }, {});
countBy([6.1, 4.2, 6.3], Math.floor); // {4: 1, 6: 2}
countBy(['one', 'two', 'three'], 'length'); // {3: 2, 5: 1}

我的疑问是map里面是怎么运行，arr.map() 主要是这个三元表达式结果是应该是进入fn,而不是后面的reduce求大佬着重解释下这个

Answer 1

const countBy = (arr, fn) =>{
  // 判断 fn 是否为函数,如果是函数 tempFn = fn ,如果不是函数 tempFn = val => val[fn]
  const tempFn = typeof fn === 'function' ? fn : val => val[fn]
  // const tempFn = typeof fn === 'function' ? fn : (val => val[fn])

  const tempArr = arr.map(tempFn)

  // 遍历 tempArr 统计相同的元素个数
  return tempArr.reduce((acc, val, i) => {
    acc[val] = (acc[val] || 0) + 1;
    return acc;
  }, {});
}

countBy([6.1, 4.2, 6.3], Math.floor);
// tempFn = Math.floor
// tempArr = arr.map(tempFn) // tempArr = [6, 4, 6]
// 使用 reduce 统计相同元素个数 {6:2,4:1}

countBy(['one', 'two', 'three'], 'length');
// tempFn = val => val['length']
// tempArr = arr.map(tempFn) // tempArr = [3, 3, 5]
// 使用 reduce 统计相同元素个数 {3:2,5:1}

Answer 2

array.map接收一个函数作为参数，返回值为一个新数组，新数组里面的每一项是原array经过函数处理后的返回值。map里面，fn是函数的话就是fn(array[i])，不是函数就返回array[i].length