ES6中的箭頭函式例項詳解

2022-10-08 14:42:16 字數 2055 閱讀 7484

語法

我們先來看看箭頭函式的語法程式設計客棧:

([param] [, param]) =>

param => expression

param 是引數,根據引數個數不同,分這幾種情況:

() => // 零個引數用 () 表示;

x => // 乙個引數可以省略 ();

(x, y) => // 多引數不能省略 ();

示例我程式設計客棧們再來看看一些示例,看看在es5中的函式怎麼通過es6中的箭頭函式來替代吧:

// es5

var selected = alljobs.filter(function (job) );

// es6

var selected = alljobs.filter(job => job.isselected());

當然,也可以定義多個引數:

// es5

var total = values.reduce(function (a, b) , 0);

// es6

var total = values.reduce((a, b) => a + b, 0);

當然=>後面也不一定非得接return 之後的語句,看下面:

// es5

$("#confetti-btn").click(function (event) );

// es6

$("#confetti-btn").click(event => );

但是需要注意的是,多行語句需要用{}括起來,單行表示式不需要{},並且會作為函式返回值。

x => ; // 函式返回 x * x

x => x * x; // 同上一行

x => return x * x; // syntaxerror 報錯,不能省略 {}

x => ; // 合法,沒有定義返回值,返回 undefined

和普通函式一樣,箭頭函式也可以使用剩餘引數和預設引數。

var func1 = (x = 1, y = 2) => x + y;

func1(); // 得到 3

var func2 = (x, ...args) => ;

func2(1,2,3); // 輸出 [2, 3]

特性介紹完了箭頭表示式的語法和示例,我們就需要思考一下了。如果箭頭表示式僅僅就是簡化了函式的命名,我們為什麼要改變原來的習慣而去使用它呢?所以我們需要了解一下箭頭函式的特性。

箭頭函式內部沒有constructor方法,也沒有prototype,所以不支援new操作。但是它對this的處理與一般的普通函式不一樣。箭頭函式的 this 始終指向函式定義時的 this,而非執行xuygblrqxk時。我們通過乙個例子來理解:

var o = ,

test : function() , 100);

}};o.test(); // typeerror : this.func is not a function

上面的**會出現錯誤,因為this的指向從o變為了全域性(函式呼叫中的this都是指向全域性的)。如果大家對j**ascript中的this不是很熟悉的話,可以看看前面的一篇文章《j**ascript中this程式設計客棧的用法例項詳解》。好了,回歸正題,我們需要修改上面的**如下:

var o = ,

test : function() , 100);

}};o.test();

通過使用外部事先儲存的this就行了。這裡就可以利用到箭頭函式了,我們剛才說過,箭頭函式的 this 始終指向函式定義時的 this,而非執行時。所以我們將上面的**修改如下:

var o = ,

test : function() , 100);

}};o.test();

這回this就指向o了。

我們還需要注意一點的就是這個this是不會改變指向物件的,我們知道call和apply可以改變this的指向,但是在箭頭函式中是無效的。

var x = 1,

o = ;

o.test(); // 1

o.test.call(o); // 依然是1

本文標題: es6中的箭頭函式例項詳解

本文位址:

ES6箭頭函式詳解

箭頭函式能使 更加簡潔 箭頭函式不用return會隱式返回 let hello function lethello2 console.log hello world 箭頭函式首先我們來看乙個函式 let sum function a,b 使用盤箭頭函式第一步先把function去掉在 後面加 箭頭 ...

ES6 函式 箭頭函式 箭頭函式中的this

1,es6中,函式新增哪些特性 支援引數有預設值,支援剩餘引數,支援引數展開運算,新建箭頭函式 ie不支援箭頭函式 2,支援引數預設值 在為傳引數值或傳遞的引數值是undefined的情況下,引數取預設值。引數b有預設值 hello function test a,b hello 未傳引數給引數b ...

ES6 中的箭頭函式

定義乙個箭頭函式很簡單,基本語法是 param param param expression param 是引數,根據引數個數不同,分這幾種情況 當然,和普通函式一樣,箭頭函式也可以使用 es6 新增的 預設引數 和 剩餘引數 var func1 x 1,y 2 x y func1 得到 3 var...