JS 中的 () => {} 和 () => ({}) 的区别是什么？

() => {}和() => ({})猛一看差不多，其实有一点小区别，他俩的返回值不同。前者的返回值是 undefined，后者的返回值是空对象{}。

之所以会有区别，是因为大括号{}多才多艺造成的。它既可以当做代码块的分隔符，又是 object 对象字面量的包裹符号。它的具体作用是什么，视情况而定。

在箭头函数中，函数体既可以是表达式，也可以是代码块。在 MDN 的文档介绍中，箭头函数有如下调用形式：

() => expression
param => expression
(param) => expression
(param1, paramN) => expression
() => {
    statements
}
param => {
    statements
}

在() => {}中，{}表示一个空代码块，没有明确定义的返回值，此时返回值是默认的 undefined。

在() => ({})中，被小括号包裹的({})是一个表达式，表达式的值是空对象字面量。

上面的区别应该不难理解，但是实际开发中，一不小心就会用错。

比如，在 Vue 2 项目中，我有一个单文件组件，它的一个属性是 object 类型，我希望给它一个空对象{}作为默认值，即使父组件没有传值，也不至于因为 undefined 空值报错。于是我写成这样：

<template>
  <div>
    info .name:
    {{ info.name || 'default name'}}
</div>
</template>
<script>
// @filename: FooBar.vue
export default {
  name: 'FooBar',
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

然后，在父组件中这样使用：

<template>
  <FooBar 
</template>

结果，页面报错了，空对象默认值未生效。因为我没有掌握两者区别，我以为属性值是空对象字面量{}，实际的属性值是undefined。

知道问题所在，修改起来就很简单，default: () => {}加一个小括号就好了。

<template>
  <div>
    info .name:
    {{ info.name || 'default name'}}
</div>
</template>
<script>
// @filename: FooBar.vue
export default {
  name: 'FooBar',
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

页面渲染结果如你所愿：

以上关于JS 中的 () => {} 和 () => ({}) 的区别是什么？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。