关于JavaScript中Array.prototype.map回调箭头函数括号用法的疑问

箭头函数的括号写法解析 #

你代码里的箭头函数用()包裹对象字面量，是箭头函数简洁体语法的特殊场景：

• 箭头函数分两种写法：
  • 带大括号的块体语法：必须手动写return才能返回值，比如：

    products.map(product => {
      return { id: product.id, ... }
    })
    

  • 不带大括号的简洁体语法：函数体是单个表达式时，会自动返回该表达式的结果，不用写return。
• 但如果要返回的是对象字面量，直接写{ id: product.id }会被JS误判为函数体的大括号（而非对象），所以必须用()把整个对象包起来，明确告诉JS这是一个要返回的表达式，而非函数代码块。你的代码里({ id: product.id, ... })就是这个逻辑，最终每个遍历到的product都会生成一个包含指定属性的新对象，作为新数组的元素。

Array.prototype.map()的核心逻辑 #

map方法会遍历原数组的每一个元素，对每个元素执行传入的回调函数，再把回调函数的返回值收集起来，生成一个全新的数组返回。你的代码里就是用map把原products数组的每个元素，和productCategoriesObj、productOptionsObj里对应的数据合并成新对象，最终得到joinedProducts数组。

相关语法的官方说明要点 #

箭头函数的简洁体语法中，若要返回对象字面量，必须用圆括号包裹，否则会触发语法错误——因为JS引擎会把对象的大括号识别为函数体的开始标记，而非对象字面量的一部分。这种写法是标准的ES6箭头函数语法，目的是简化返回对象的场景，避免冗余的return和大括号。

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