JavaScript學習（三）基礎知識 類型轉換 交互 函數表達式

類型轉換

ToString

顯式地調用 String(value) 來達到這一目的

let value = true;
alert(typeof value); // boolean

value = String(value); // 現在，值是一個字符串形式的 "true"
alert(typeof value); // string

ToNumber

在算術函數和表達式中，會自動進行 number 類型轉換。

比如，當使用 / 用於非 number 類型：

alert( "6" / "2" ); // 3, string 類型的值被轉換成 number

也可以使用 Number(value) 顯式地將這個值轉換爲 number 類型。

let str = "123";
alert(typeof str); // string

let num = Number(str); // 變成 number 類型 123

alert(typeof num); // number

當從 string 類型源讀取值時，比如一個文本表單，但是我們期待數字輸入，就經常進行顯式轉換。

如果字符串不是一個有效的數字，轉換的結果會是 NaN，例如：

let age = Number("an arbitrary string instead of a number");

alert(age); // NaN，轉換失敗

number 類型轉換規則：

alert( Number("   123   ") ); // 123
alert( Number("123z") );      // NaN (error reading a number at "z")
alert( Number(true) );        // 1
alert( Number(false) );       // 0

ToBoolean

顯式調用 Boolean(value) 會觸發 boolean 類型轉換。

轉換規則如下：

• 假值，比如 0、空的字符串、null、undefined 和 NaN 變成 false。
• 其他值變成 true。

alert( Boolean(1) ); // true
alert( Boolean(0) ); // false

alert( Boolean("hello") ); // true
alert( Boolean("") ); // false

 

---

 

交互：alert、prompt、confirm

alert

顯示信息。

prompt

顯示信息要求用戶輸入文本。點擊確定返回文本，點擊取消或按下 Esc 鍵返回 null。

confirm

顯示信息等待用戶點擊確定或取消。點擊確定返回 true，點擊取消或 Esc 鍵返回 false。

---

函數

函數聲明

使用函數聲明創建函數。

function showMessage() {
  alert( 'Hello everyone!' );
}

function 關鍵字首先出現，然後是函數名，然後是括號（在上述示例中爲空）之間的參數列表，最後是花括號之間的代碼（即“函數體”）。

 

局部變量

在函數中聲明的變量只在該函數內部可見。

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // 局部變量

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- 錯誤！變量是函數的局部變量

外部變量

函數也可以訪問外部變量

let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  alert(message);
}

showMessage(); // Hello, John

函數命名

一種普遍的做法是用動詞前綴來開始一個函數，這個前綴模糊地描述了這個動作。

• "get…" —— 返回值，
• "calc…" —— 計算
• "create…" —— 創建，

"check…" —— 檢查並返回 boolean 值

showMessage(..)     // 顯示信息
getAge(..)          // 返回 age (gets it somehow)
calcSum(..)         // 計算求和並返回結果
createForm(..)      // 創建表格 (通常會返回它)
checkPermission(..) // 檢查權限並返回 true/false

總結

• 作爲參數傳遞給函數，值被複制到其局部變量
• 函數可以訪問外部變量。但它只能從內到外起作用。函數外部的代碼看不到它的局部變量。
• 函數可以返回值。如果沒有，則其結果是 undefined。

---

函數表達式和箭頭函數

回調函數

我們寫一個包含三個參數的函數 ask(question, yes, no)：

question

question 文本

yes

當回答 “Yes” 時候運行的腳本

no

當回答 “No” 時候運行的腳本

函數需要提出 question（問題），依賴用戶的回答, 調用 yes() 或 no()：

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "You agreed." );
}

function showCancel() {
  alert( "You canceled the execution." );
}

// usage: functions showOk, showCancel are passed as arguments to ask
ask("Do you agree?", showOk, showCancel);

 

ask 參數調用回調函數或只是回調。

我們的想法是，我們傳遞一個函數，並希望稍後在必要時回調它。在我們的例子中，showOk 對應回答 “yes” 的回調，showCancel 對應回答“否”。

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

函數表達式 vs 函數聲明

函數聲明： 函數在主代碼流中單獨聲明。

// Function Declaration
function sum(a, b) {
  return a + b;
}

函數表達式： 一個函數，在一個表達式中或另一個語法結構中創建。這裏，該函數由賦值表達式 = 右側創建：

// Function Expression
let sum = function(a, b) {
  return a + b;
};

函數表達式在執行到達時創建並可用。一旦執行到右側分配 let sum = function…，就會創建並可以使用(複製，調用等)。函數聲明可用於整個腳本/代碼塊。當一個函數聲明在一個代碼塊內運行時，它在該塊內的任何地方都是可見的。

 

總結

• 函數是值。他們可以在代碼的任何地方分配，複製或聲明。
• 如果函數在主代碼流中聲明爲單獨的語句，那就稱爲函數聲明。
• 如果該函數是作爲表達式的一部分創建的，則稱其爲函數表達式。
• 函數聲明在代碼塊執行之前處理。它們在代碼塊中隨處調用。
• 函數表達式在執行流程到時創建。