如何理解map中的三目运算表达式

Question

我的代码：

const countBy = (arr, fn) => arr.map(val => (typeof fn === 'function' ? fn(val) : val[fn]))

高手的代码：

const countBy = (arr, fn) => arr.map(typeof fn === 'function' ? fn : val => val[fn])

测试代码：

console.log(countBy([1, 2, 3, 4, 5, 6], a => a % 3))
console.log(countBy([6.8, 4.2, 6.1], Math.floor))
console.log(countBy(['one', 'two', 'three'], 'length'))

发现居然是等效的！那高手的typeof fn === 'function' ? fn : val => val[fn] 这句怎么理解？如果fn是函数，val[fn]有意义吗？箭头函数前面不传入val,箭头后面居然也能用val!

Answer 1

他这是把你里面的判断给提到外面来了
map接收一个函数 用三目先判断fn的类型
是函数就可以直接用，参数是默认传入的
不是函数就包裹一层

Answer 2

不要把简单的问题想成复杂化。

map接受一个函数，你传具名函数也好，或者平时习惯性写的匿名箭头函数也好；本质上就是在循环中给每个可迭代元素进行函数调用，传入三个参数。

我觉得你把每个过程都保存到一个变量中就很好理解了，就像代码简洁是一个优点，但过度简洁反而会破坏代码可读性。

const countBy = (arr, fn) => {
    // 如果 fn 是一个函数，那就使用这个函数。
    // 不是的话设置一个默认函数，就认为数组是一个对象数组，fn 也就是对象的 key
    // 返回对象数组中的指定 key 值
    const callback = typeof fn === 'function' ? fn : val => val[fn] 
    return arr.map(callback);
}

Answer 3

typeof fn === 'function' ?       fn     :  val => val[fn]
^---条件---------------^   ^----true---^   ^----false----^

如果 fn 是函数，那么 map 的参数是 fn
否则，map 的参数是一个箭头函数 val => val[fn]