卡卡網(wǎng)

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

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

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

例如，以下代碼會(huì)導(dǎo)致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;

花括號(hào){}這種情況下可以不要

在 JavaScript 中，表達(dá)式的計(jì)算結(jié)果如下例所示。

10 + 20;

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

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

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

let square = x => x * x;

但是，如果使用語(yǔ)句，則必須將其包裹在一對(duì)花括號(hào)中，如下例所示：

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

對(duì)象字面量應(yīng)在括號(hào)中

以下示例：

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

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

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

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

p => {object:literal}

例如，以下代碼會(huì)導(dǎo)致錯(cuò)誤。

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

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

要解決此問(wèn)題，需要將對(duì)象字面量括在括號(hào)中，如下所示：

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

總結(jié)

本文介紹了幾個(gè)細(xì)節(jié)問(wèn)題，箭頭函數(shù)可以在某些部分換行，而花括號(hào)在某些情況下是可以不要的，括號(hào)的使用要適當(dāng)，不然會(huì)導(dǎo)致錯(cuò)誤。

相關(guān)文章

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

標(biāo)簽: 箭頭函數(shù)