ES6新的函數默認值和箭頭函數
函數這玩意, 只要你在玩編程, 就一定在隨時隨地的跟函數打交道, 在這篇博文中, 我們來聊一聊ES6爲函數增加了哪些常用的新特性
目錄(標紅的代表相對來說比較重要):
-
函數參數的默認值
-
箭頭函數
函數參數的默認值
在ES6以前, 當我們在使用函數的時候, 有時候如果某些參數沒有傳遞我們希望給他一個默認值的話, 我們通常這樣寫, 我們舉例一個封裝一個網絡請求
function ajax(url, method, data, callback, flag) {
var method = method || 'GET';
var flag = flag || true;
// ...剩下的代碼
}
這樣寫你不能說他有問題, 但是就是感覺很怪異, 首先我們不能很直觀的一眼就看出誰擁有默認值, 其次我們這樣給默認值的方式確實有點不倫不類
於是ES6推出了函數參數默認值, 來讓函數參數默認值的書寫方式更加的優雅
// 還是同一個例子, 用ES6寫就合理很多
function ajax(url, method = 'GET', data, callback, flag = true) {
// ...剩下的代碼
}
箭頭函數
函數中用到最頻繁也最突出的新特性 -> 箭頭函數來嘍, 盤他
在ES5中, 我們定義函數的方式有兩種
- 函數聲明
function foo() {}
- 函數表達式
var foo = function() {}
在ES6中, 官方給我們推出了一種高級感特別強的新的書寫方式 -> 箭頭函數, 語法如下
let foo = () => {};
上方的書寫等同於
let foo = () => {};
箭頭函數的規則
- 如果箭頭函數只有一個參數, 那麼可以省略參數中的圓括號而僅書寫參數, 如果無參數或有多個參數則不行
const foo = name => {}
- 如果箭頭函數的函數體只有一條返回語句, 則大括號也可以省略
const foo = number => number + 1;
上面的書寫等同於
const foo = (number) => {
return number + 1;
}
- 如果箭頭函數的函數體只有一個返回語句, 但是該返回語句返回的是一個對象, 則要用圓括號包裹告知瀏覽器這個大括號非代碼塊大括號
const foo = number => ({num: number});
上面的書寫等同於
const foo = number => {
return {
num: number
}
}
箭頭函數的實際應用
箭頭函數主要是使得代碼更加的簡介, 也更加的易懂, 提高代碼在視覺上的維護效率
我們來看幾個例子, 將同樣函數功能用ES5方式和ES6方式各寫一次, 大家可能更能體會到箭頭函數對於代碼整潔度的提升有多大
// ES5
const sum = function(a, b) {
return a + b;
}
const sq = function(x) {
return x * x;
}
['a', 'b', 'c'].map(function(ele) {
return ele.toUpperCase();
})
// ES6
const sum = (a, b) => a + b;
const sq = x => x * x;
['a', 'b', 'c'].map(ele => ele.toUpperCase());
同樣的功能, 用ES6的箭頭函數書寫會顯得更加的簡潔, 可讀性也大大的提升
使用箭頭函數時的注意點
當我們基本瞭解了箭頭函數的使用方法以後, 有一些注意點使我們必須要知道的
- 箭頭函數本身沒有this指向, 他的this會繼承定義他時所在父級的this指向
我們用ES5和ES6進行對比可能更加明顯
// ES5
function foo() {
setTimeout(function () {
console.log(this.userName); //該匿名函數的this會理所應當的指向window, 所以輸出loki
}, 200)
}
var userName = 'loki';
foo.apply({name: 'thor'});
// ES6箭頭函數
function foo() {
setTimeout(() => {
// 由於他是箭頭函數,他的this指向跟隨定義它時的父級的this指向, 所以他的輸出爲thor
console.log(this.userName);
}, 200)
}
var userName = 'loki';
foo.apply({userName: 'thor'});
- 箭頭函數不可以用作構造函數
const Person = () => {};
const person = new Person(); // 報錯: Person is not a constructor
-
箭頭函數中沒有arguments類數組
-
箭頭函數不能用作Generator函數(以後會仔細介紹)
其實ES6/7在函數身上還是下了很多功夫, 比如新的函數this綁定方法, 尾調用優化, 嚴格模式之類的, 但是在目前可接觸的開發中, 這些可能應用比較少, 所以就挑了兩個來講, 有興趣的話可以自己去了解
至此, 函數的常用特性就已經寫完了, 希望我講清楚了
