ES6 JavaScript中的括号

Question

我急需有人为我提供一些简洁明了的信息，告诉我在JS ES6中应该在什么时候使用哪个括号以及为什么要这样做。我知道基础知识，但当我们开始讨论箭头语法时，我就会迷失方向，然后就看不懂为什么我们要在括号内包裹大括号等等...我感觉为了真正理解我们布局的原因，我需要先了解{}和()的所有用例。

例如，我真的很难理解这样的语法：

const func = (obj) => {
console.log(obj.a)
}

func({a: "blue"}) 

"我在这里遇到了困难的是 func({a: "blue"}) 这部分。"

"以下是另一个例子："

makeSound({
    a: "bark",
    b: 2,
    c: "hiss"
})

function makeSound(options)
console.log("the" + options.a + "was a " + options.c)

我不知道该如何理解这个。我们在makeSound函数中做了什么？我可以看到我们正在创建一个对象，但是为什么我们不只是用标准的let makeSound = {}声明它呢？我们到底在这里做了什么？直到在代码中进一步将其转换为函数之前，makeSound是否什么都没有？

- Maximilian

---

这是一个以对象为参数的函数。使用函数的好处在于您可以在需要时实例化它，但变量是在运行时创建的。 - arunmmanoharan

第二个片段不完整，因为makeSound函数未定义。 - Silvio Biasiol

Answer 1

我在这里挣扎的是 func({a: "blue"}) 部分。

{a: "blue"} 是一个对象字面量，其结果对象作为参数传递给 func(...)。

我可以看到我们正在创建一个对象，但为什么不使用标准的 let makeSound = {} 将其声明为变量呢？

因为它只需要 一次。

let details = {
    a: "bark",
    b: 2,
    c: "hiss"
};

makeSound(details);

...会得到相同的结果，但现在你有了一个不再需要的details变量。

直到我们在代码下面将其转换为函数，makeSound才是无效的吗？

函数声明被提升，因此它是一个函数，即使声明出现在稍后的位置。

- Quentin

---

谢谢您的回答。绝对有所帮助。我一直在练习析构，但我注意到当使用箭头语法声明函数时，我不再拥有提升功能。为什么会这样呢？ - Maximilian

函数声明是被托管的。箭头函数不是函数声明，就像传统的函数表达式一样，它们在分配时被赋值。 - Quentin

Answer 2

我理解您的困惑，因为确实有很多花括号！

首先是对象。 您可以像这样使用方括号来定义一个对象。

const obj = { a: 1 };

但是您也可以内联定义一个对象，直接在函数参数列表中使用像这样的对象文字：

myFunc({ a: 1 }); // same as myFunc(obj);

接下来介绍箭头函数。

和普通函数一样，箭头函数的函数体也是用花括号来定义的。如果你想从函数中返回一个值，就需要使用return关键字：

const myFunc = (arg) => { return 'hello ' + arg; }

然而，箭头函数也支持隐式返回，如果省略花括号，返回值将是隐式的：

const myFunc = (arg) => 'hello ' + arg;

现在，您也可以使用大括号进行解构赋值。例如：

const { a } = { a: 1 };

这里的解构赋值发生在等号=左侧，它允许您从对象中提取属性并将其分配给变量。

您还可以在函数参数中使用对象解构，以访问特定属性，例如：

const myFunc = ({ name }) => 'Hello ' + name;

这相当于：

const myFunc = (person) => 'Hello ' + person.name;

您可以使用对象字面量来调用此函数，例如：

myFunc({ name: 'Jo' });

- jo_va

---

正是我需要的。当你像这样全部铺开时，它似乎如此清晰明了和显而易见。谢谢！ - Maximilian

Answer 3

const func = (obj) => {
    console.log(obj.a)
}

(obj) 基本上是在说 func 函数需要将 obj 作为参数。

如果您只传递一个参数，也可以这样写；

const func = obj => {
    console.log(obj.a)
}

括号的作用基本上是让您能够添加多个参数。就像下面这样;

const func = (obj1, obj2) => {
console.log(obj1.a, obj2.a)
}

func({a: "blue"}) 

Next func({a: "blue"})

这里你正在使用对象作为参数来调用func函数的简写形式。

因此，你也可以像这样调用它：

const argument = {a: "blue"}

func(argument)

另外，你可能会看到很多这种代码

const func = (obj1, obj2) => console.log(obj1.a, obj2.a)

注意，现在console.log()周围没有花括号了。当函数只有一行时，可以省略花括号。但是当函数有多行时，需要使用花括号将函数体包裹起来，如下所示：

func = (obj) => {
   if (obj.a === "blue") {
      return true
   } 
   return false
}

- Nur Ketene