flatMap中带花括号与单行箭头函数的结果差异疑问

要把下面的data转换成扁平化的姓名数组['John', 'Jane', 'Bob']时，用flatMap处理出现了问题：带花括号的箭头函数写法得不到预期结果，但单行箭头函数却可以。明明两种箭头函数写法应该等价（去掉花括号和return后返回值是隐式的），为啥到flatMap里结果就不一样了？

相关代码 #

const data = [
    [{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }],
    [{ name: 'Bob', age: 40 }]
];

// 写法1：带花括号的箭头函数
let mappedData = data.flatMap(sublist => {
    sublist.map(person => person.name)
    return sublist
})

console.log(mappedData);
// 输出：[{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }, { name: 'Bob', age: 40 }]

// 写法2：单行箭头函数
mappedData = data.flatMap(sublist => 
    sublist.map(person => person.name)
)

console.log(mappedData);
// 输出：['John', 'Jane', 'Bob']

普通箭头函数的等价写法参考 #

// 带花括号+显式return
(a) => {
  return a + 100;
};

// 单行隐式返回
(a) => a + 100;

问题原因 #

核心问题是你在带花括号的箭头函数里return错了值，并不是箭头函数的等价规则失效了：

• 带花括号的箭头函数是完整的函数体，必须显式return你想要作为返回值的内容。你当前的写法里，sublist.map(person => person.name)只是执行了一遍（生成了姓名数组但没用到），最后return sublist把原数组的子元素返回给了flatMap，所以flatMap只是把原嵌套数组展开成了对象数组，不是你要的姓名数组。
• 单行箭头函数没有花括号，会隐式返回箭头后面表达式的结果，也就是subList.map(...)生成的姓名数组，flatMap再把这些姓名数组展开，就得到了扁平化的姓名数组。

修正后的带花括号写法 #

只要把return的内容改成map的结果，两种写法就等价了：

let mappedData = data.flatMap(sublist => {
    return sublist.map(person => person.name)
})

内容的提问来源于stack exchange，提问作者Qiulang