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

It's the func({a: "blue"}) part I'm struggling with here.

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

I can see we're making an object but then why aren't we just declaring it as a variable with standard let makeSound = {}.

因为只需要一次。

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

makeSound(details);

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

Is makeSound nothing untill we make it into a function further down the code?

函数声明被提升所以它是一个函数，即使声明稍后出现。

Answer 2

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

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

const obj = { a: 1 };

但您也可以直接在函数参数列表中定义内联对象，使用如下对象字面量：

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

那么你有箭头函数。

它们的主体也使用大括号定义，就像常规函数一样，在这种情况下，如果您想 return 来自函数的值，则必须使用 return 关键字：

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

但是，箭头函数也支持隐式return，如果省略花括号，return的值将是隐式的：

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

ES6 中的括号 JavaScript

Brackets in ES6 JavaScript

javascript

brackets

braces