JavaScript-函式中的預設值

在JavaScript的函式中,每當一個函式被呼叫,就會創建一個執行環境,在這個執行環境(execution context)被創造的同時,會同步先在記憶體中創建引數中的變數,預設值為undefined。
如果在呼叫函示時沒有帶入參數,並不會出錯,因為會被當作引數為undefined值做帶入。

1
2
3
4
5
function greet(name){
console.log('Hello'+name)
}

greet();//Hello undefined;

上方的例子,在程式執行時,新的執行環境建立,而在其中也會宣告出一個變數name,在變數倍賦值之前,預設值為undefined。

建立預設值

當沒有參數傳入時,如果希望自訂預設值,可以使用||(or運算子)來完成預設值設定。

當變數name為undefined時就會是false,接著就會繼續讀取”||”右邊的字串,並回傳該字串的值assign變數name。

1
name = name||'<default name here>'

查看Operator precedence(運算子 先後順序),因為”||”相較於”=”有更高的precedence,所以會先執行”||”,並且由左至右執行。

當”||”左邊是true的時候,若讀取到true,會直接回傳true;但若讀取到false,就會繼續判斷”||”右邊,當右邊是一個字串時,它會判斷是true,並回傳字串。

1
2
3
4
5
6
7
8
function greet(name){
name = name || '<default name here>'
console.log('Hello'+name)
}

greet(Tony);// Hello Tony;
greet();// Hello <default name here>;
greet(0);// Hello <default name here>;

但是這個寫法要注意,傳入參數的值不能為0,因為0會被當成false,所以會繼續執行判斷”||”右邊。

避免library重複,設定預設值

假設在同一個檔案中,引入三個library,lib1跟lib2的變數名可能會重複,程式碼會依照library引入的順序,由上而下執行,若變數有重複,後者會覆蓋前者變數的值。

1
2
3
4
5
6
7
8
//lib1.js中
var libraryName = 'lib1';

//lib2.js中
var libraryName = 'lib2';

//app.js中
console.log(libraryName);//lib2

為了解決變數重複,在使用之前可以先檢查該變數是非已經從存在於全域執行環境中。

1
window.libraryName = window.libraryName || "lib2";

上述程式碼,會先檢查”||”左邊的值,若已經有被定義賦值,則會被判斷為true,並將字串assign給window.libraryName;若尚未被賦值則會判斷為false,並將”||”右邊的字串回傳assign給window.libraryName。

1
2
3
4
5
6
7
8
//lib1.js中
var libraryName = 'lib1';

//lib2.js中
window.libraryName = window.libraryName || "lib2";

//app.js中
console.log(libraryName);//lib1

© 2020 Leah's Blog All Rights Reserved. 本站访客数人次 本站总访问量
Theme by hiero