JS中的與冒號的作用、箭頭函數相關的一道題
阿新 • • 發佈:2019-04-28
分享圖片 label 三元運算 需要 log 另一個 tree 推斷 語法
相關知識來自於一道題:
使用ES6的箭頭函數語法可以直接省略 function
和 return
關鍵字,比如 function (){return 1;}
就可以簡化成 () => 1
, 但是如果需要返回對象時需要加一個括號,比如 () => ({a:1})
, 因為JS解釋器會誤把大括號當作函數的起始符號,需要加上一個括號。那如果沒有這個括號會怎麽樣呢?
() => {a:1}
會輸出什麽?還是說會報錯?
不管怎麽樣,直接打開F12先試一下
const f = () => {a:1};
f(); // undefined
返回了undefined,說明代碼是能跑的,那又為什麽是undefined呢,a和1跑哪去了?
回頭查了一下JS中關於冒號的作用,常用的有:
- ?:三元運算
- switch語句
- 對象字面量
另外還有一個不常用容易忘記的:
作為一個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中的與冒號的作用、箭頭函數相關的一道題