Flutter開發之Dart必備基礎知識

時間 2019-11-30

標籤 flutter 開發 dart 必備基礎知識简体版

原文原文鏈接

在本文中咱們主要對標JavaScript來說解Dart與JavaScript的異同，對JavaScript還不熟悉的小夥伴能夠省略JavaScript部分，直接學習Flutter部分。php

程序入口

JavaScript沒有預約義的入口函數，但在Dart中，每一個app都必須有一個頂級的main（）函數做爲應用程序的入口點。html

// Dart
main() {
}
複製代碼

練一練 DartPad。編程

DartPad是Dart的一個線上playground，提供Dart線上playground還有：Online Dart Compiler。json

控制檯輸出

要在Dart中打印到控制檯，可以使用print：數組

// JavaScript
console.log("Hello world!");
// Dart
print('Hello world!');
複製代碼

練一練 DartPad。安全

變量

Dart是類型安全的 - 它使用靜態類型檢查和運行時的組合,檢查以確保變量的值始終與變量的靜態值匹配類型。儘管類型是必需的，但某些類型註釋是可選的，由於 Dart會執行類型推斷。bash

建立和分配變量

在JavaScript中，沒法定義變量類型。app

在 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。async

有關更多信息, 可參考 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。