當下不可不知的es6箭頭函式

相信各位大俠對es6並不陌生了，所以在此不再贅述它的歷史與由來，直接進入正題。

jquery的這種寫法可能已經被寫爛了：

$(".submit-btn").click(function

());

那麼來個新鮮的：

$(".submit-btn").click(() => ajax())；

第一次接觸箭頭函式的寫法，似乎覺得無法理解，別急，我們先來了解一下es6箭頭函式的基本語法:

([param], [param]) =>

//param 是引數，根據引數個數不同，分這幾種情況： 
//() =>       零個引數用()表示function； 
//x =>       乙個引數時可以省略()； 
//(x, y) =>   多引數不能省略()

看過語法後，是不是覺得箭頭函式簡潔明瞭，至少不用寫function了，不會再出現因為function寫成functoin而報錯的尷尬了。那麼箭頭函式的好處僅此而已嗎？如果僅僅如此，那當然是太膚淺了。

當function函式體中只有一句return語句時，也可將return省略。

// es5

var total = values.reduce(function
(a, b) , 0);
// es6
var total = values.reduce( (a, b) => a + b, 0 );　　// 兩個引數a,b ，所以引數外層的 () 不可省略

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) 

只有一些省略單詞的功能嗎？of course no ！
對於傳統function函式，都有屬於自己的this值，使得內層函式的this值可能是window、undefined或者內層函式自身的物件，這也製造了不少麻煩，比如我們寫過這段hack用來處理this的指向問題：

//

es5)
}　　...
}

//

es6...
}

在es6的版本中，add方法從它的呼叫者處獲取了this值，而其內部函式是乙個箭頭函式，所以該箭頭函式繼承了外圍作用域的this值。

變數解構

//

es5function
full(obj) 
//es6
const full = () => name + ',' + age;　　// 只有一句**所以省略return

學習了箭頭函式的幾種基本用法，我來提幾點需要注意的地方，防止大家在用的過程中踩雷。

1、由於大括號被解釋為**塊，所以如果箭頭函式直接返回乙個物件，必須在物件外面加上括號，否則會報錯。

var getobj = id => ();

var getobj = id => ;　　// 報錯

2、箭頭函式與非箭頭function函式間有乙個細微的區別，箭頭函式沒有它們自己的arguments物件。

function

showargs() , 100);
}showargs(1, 3, 5)
//args: [1, 3, 5]  這裡的argments實際上是showargs的arguments

3、箭頭函式不可當作建構函式，也就是說，不可以使用new命令，否則會丟擲乙個錯誤。原因是它沒有屬於自己的this。

(function

() )()
];}).call();
//['outer']  箭頭函式的bind()方法無效

ES6的箭頭函式

es6新增了箭頭函式 表示式模式 es6odds evens.map v v 1 pairs evens.map v nums evens.map v,i v i 複製 es5 odds evens.map function v pairs evens.map function v nums eve...

Linux下不可不知的檔案型別及表示顏色

n白色 普通檔案 用 表示 n紅色 壓縮檔案 n藍色 目錄檔案 用d表示 n青藍色 鏈結檔案 用l表示 n黃色 裝置檔案 dev目錄下 用b或c表示 b表示的是物理裝置 c表示的是字元終端裝置.n青綠色 可執行檔案 bin sbin目錄下 n粉紅色 檔案或是socket檔案 用s表示 n青黃色 管道...

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

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