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》 。