ES6 functions改動
ES6函數(shù)的改變不算太大祠丝，都是一些其他語言早就有的功能钾军，而Javascript一直比較欠缺的窒舟，比如函數(shù)參數(shù)默認(rèn)值，任意參數(shù)的表示法淌哟，最大的變化應(yīng)該是支持箭頭函數(shù)(其他語言稱之為LAMBDA表達(dá)式)迹卢，一種對匿名函數(shù)的一種簡寫方式，以下來探討一下函數(shù)在ES6中的一些改變：
1. 默認(rèn)參數(shù)(default parameters)
2. 任意參數(shù)(rest parameters ...)
3. spread 操作符(...)
4. new.target 元屬性
5. 箭頭函數(shù)( => )
6. 其他一些改動(miscellaneous)
1.默認(rèn)參數(shù)
ES6之前一直是通過其他方法來模擬默認(rèn)參數(shù)的徒仓，例如邏輯或||符號腐碱，ES6版本真正意義上支持這種便利的寫法。
// ES5模擬默認(rèn)參數(shù)
function person(name, age) {
name = name || "James";
age = age || "18";
console.log(name + " " + age);
}
// 一般情況下這種寫法是沒問題的，當(dāng)邏輯或前面的值為falsy值喂走，整個表達(dá)式返回后面的值
// 例如：
person("Louis"); // ok
person(); // ok
person(undefined, 20); // ok
person("baby", 0); // "baby 18" error, 0為falsy值
上面可以看出這種寫法是有一定問題的，各種JS庫給出了另一種寫法
function person(name, age) {
if (typeof name === "undefined") {
name = name || "James";
}
if (typeof age === "undefined") {
age = age || "18";
}
console.log(name + " " + age);
}
person(undefined, 0); // ok "James 0"
ES6寫法
function person(name = "James", age = 18) {
console.log(name + " " + age);
}
// 1各種寫法 默認(rèn)參數(shù)出現(xiàn)在中間
function getRequest(url, timeout = 2000, callback) {
// do something
}
gerRequest("/foo", undefined, function() {
});
// 2默認(rèn)參數(shù)表達(dá)式
let value = 5;
function getValue() {
return value++;
}
function add(first, second = getValue()) {
return first + second;
}
add(3); // 8
add(3); // 9
add(1, 1); // 2
// 3后面參數(shù)引用前面參數(shù)
function add(first, second = first) {
return first + second;
}
add(2); // 4
add(3, 4); // 7
默認(rèn)參數(shù)<b>TDZ(暫時死區(qū))</b>情況：
// 上面的第三種寫法谋作，若寫成第一個參數(shù)引用第二個參數(shù)
function add(first = second, second) {
return first + second;
}
add(1, 1); // ok 2
add(undefined, 4); // THROW AN ERROR 第二個參數(shù)未聲明就引用就會拋出錯誤
// 就相當(dāng)于
let first = second; // error
let second = 4;
2.任意參數(shù)
ES6任意參數(shù)用"...."表示，任意參數(shù)和arguments之間的差別
ES5使用arguments參數(shù)來實(shí)現(xiàn)對象屬性拷貝：
function pick(object) {
var result = Object.create(null); // 創(chuàng)建一個對象
for (var i = 0, len = arguments.length - 1; i < len; i++) {
result[arguments[i]] = object[arguments[i]];
}
return result;
}
// arguments將object也計(jì)入吭净，所以除開第一個參數(shù)要減1
var book = {
title: "understanding ES6",
author: "Nicholas C.Zakes",
year: 2016
};
var o = pick(book, "author", "year");
o.author; // "Nicholas C.Zakes"
o.year; // 2016
上面的pick函數(shù)看上去不夠直觀，因?yàn)槌谝粋€參數(shù)外不知道要添加幾個參數(shù)友扰，使用新語法
function pick(object, ...keys) {
var result = Object.create(null); // 創(chuàng)建一個對象
for (var i = 0, len = keys.length; i < len; i++) {
result[keys[i]] = object[keys[i]];
}
return result;
}
// keys將object不計(jì)入在其內(nèi)
var book = {
title: "understanding ES6",
author: "Nicholas C.Zakes",
year: 2016
};
var o = pick(book, "author", "year");
o.author; // "Nicholas C.Zakes"
o.year; // 2016
使用rest parameters注意事項(xiàng)：
1.要將任意參數(shù)放到函數(shù)的最后澳泵，不能放在中間位置
2.不能用于對象字面量setter中
function pick(object, ...keys, last) { //... }
// 語法錯誤
let object = {
set name(...value) {
// do something
}
};
// 語法錯誤
3.spread操作符
spread操作符和rest parameters一樣碰辅，都使用 "..." 表示，spread操作符允許我們將數(shù)組中的參數(shù)一個一個傳入函數(shù)中
例如：
// Math.max()函數(shù), 一般可以加入任意個參數(shù)
Math.max(12, 13, 14, 15); // 15
// 以數(shù)組的形式
var arr = [1, 2, 3, 4];
Math.max.apply(null, arr); // 4
// 使用 "..."
Math.max(...arr); // 4
// 還可以加入其它的一些參數(shù)
Math.max(...arr, 5, 10); // 10
將一個數(shù)組去重：
var arr = [1, 2, 2, 4, 4];
// 使用Set將重復(fù)的去掉，然后將set對象轉(zhuǎn)變?yōu)閿?shù)組
var mySet = new Set(arr); // mySet {1, 2, 4}
// 方法1迁酸，使用Array.from轉(zhuǎn)變?yōu)閿?shù)組
// var arr = Array.from(mySet); // [1, 2, 4]
// 方法2闹蒜，使用spread操作符
var arr = [...arr]; // [1, 2, 4]
// 方法3， 傳統(tǒng)forEach
var arr2 = [];
mySet.forEach(v => arr2.push(v));
4.new.target元屬性
????函數(shù)內(nèi)部有兩個方法 [[call]] 和 [[construct]] (箭頭函數(shù)沒有這個方法)荣月，當(dāng)使用new 操作符時， 函數(shù)內(nèi)部調(diào)用 [[construct]]， 創(chuàng)建一個新實(shí)例蹲蒲，this指向這個實(shí)例； 不使用new 操作符時宴胧， 函數(shù)內(nèi)部調(diào)用 [[call]]。
????判斷一個函數(shù)是否使用new操作符，ES5的方法：
function Person(name) {
if (this instanceof Person) {
this.name = name;
} else {
throw new Error("You must use new operator");
}
}
var p = new Person("James"); // ok
var p = Person("James"); // error
// 但是可以通過其他方式繞過這種錯誤
var notPerson = Person.call(p, "Nicholas"); // works
ES6 通過new.target 來判斷是否使用new，元屬性 是指一個提供目標(biāo)相關(guān)額外信息（比如new）的非對象屬性。
function Person(name) {
if (typeof new.target !== "undefined") {
this.name = name;
} else {
throw new Errow("You must use new operator");
}
}
var p = new Person("James"); // ok
var notPerson = Person.call(p, "Louis"); // error
5.箭頭函數(shù)
箭頭函數(shù)有以下幾個方面的特點(diǎn)：
- this, super, arguments和arguments的值由最近一個包含它的非箭頭函數(shù)定義斧吐。(No this, superm arguments and new.target bindings);
- 箭頭函數(shù)內(nèi)部沒有 [[construct]]方法， 因此不能當(dāng)作構(gòu)造器郊闯，使用new操作符育拨；
- 不存在原型(No prototype);
- 不能改變this, 在整個箭頭函數(shù)生命周期this值保持不變;
- 不存在arguments對象怀挠，不過包含它的函數(shù)存在析蝴，箭頭函數(shù)依靠命名參數(shù)和rest parameters；
- 不能擁有重復(fù)的命名參數(shù)绿淋，ES5只有嚴(yán)格模式下才不允許
1.箭頭函數(shù)語法
// 語法很簡單
let sum = (n1, n2) => n1 + n2;
// 相當(dāng)于
let sum = function(n1, n2) {
return n1 + n2;
};
let getTempItem = id => ({ id: id, name: "Temp" });
// 相當(dāng)于
let getTempItem = function(id) {
return {
id: id,
name: "Temp"
};
};
2.沒有this綁定
let PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click", function(event) {
this.doSomething(event.type); // error
}, false);
},
doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};
// init函數(shù)中的this.doSomething闷畸，this指向的是函數(shù)內(nèi)部document對象，而不是PageHandler對象
使用箭頭函數(shù)改寫：
let PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click", event => this.doSomething(evnet.type)
}, false);
},
doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};
// 此處箭頭函數(shù)this指向包含它的函數(shù)躬它，即init,init為PageHandler的方法腾啥，
// this指向PageHandler對象實(shí)例
3.不能使用new
var MyType = () => {};
var obj = new MyType(); // Error
4.沒有arguments對象
箭頭函數(shù)沒有arguments對象，但是可以使用包含函數(shù)中的arguments對象
function createArrowFunctionReturningFirstArg() {
// arguments 為 createArrowFunctionReturningFirstArg中的對象
return () => arguments[0];
}
var arrowFunction = createArrowFunctionReturningFirstArg(10);
arrFunction(); // 10
6.其他(misllanceous)
其他的一些變化：
- 添加name屬性用來判斷函數(shù)名冯吓，用于調(diào)試;
- 規(guī)范塊級別函數(shù)(block-level functions)倘待，當(dāng)執(zhí)行流結(jié)束塊級別函數(shù)退出，塊級別函數(shù)提升變量到塊頂部组贺；
- 對尾部調(diào)用(Tail call, 值一個函數(shù)返回另一個函數(shù)對象)性能進(jìn)行優(yōu)化凸舵，尤其是都遞歸函數(shù)性能提升很大
總結(jié)
- ES6對默認(rèn)參數(shù)的支持;
- 任意參數(shù)和spread操作符
- 箭頭函數(shù)
????總體來說，這些改動都是為編寫程序提供了極大的便利失尖，不用再使用workaround來解決語法存在的問題啊奄，整體來講，更加符合語言的書寫習(xí)慣掀潮。
