ES6箭頭函式

2022-06-08 20:21:09 字數 3005 閱讀 1819

文章引用:箭頭函式

基本用法

es6 允許使用「箭頭」(=>)定義函式。

var f = v => v;

// 等同於

var f = function (v) ;

如果箭頭函式不需要引數或需要多個引數,就使用乙個圓括號代表引數部分

var f = () => 5;

// 等同於

var f = function () ;

var sum = (num1, num2) => num1 + num2;

// 等同於

var sum = function(num1, num2) ;

如果箭頭函式的**塊部分多於一條語句,就要使用大括號將它們括起來,並且使用return語句返回。

var sum = (num1, num2) =>
由於大括號被解釋為**塊,所以如果箭頭函式直接返回乙個物件,必須在物件外面加上括號,否則會報錯。

// 報錯

let gettempitem = id => ;

// 不報錯

let gettempitem = id => ();

下面是一種特殊情況,雖然可以執行,但會得到錯誤的結果。

let foo = () => ;

foo() // undefined

上面**中,原始意圖是返回乙個物件,但是由於引擎認為大括號是**塊,所以執行了一行語句a: 1。這時,a可以被解釋為語句的標籤,因此實際執行的語句是1;,然後函式就結束了,沒有返回值。

如果箭頭函式只有一行語句,且不需要返回值,可以採用下面的寫法,就不用寫大括號了。

let fn = () => void doesnotreturn();
箭頭函式可以與變數解構結合使用。

const full = () => first + ' ' + last;

// 等同於

function full(person)

箭頭函式使得表達更加簡潔。

const iseven = n => n % 2 === 0;

const square = n => n * n;

上面**只用了兩行,就定義了兩個簡單的工具函式。如果不用箭頭函式,可能就要占用多行,而且還不如現在這樣寫醒目。

箭頭函式的乙個用處是簡化**函式。

// 正常函式寫法

[1,2,3].map(function (x) );

// 箭頭函式寫法

[1,2,3].map(x => x * x);

另乙個例子是

// 正常函式寫法

var result = values.sort(function (a, b) );

// 箭頭函式寫法

var result = values.sort((a, b) => a - b);

下面是rest 引數與箭頭函式結合的例子

const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)

// [1,2,3,4,5]

const headandtail = (head, ...tail) => [head, tail];

headandtail(1, 2, 3, 4, 5)

// [1,[2,3,4,5]]

使用注意點

箭頭函式有幾個使用注意點。

(1)函式體內的this物件,就是定義時所在的物件,而不是使用時所在的物件。

(2)不可以當作建構函式,也就是說,不可以使用new命令,否則會丟擲乙個錯誤。

(3)不可以使用arguments物件,該物件在函式體內不存在。如果要用,可以用 rest 引數代替。

(4)不可以使用yield命令,因此箭頭函式不能用作 generator 函式。

上面四點中,第一點尤其值得注意。this物件的指向是可變的,但是在箭頭函式中,它是固定的。

function foo() , 100);

}var id = 21;

foo.call();

// id: 42

上面**中,settimeout的引數是乙個箭頭函式,這個箭頭函式的定義生效是在foo函式生成時,而它的真正執行要等到 100 毫秒後。如果是普通函式,執行時this應該指向全域性物件window,這時應該輸出21。但是,箭頭函式導致this總是指向函式定義生效時所在的物件(本例是),所以輸出的是42

es6箭頭函式

本例是在了解es6知識後在原來定義函式的基礎上進行理解var searchvalue 查詢匹配物件 var button var input var select button if searchvalue.input undefined button.click else 重新整理 tableli...

es6 箭頭函式

1.單引數 function cheng a 3 let cheng a 3 a a console.log cheng 9 2.多引數 function add a,b let add a,b a b 預設返回值 console.log add 3,9 3.無返回值 function add a,...

ES6 箭頭函式

es6 中,箭頭函式就是函式的一種簡寫形式,使用括號包裹數,跟隨乙個 緊接著是函式體 var getprice function 箭頭函式 var getprice 9.15 箭頭函式不僅僅是讓 變得簡潔,函式中 this 總是繫結總shi 指向物件自身 function person 1000 使...