ES6 JavaScript中{}与()的使用场景及语法困惑咨询

咱们先把{}和()的核心使用场景拆解清楚，再逐个解决你遇到的困惑点。

一、{}的三大核心场景 #

1. 对象字面量：直接创建对象值 #

这是你最困惑的点之一——当{}不是跟在let/const/var后面时，它不是“声明对象变量”，而是直接生成一个临时对象值，可以直接作为参数传递、赋值给变量，或者作为返回值。比如：

// 赋值给变量（标准声明）
let myObj = {a: "blue"};
// 直接作为函数参数（就是你例子里的用法）
func({a: "blue"});

后者相当于先创建对象，再传给函数，只是省略了中间变量而已。

2. 代码块：包裹执行语句 #

{}用来包裹一组需要执行的代码，比如函数体、if/else分支、循环体：

// 函数体的代码块
function makeSound(options) {
  // 这里的{}就是包裹函数执行语句的代码块
  console.log("the " + options.a + " was a " + options.c);
}
// 箭头函数的代码块
const func = (obj) => { console.log(obj.a) };

如果箭头函数里只有一条返回语句，你可以省略{}，比如const getA = (obj) => obj.a，这时候箭头后面直接跟返回的表达式。

3. 解构赋值：快速提取对象/数组的属性 #

{}还用来从对象中提取指定属性，比如：

const obj = {a: "blue", b: "red"};
const {a} = obj; // 等价于 const a = obj.a;

二、()的四大核心场景 #

1. 函数参数列表：定义函数时声明形参 #

不管是普通函数还是箭头函数，()用来包裹形参：

// 普通函数的参数列表
function makeSound(options) {}
// 箭头函数的参数列表（单个参数可省略()，多个必须加）
const func = obj => { console.log(obj.a) }; // 等价于 (obj) => ...
const add = (a, b) => a + b;

2. 函数调用运算符：执行函数 #

当你在函数引用后面加()时，就是在调用这个函数，()里的内容是传递给函数的实参：

// 调用func函数，把{a: "blue"}这个对象作为实参传进去
func({a: "blue"});

3. 表达式分组：改变优先级或明确语义 #

最常见的就是箭头函数里返回对象时，用()包裹对象字面量——因为如果直接写() => {a:1}，JS会把{}当成代码块，a:1会被解析成标签语句（不是对象属性），所以必须用()告诉JS这是一个要返回的对象表达式：

// 错误写法：返回undefined（因为{}是代码块，里面的a:1是标签）
const getObj = () => {a: 1};
// 正确写法：返回{a:1}这个对象
const getObj = () => ({a: 1});

4. 立即执行函数表达式（IIFE） #

虽然现在用得少，但也是()的场景：(function() {})()，用来创建独立作用域。

三、针对你例子的逐个解析 #

例子1：箭头函数与函数传参 #

const func = (obj) => { console.log(obj.a) };
func({a: "blue"});

• 第一行：定义了一个箭头函数func，(obj)是形参，{ console.log(obj.a) }是函数体（因为要执行console.log语句，所以用{}包裹）。
• 第二行：func是函数引用，后面的()是调用它，{a: "blue"}是临时创建的对象，作为实参传给func的obj形参——这里不需要let，因为我们不是要声明变量，只是生成一个对象值直接传递。

例子2：函数提升与对象参数 #

makeSound({ a: "bark", b: 2, c: "hiss" });
function makeSound(options) {
  console.log("the " + options.a + " was a " + options.c);
}

• 为什么调用在定义前面还能生效？因为JavaScript的函数提升规则：用function xxx() {}声明的函数，会被提升到当前作用域的最顶部，所以在调用时makeSound已经存在了。
• makeSound({...})里的{...}同样是临时对象，作为实参传给makeSound的options形参——这里绝对不能写成let makeSound = {}，因为我们要调用的是名为makeSound的函数，而不是给makeSound变量赋值对象。

四、关键总结 #

• 区分“对象字面量”和“变量声明对象”：{a:1}是对象值，let x = {a:1}是把这个值赋值给变量x；
• 箭头函数里的{}是代码块，要返回对象必须用()包裹；
• 函数调用时的()是执行函数，里面的内容是实参，可以直接传对象字面量；
• 函数声明会被提升，所以可以先调用后定义。

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