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 是什么都没有，直到我们把它变成一个函数，再往下看？

Answer 1

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

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

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 2

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

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

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

因为它只需要一次。

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

makeSound(details);

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

在我们把它变成一个函数之前，makeSound 什么都不是？

函数声明是提升，因此即使声明稍后出现，它也是一个函数。

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