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

箭頭函式是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,...