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才算是什么？

Answer 1

这是我在这里苦苦挣扎的func（{a：“ blue”}）部分。

{a: "blue"}是对象文字。结果对象作为参数传递给func(...)。

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

因为只需要一次。

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

makeSound(details);

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

直到我们将其制作为功能更深的代码之前，makeSound还是一无所有吗？

函数声明被悬挂，因此即使该声明稍后出现，它也是一个函数。

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' });

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"})

下一个功能（{a：“蓝色”}）

基本上，您在这里以对象为简写形式调用带对象的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
}