ES6變化 箭頭函式

2021-09-10 15:46:34 字數 2998 閱讀 1640

箭頭函式特點：

1.不用寫function關鍵字

2.只能作為函式使用不能new，沒有原型

3.引數不能重複命名

4.返回值可以不寫return，但是有時需要配合{}

5.內部arguments this 由定義時外圍最接近一層的非剪頭函式的arguments和this決定其值

1）這裡以sum函式為例

function sum (a, b) ;


var sum = function (a, b) ;
箭頭函式則可寫為：

let sum = (a, b) => a + b；
其中亦是沒有寫return,對應上面第三條

當let sum = (a, b) => ；將a+b放置在塊級作用域中不加return則執行後結果為undefined

如果箭頭函式返回值是乙個物件，需要用表示式的寫法

let sum = (a, b) => ();


console.log( sum(10, 20) )
2）高階函式

//es5寫法


function sum (x) 


}};sum(1)(2)(3)


var sum1 = sum(1);


var sum2 = sum1(2);


console.log( sum2(3) );


//箭頭函式


let sum = x => y => z => x + y + z;


let sum = x => y => z => x + y + z;


console.log( sum(1)(2)(3) );//也可證明箭頭函式是可以被返回的
3)引數不能重複命名

在es5中引數可以重名

//es5語法


var sum0 = function(a,a)


sum0(1,2); // 2+2=4 


var sum1 = function (a, a)
而箭頭函式不可以

let sum = (x, x) =>
報出的錯誤如下

4）只能作為函式使用不能new，沒有原型

證明成立

5) 內部arguments this 由定義時外圍最接近一層的非剪頭函式的arguments和this決定其值

//例1


function outer () ;


sum(1, 2);


}outer(9, 10, 11);
返回乙個箭頭函式且這個箭頭函式不存在arguments，可以說arguments未定義

function curry () 


};curry('a', 'b')(1, 2);
this問題

我們再看一遍內部this 由定義時外圍最接近一層的非剪頭函式的this決定其值

var a = 'outerobj';


let sum = () => ;


sum();//outerobj
我們知道上面的**中箭頭函式sum中的this指向window

接著我們看幾個例子：

let obj = 


return sum;


}};let outersum = obj.fn();


outersum();//innerobj
將obj.fn()返回的箭頭函式sum賦值給outersum後，執行outersum()，而fn是乙個普通函式，被定義箭頭函式sum的外面是fn，所以this指向obj。

let obj = , 500)


}};obj.fn();
因為settimeout中存在閉包，this指向window所以執行結果為undefined。解決這種情況有兩種方法

//1.通過在fn()中將this賦值給乙個新變數


let obj = , 500)


}};obj.fn();


//2.箭頭函式


let obj = , 500)


}};obj.fn();
看一下babel編譯之後的箭頭函式

測試**如下：

let sum = x => x * x;


let obj = , 500)}};
babel命令：npx babel 1-arrow.js -o 1-newarrow.js

可知與普通寫法一樣


var sum = function sum(x) ;


var obj = , 500);


}};obj.fn();
我們再看看陣列

let arr = [10, 20, 30, 40, 50, 60];


console.log( arr.map(ele => ele * ele) );


console.log( arr.filter(ele => ele > 20) );//過濾大於20的數
對比與以前的陣列寫法，箭頭函式極大地縮短了**量

最後，我們來總結一下箭頭函式的作用：函式目的指向性更強，可讀性更好，簡化**，提公升開發效率

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