【ES6】函數的拓展

引言：ES6添加了函數的默認值的寫法、rest參數、拓展運算符、箭頭函數等特性，值得關注。

一、函數參數的默認值

在ES6之前，JS函數的參數是不可以指定默認值的，只能採取變通的方法。如代碼塊1-1。

/***@@    代碼塊1-1    變通的方法設置函數參數默認值    @@***/
function log(x,y){
	y=y||'默認值';
	console.log(x,y);
}
log('Hello');			//Hello 默認值
log('Hello','China');	//Hello China
log('Hello','');		//Hello 默認值

ES6允許爲函數的參數設置默認值，即直接寫在參數的後面。如代碼塊1-2。

/***@@    代碼塊1-2    ES6直接設置函數參數默認值    @@***/
function log(x,y='默認值'){
	console.log(x,y);
}
log('Hello');			//Hello 默認值
log('Hello','China');	//Hello China
log('Hello','');		//Hello 默認值

當ES6允許爲函數的參數設置默認值之後，由於ES6中形形色色的數據結構，導致函數參數的解構也多姿多彩（頭大）。比如函數參數的默認值可以與解構賦值默認值結合使用如代碼塊1-3。

/***@@    代碼塊1-3    與解構賦值默認值結合使用    @@***/
function foo({x,y=5}){
	console.log(x,y);
}
foo({})			// undefined,5
foo({x:1})		// 1,5
foo({x:1,y:2})	// 1,2
foo()			// TypeError: Cannot read property 'x' of undefined

還需要注意的是，參數默認值的位置應該在函數的參數尾部。因爲這樣比較容易看出，到底省略了哪些參數。如果非尾部的參數設置默認值，實際上這個參數是無法省略的。如代碼塊1-4。

/***@@    代碼塊1-4    參數默認值的位置應該在最後    @@***/
//錯誤示例
function fun(x=1,y){
	return [x,y];
}
fun()				// [1,undefined]
fun(2)				// [2,undefined]
fun(,1)				// 報錯
fun(undefined,1)	// [1,1]

二、擴展運算符

擴展運算符spread是三個點…，主要用來把數組格式解析掉。也可以把解析完的值作爲函數的參數。基本用法見代碼塊2-1。

/***@@    代碼塊2-1    ...的基本用法    @@***/
let array=[1,2,3];

console.log(...array); // 1,2,3

function add(x,y,z){
	console.log(x+y+z);
}
add(...array); // 6

還可以用來替代數組的apply方法、合併數組、把字符串轉化爲數組、把類數組對象轉化爲真正的數組等等。見代碼塊2-2。

/***@@    代碼塊2-1    ...的應用    @@***/
//1.替代數組的apply方法
//ES5寫法
function f(x,y,z) {}
var args = [0,1,2];
f.apply(null,args);

//ES6寫法
function f(x,y,z) {}
var args = [0,1,2];
f.apply(...args);

//2.合併數組
var arr1=[1,2];
var arr2=[3];
var arr3=[4,5];
//ES5的寫法
arr1.concat(arr2,arr3);	//[1,2,3,4,5]
//ES6的寫法
[...arr1,...arr2,...arr3];	//[1,2,3,4,5]

//3.把字符串轉化爲數組
[..."hello"]; //["h","e","l","l","o"]

三、箭頭函數【重點！！！】

箭頭函數（=>）幾乎算是JavaScript的一次編程規範的革新了，嶄新的寫法，精簡的代碼。而且，現在很多國內外的開源框架的源碼幾乎都是採用箭頭函數來寫的，所以學好箭頭函數很重要。這裏只介紹一下箭頭函數的基本用法，見代碼塊3-1。

/***@@    代碼塊3-1    箭頭函數的基本用法    @@***/
/******第一種寫法 一個參數 返回一個值 ******/
var f= v => v;
//等同於
var f = function(v){
	return v;
}
/******第二種寫法 多參數 返回的是語句 ******/
var sum = (num1,num2) => num1+num2;
//等同於
var sum = function(num1,num2){
	return num1+num2;
}
/******第三種寫法 一個參數 函數體有多個語句 ******/
let array= [1,2,3];

var add = array => {
	let sum=0;
	for( let val of array)
		sum+=val;
	return sum;
}
//等同於
var add = function(array){
	let sum=0;
	for( let val of array)
		sum+=val;
	return sum;
}
/******第四種寫法  簡化回調函數******/
[1,2,3].Map(function(x){
	return x*x;
});
//等同於
[1,2,3].Map( x => x*x);

參考文獻

阮一峯《ES6標準入門（第2版）》

【ES6】函數的拓展