相關知識來自於一道題：

使用ES6的箭頭函數語法可以直接省略 function 和 return 關鍵字，比如 function (){return 1;} 就可以簡化成 () => 1 ， 但是如果需要返回對象時需要加一個括號，比如 () => ({a:1}), 因為JS解釋器會誤把大括號當作函數的起始符號，需要加上一個括號。那如果沒有這個括號會怎麽樣呢？

() => {a:1} 會輸出什麽？還是說會報錯？

不管怎麽樣，直接打開F12先試一下

const f = () => {a:1};
f(); // undefined

返回了undefined，說明代碼是能跑的，那又為什麽是undefined呢，a和1跑哪去了？

回頭查了一下JS中關於冒號的作用，常用的有：

1. ？：三元運算
2. switch語句
3. 對象字面量

另外還有一個不常用容易忘記的：

作為一個label標簽，用於與 break 和 continue 配合，讓語句跳轉到指定的位置，類似 goto 的作用。直接放兩個示例，很容易看出它的用途，雖然也不常這麽用。

continue

a: for(let i = 0; i < 5; i++){
    for(let j = 0; j < 5; j++){
        if(j===2) continue a;
        console.log(i,j);
    }
}
/*
輸出結果:
0 0，
0 1，
1 0，
1 1，
...
4 0，
4 1
*/
 

break

b: for(let i = 0; i < 5; i++){
    for(let j = 0; j < 5; j++){
        if(j===2) break b;
        console.log(i,j);
    }
}
/*
輸出結果:
0 0，
0 1
*/

到這裏就知道為什麽返回undefined了，因為 {a:1} 中的 a:被當成了一個標簽，就剩下一個1沒有return語句。

除此之外，標簽還可以換行寫，所以 {a:1}就等於

{
    a:
        1
}

因此， () => {a:1,b:2} 是會報錯的，因為等價於

{
    a:
        2,
    b:
        1
}
 

再由此可以推斷出另一個東西 () => {a:b:c:d:1}不會報錯而是返回undefined

總結

本文全來源於一道與JS語法相關的題目，雖然在開發過程中並沒有什麽卵用，但是說不定哪天面試就用上了呢？

最後祝大家五一快樂。

參考

js中冒號的作用

JavaScript權威指南(6th)

JS中的與冒號的作用、箭頭函數相關的一道題