问题
I've seen JavaScript code such as this:
let a = () => ({ id: 'abc', name: 'xyz' })
What do the parentheses ( … ) wrapping the object refer to in this instance? Is it a shorthand for return?
回答1:
No. Those parentheses produce an object literal. Arrow functions have many syntaxes, one of which is:
( … ) => expression
This will implicitly return an expression, for example:
() => 1 + 1
This function will implicitly return 1 + 1, which is 2. Another one is this:
( … ) => { … }
This will create a block to house multiple statements if you don't want to implicitly return an expression, and if you want to do intermediate calculations or not return a value at all. For example:
() => {
const user = getUserFromDatabase();
console.log(user.firstName, user.lastName);
}
The problem arises when you want to implicitly return an object literal. You can't use ( … ) => { … } because it'll be interpreted as a block. The solution is to use parentheses.
The parentheses are there for the { … } to be interpreted an object literal, not a block. In the grouping operator, ( … ), only expressions can exist within them. Blocks are not expressions but object literals are, thus an object literal is assumed. Thus, instead of creating a block, it will use this syntax:
( … ) => expression
And implicitly return an object literal. Without the parentheses, it will be interpreted as labels and strings, not keys and values of an object literal.
let a = () => {
id: 'abc', //interpreted as label with string then comma operator
name: 'xyz' // interpreted as label (throws syntax error)
}
The comma here would be interpreted as the comma operator, and since the operands must be expressions, and labels are statements, it will throw a syntax error.
回答2:
It allows you to create an expression, so
let a = () => ({ id: 'abc', name: 'xyz' })
specifies that a when invoked, returns the enclosed object
If you remove the () in this case, it will throw an error because it is not a valid function body statement, because the {} in let a = () => { id: 'abc', name: 'xyz' } are interpreted as the boundaries of a statement, but the content inside is not valid if you look at it.
let a = () => {
id: 'abc', /* Not valid JS syntax */
name: 'xyz'
}
来源：https://stackoverflow.com/questions/45003702/what-do-the-parentheses-wrapping-the-object-literal-in-an-arrow-function-mean