程式碼學習不歸路

往往我們在function上的定義若是不清不楚，或是使用function時少傳入參數時少傳了

都會導致程式非預期性的錯誤，如下面程式所示displayArray() 就會出錯

 給予陣列參數預設值

displayArray();
displayArray(['ace', 'lee']);

function displayArray( arr ){
  var message = "There are currently " + arr.length;
  console.log(message);
}

但我們有時希望function具有彈性，就算不傳入參數值，也可以有預設值我們該怎麼辦

很簡單，我們只要在參數給予一個預設初始值即可解決

displayArray();
displayArray(['ace', 'lee']);

function displayArray( arr = [] ){
  var message = "There are currently " + arr.length;
  console.log(message);
}

輸出

There are currently 0
There are currently 2

 給予物件參數預設值

依樣畫葫蘆, 我們傳入的參數可以是一個class，可以修正成這樣

displayObject('my name is', {name: 'ace'});
displayObject('my name is');

function displayObject(str, { name , id }){
	console.log("string = " + str + ", object name = " + name + ",id = " +id);
}

第一個可以正常執行，但第二個會發生錯誤，是因為displayObject('my name is') 沒有傳入第二個參數的值

我們一樣可以設定參數預設值給class

displayObject('my name is', {name: 'ace'});
displayObject('my name is');
function displayObject(str, { name , id } ={} ){
	console.log("string = " + str + ", object name = " + name + ",id = " +id);
}

string = my name is, object name = ace,id = undefined
string = my name is, object name = undefined,id = undefined

 

Spread Operator, Rest parameters

這兩個用法看起來都一樣，都是打上...

 Spread Operator為展開用，用於呼叫函式時

 Rest parameters為不確定有幾個，被用於函式裡的參數，止必須放在最後的parameter

let otherObjects = [ "hello", true, 99 ];
let combined = [ 1, 2, ...otherObjects ] ;
displayArray('ace', 'lee');
displayArray(...other); //Spread Operator
function displayArray(...para){  //Rest parameters
	for(i in para)
		console.log(para[i]);
}

ace
lee
1
2
hello
true
99

Arrow Function

比較像是 anonymous function + Lamda 表示式的寫法，但又與anonymous function在細節上有所不同

ES2015是希望提供更簡短的寫法，而Arrow Function在這方面anonymous function更為好用 

	this.ArrowFunction = ()=> this.firstName + ',' + this.lastName;
	
	this.AnonymousFunction = function(){
		this.firstName + ',' + this.lastName; 
	} ;

若是你的return值非常簡單，那你可以用Lamda表示式的寫法來完成，並可省略return這個關鍵字

但如果不巧的是如果需要有statement的話，你就必須加上return 來指明 

	this.ArrowFunction = ()=> this.firstName + ',' + this.lastName;
	this.ArrowFunctionStatement = ()=> {
		return this.firstName + ',' + this.lastName;
	}

this

在Arrow Function與 Anonymous Function中，this可是天差地別的東西

function testDisplay(f_name, l_name) {
	this.firstName = f_name;
	this.lastName = l_name;	
	this.ArrowFunction = (()=> {
		console.log(this)
		return this.firstName + ',' + this.lastName;
	})();
	
	this.AnonymousFunction = (function(){
		console.log(this)
		return this.firstName + ',' + this.lastName; 
	})();
}

let arrow = new testDisplay('ace', 'lee');
console.log(arrow.ArrowFunction);
console.log(arrow.AnonymousFunction);

testDisplay {firstName: "ace", lastName: "lee"}
Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}
ace,lee
undefined,undefined

我們可以發現在存取ArrowFunction的時候，裡面存取到的this指到的是一開始使用的 testDisplay (Object )

但在Anonymous Function裡所使用的this，指的可不是我們的 testDisplay (Object )，而是指到了Windwo 這個Object

奇妙了吧，所以接下來的輸出你也不會意外了