js高手之路 es6系列教程 箭頭函式詳解

2021-09-07 13:45:03 字數 3575 閱讀 7355

箭頭函式是es6新增的非常有意思的特性,初次寫起來,可能會覺得彆扭,習慣之後,會發現很精簡.

什麼是箭頭函式?

箭頭函式是一種使用箭頭( => )定義函式的新語法, 主要有以下特性:

箭頭函式語法由函式引數、箭頭、函式體組成.

第一種形式: 沒有引數的寫法

1/*2

(): 空括號代表: 沒有傳遞引數

3函式體: console.log( 'ghostwu' ), 只有這一句話,可以不加花括號{}4*/

5 let show = () => console.log( 'ghostwu');

6 show();

1

//函式體只有一句話,當然也可以加花括號

2 let show = () =>

3 show();

第二種形式: 帶乙個引數的寫法

1/*2

第乙個a 表示 引數a

3第二個a 表示函式體a, 相當於 return a4*/

5 let show = a =>a;

6 console.log( show( 10 ) );

1

//如果函式體加了花括號,要用return

2 let show = a => ;

3 console.log( show( 10 ) );

1

//當然也可以加小括號

2 let show = (a) => ;

3 console.log( show( 10 ) );

1

//let show = ( a ) => console.log( a );2//

show( 100 ); //10034

//當函式體有return的時候,必須要加花括號

5 let show = ( a ) => return a; //

錯誤

第三種形式: 帶2個以上引數的寫法

1

//當函式有2個以上引數的時候,一定要用小括號2//

let add = ( a, b ) => a + b;3//

console.log( add( 10, 20 ) ); //3045

//let add = a, b => a + b; //錯誤6//

console.log( add( 10, 20 ) );78

//有return需要加花括號9//

let add = (a, b) => return a + b; //錯誤

10//

console.log( add( 10, 20 ) );

1112

//let add = (a, b) => console.log( a + b );

13//

add( 10, 20 ); //30

1415

//let add = ( a, b ) => ;

16//

console.log( add( 10, 20 ) ); //30

返回值如果是物件:

1

//返回值是物件,為了以示區分,用小括號

2 let show = name => ( );

3 let ouser = show( 'ghost');

4 console.log( ouser.user );

1

//用了return關鍵字,要用花括號{}

2 let show = name => };

3 let ouser = show( 'ghostwu');

4 console.log( ouser.user );

1

//物件與傳參用法

2 let show = ( name, age ) =>;7}

8 let ouser = show( 'ghostwu', 22);

9 console.log( ouser.uname , ouser.uage ); //

ghostwu, 22

立即表示式的寫法:

1

//立即表示式的寫法

2 let ouser = ((name, age)=>

7 })('ghostwu', 25);

8 console.log( ouser.uname , ouser.uage );

箭頭函式不能new

1         let user = () => 'ghostwu';

2console.log( user() );

3 console.log( new user() ); //

報錯,箭頭函式不能new

箭頭函式中的this,取決於他的上層非箭頭函式的this指向

1

//this指向他的外層window2//

var a = 10;3//

let user = () => 6//

user(); //10

1

//箭頭函式中的this取決於外層函式的this

2function

user( name ) ;8}

9var ouser = new user( 'ghostwu');

10 console.log( ouser.getname() );

箭頭函式可以簡化陣列的處理

1

//箭頭函式簡化陣列處理2//

let arr = [10,100,0,3,-5];3//

arr.sort( ( a, b ) => a - b );4//

arr.sort( ( a, b ) => b - a );5//

console.log( arr );

箭頭函式取到的是外層的arguments

1         let show = function

( name )

4 let fn = show( 'ghostwu');

5 console.log( fn() );

1

var n1 = 100;

2var n2 = 200;

3 let add = () =>;

6 console.log( add.call( null ) ); //

300300

8 console.log( add.bind( null )() );//

300

js高手之路 es6系列教程 箭頭函式詳解

箭頭函式是es6新增的非常有意思的特性,初次寫起來,可能會覺得彆扭,習慣之後,會發現很精簡.什麼是箭頭函式?箭頭函式是一種使用箭頭 定義函式的新語法,主要有以下特性 箭頭函式語法由函式引數 箭頭 函式體組成.第一種形式 沒有引數的寫法 1 2 空括號代表 沒有傳遞引數 3函式體 console.lo...

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,...