Flutter開發之Dart必備基礎知識
在本文中我們主要對標JavaScript來講解Dart與JavaScript的異同,對JavaScript還不熟悉的小夥伴可以省略JavaScript部分,直接學習Flutter部分。
程式入口
JavaScript沒有預定義的入口函式,但在Dart中,每個app都必須有一個頂級的 main()
函式作為應用程式的入口點。
// Dart main() { }
練一練 DartPad 。
DartPad 是Dart的一個線上playground,提供Dart線上playground還有: Online Dart Compiler 。
控制檯輸出
要在Dart中列印到控制檯,可使用 print
:
// JavaScript console.log("Hello world!"); // Dart print('Hello world!');
練一練 DartPad 。
變數
Dart是型別安全的- 它使用靜態型別檢查和執行時的組合,檢查以確保變數的值始終與變數的靜態值匹配 型別。儘管型別是必需的,但某些型別註釋是可選的,因為 Dart會執行型別推斷。
建立和分配變數
在JavaScript中,無法定義變數型別。
在 Dart中, 變數必須是明確的 型別或系統能夠解析的型別。
// JavaScript var name = "JavaScript"; // Dart String name = 'dart'; // Explicitly typed as a string. var otherName = 'Dart'; // Inferred string. // Both are acceptable in Dart.
練一練 DartPad 。
有關更多資訊, 可參考 Dart’s Type System 。
預設值
在JavaScript中,未初始化的變數是 undefined
。
在Dart中,未初始化的變數的初始值為 null
。
注意:數字在Dart中也被當成物件,所以只要是帶有數字型別的未初始化變數的值都是“null”。
// JavaScript var name; // == undefined // Dart var name; // == null int x; // == null
嘗試一下 DartPad 。
有關更多資訊, 可參考Dart官網關於 變數 的介紹。
檢查null或零
在JavaScript中,1或任何非null物件的值被視為true。
// JavaScript var myNull = null; if (!myNull) { console.log("null is treated as false"); } var zero = 0; if (!zero) { console.log("0 is treated as false"); }
在Dart中,只有布林值“true”被視為true。
// Dart var myNull = null; if (myNull == null) { print('use "== null" to check null'); } var zero = 0; if (zero == 0) { print('use "== 0" to check zero'); }
練一練 DartPad 。
前方高能
Dart null檢查最佳實踐
從Dart 1.12開始,null-aware運算子可用幫助我們做null檢查:
bool isConnected(a, b) { bool outConn = outgoing[a]?.contains(b) ?? false; bool inConn = incoming[a]?.contains(b) ?? false; return outConn || inConn; }
?.
運算子在左邊為null的情況下會阻斷右邊的呼叫, ??
運算子主要作用是在左側表示式為null時為其設定預設值。
對於表示式:
outgoing[a]?.contains(b)
如果outgoing為null或outgoing[a]為null或contains(b)的值為null,都會導致表示式為null。
大家看一下下面預計的執行結果:
print(null ?? false); print(false ?? 11); print(true ?? false);
技巧:獲取一個物件中陣列的長度: searchModel?.data?.length ?? 0
。
Functions
Dart和JavaScript函式類似。主要區別是宣告:
// JavaScript ES5 function fn() { return true; } // Dart fn() { return true; } // can also be written as bool fn() { return true; }
練一練 DartPad 。
關於functions的更多內容可參考dart官方文件 functions 。
非同步程式設計
Futures
與JavaScript一樣,Dart支援單執行緒執行。在JavaScript中, Promise
物件表示非同步操作的最終完成(或失敗)及其結果值,Dart使用 Future
來表示非同步操作:
// JavaScript _getIPAddress = () => { const url="https://httpbin.org/ip"; return fetch(url) .then(response => response.json()) .then(responseJson => { console.log(responseJson.origin); }) .catch(error => { console.error(error); }); }; // Dart _getIPAddress() { final url = 'https://httpbin.org/ip'; HttpRequest.request(url).then((value) { print(json.decode(value.responseText)['origin']); }).catchError((error) => print(error)); }
練一練: DartPad 。
關於Futures的更多內容可參考dart官方文件 Futures 。
async 和 await
async
函式宣告定義了一個非同步函式。
在JavaScript中, async
函式返回一個 Promise
。 await
運算子是用來等待 Promise
:
// JavaScript async _getIPAddress() { const url="https://httpbin.org/ip"; const response = await fetch(url); const json = await response.json(); const data = await json.origin; console.log(data); }
在Dart中, async
函式返回一個 Future
,函式的主體是稍後執行。 await
運算子用於等待 Future
:
// Dart _getIPAddress() async { final url = 'https://httpbin.org/ip'; var request = await HttpRequest.request(url); String ip = json.decode(request.responseText)['origin']; print(ip); }
練一練 DartPad 。
關於Futures的更多內容可參考dart官方文件 async and await 。
關於Dart必備基礎知識的更多實戰技巧與最佳實踐可學習 《基於Flutter1.x開發攜程網App》 。