卡卡網(wǎng)

這幾天學習了幾天箭頭函數(shù)，今天記錄一下，箭頭函數(shù)換行和花括號的問題，這是一些細節(jié)問題，但如果不注意，就可能導致錯誤出現(xiàn)。

參數(shù)定義和箭頭之間的換行符

JavaScript 不允許在參數(shù)定義和箭頭函數(shù)中的箭頭 ( =>) 之間有換行符。

例如，以下代碼會導致SyntaxError：

let multiply = (x,y) 
=> x * y; 

輸出：

Uncaught SyntaxError: Unexpected token '=>'

但是，以下代碼可以正常工作：

let multiply = (x,y) => 
x * y;

JavaScript 允許在參數(shù)之間使用換行符，如下例所示：

let multiply = (
  x,
  y
) => 
x * y;

花括號{}這種情況下可以不要

在 JavaScript 中，表達式的計算結果如下例所示。

10 + 20;

語句執(zhí)行特定任務，例如：

if (x === y) {
    console.log('x equals y');
}

如果在箭頭函數(shù)的主體中使用表達式，則不需要使用花括號。

let square = x => x * x;

但是，如果使用語句，則必須將其包裹在一對花括號中，如下例所示：

let except = msg => {
    throw msg;
};

對象字面量應在括號中

以下示例：

let setColor = function (color) {
    return {value: color}
};

let backgroundColor = setColor('Red');
console.log(backgroundColor.value); // "Red"

setColor()函數(shù)表達式返回一個將屬性value設置為color參數(shù)的對象。

如果使用以下語法從箭頭函數(shù)返回對象字面量，則會出現(xiàn)錯誤。

p => {object:literal}

例如，以下代碼會導致錯誤。

let setColor = color => {value: color };

由于塊和對象字面量都使用大括號，JavaScript 引擎無法區(qū)分塊和對象。

要解決此問題，需要將對象字面量括在括號中，如下所示：

let setColor = color => ({value: color });

總結

本文介紹了幾個細節(jié)問題，箭頭函數(shù)可以在某些部分換行，而花括號在某些情況下是可以不要的，括號的使用要適當，不然會導致錯誤。

相關文章

• 實例演示無參數(shù)、單參數(shù)、多參數(shù)的箭頭函數(shù)用法
• 實例詳解JS箭頭函數(shù)=>與傳統(tǒng)匿名函數(shù)處理this的不同方法

標簽: 箭頭函數(shù)