前端的flutter之路（一）：語法

剛開始學習flutter的話，我的感受並不須要太多的dart語法知識，因此下面就只是簡單的說一下js和dart的語法差別（一開始有的語法看的不是很懂，致使看的老是隻知其一;不知其二的）。

字符串的差別

dart中字符串的表示方法有不少：

1. 單引號 'Single quotes work well for string literals.'
2. 雙引號 "Single quotes work well for string literals."
3. 多行字符串，

'''Single quotes work well for string literals. dsa'''
複製代碼

"""Single quotes work well for string literals. dsa"""
複製代碼

4. raw string，在前幾種表示方式以前加上r便可。 r"Single quotes work well for string literals."

5. 字符串拼接，跟js不一樣，+無關緊要。好比'test '"string"和'test ' + "string"都是能夠的。

6. 使用變量，$name或者 ${name}均可以，前一種方法的後面不能直接跟字符串，要用空格或者逗號等方式隔開

String name = 'hello';
print('$name string'); // hello string
print('${name} string'); // hello string
複製代碼

布爾值的轉換

在js中，使用判斷的時候空字符串，0，null，undefined都會被轉換爲false。

可是在dart中，判斷條件就只能用bool值，若是是其餘類型的數據，就會拋出類型錯誤。

List

dart中的List和js中的數組比較像，均可以使用..展開數組。

List list = [1, 2, 3];
List list2 = [0, ...list];
複製代碼

不一樣點：

• ...? 防止被擴展數組爲null的時候程序報錯

var list;
var list2 = [0, ...?list];
複製代碼

• 使用List<變量類型>聲明後，該數據中就只能存放同種類型的數據，而不是隨意混合
• 忽然發現dart2.3之後支持在List中直接使用表達式了
• 判斷語句

var nav = [
 'Home',
 'Furniture',
 'Plants',
 if (promoActive) 'Outlet'
];
複製代碼

• 循環語句

var listOfInts = [1, 2, 3];
var listOfStrings = [
 '#0',
 for (var i in listOfInts) '#$i'
];
複製代碼

Map和js中的對象

// var gifts = Map();
var gifts = {'first': 'partridge'};
gifts['second'] = 'partridge';
複製代碼

注意：

• 存取時都只能經過['鍵名']的方式訪問值，而不能用.操做符，由於dart算是一個強類型語言，Map並不知道它自己有這個鍵，因此用.就會報錯
• 定義時鍵名若是是字符串，不能像js同樣省略

在某種意義上來講，dart的類實例和js的對象也比較像，能夠經過.操做符訪問某個鍵的值，畢竟聲明過了嘛，哈哈。

初學dart的前端可能常常分不清Map和類實例，就以爲不都是對象嘛，怎麼訪問不到呢？這裏教你們一個方法：使用 print(變量);若是是Map，打印出來就相似js中的對象，而若是是類實例，打印出來就是Instance of '類'。

其實這種困惑主要發生在使用網絡請求後，其實返回的不是List就是Map，要想使用.操做符的話，就須要本身轉換類型了。json轉model的話能夠看看這個

函數

dart函數的參數分爲 positional parameters（位置參數） 和 named parameters（命名參數）。

// positional parameters（位置參數,默認必傳）
bool isNoble(int atomicNumber) {
 return atomicNumber != null;
}

// named parameters（命名參數,默承認選）
bool isNoble({ int atomicNumber }) {
 return atomicNumber != null;
}
複製代碼

調用

// positional parameters（位置參數）
isNoble(1);

// named parameters（命名參數）
isNoble(atomicNumber: 1);
複製代碼

參數可選和必填：

// positional parameters（位置參數,默認必傳,用[]表示可選）
bool isNoble([int atomicNumber]) {
 return atomicNumber != null;
}

// named parameters（命名參數,默承認選，使用@required表示必傳）
bool isNoble({ @required int atomicNumber }) {
 return atomicNumber != null;
}
複製代碼

要使用required註解的話，還須要引入package:meta/meta.dart，不然會報錯的。在flutter中，package:flutter/material.dart已經默認引入了，因此才能夠直接使用。

類

這個的話其實也沒什麼好多的了，

• 在定義時訪問實例的方法和參數時，不須要加上this
• 構造函數中使用this.參數能夠直接賦值

class User {
 String name;
 // 位置參數
 User(this.name);
 // 至關於 User([name]): this.name = name;
 
 // 命名參數的形式
 // User({this.name});
}
複製代碼

其餘

• 使用 ?. 訪問能夠防止某個屬性不存在
• String name = User().name ?? 'name'; dart中的 ?? 至關於js中的 || 方式吧
• 函數的級聯也叫鏈式調用。Dart 原生語法支持鏈式調用，只須要使用 ..

querySelector('#confirm') // element
 ..text = 'Confirm'
 ..classes.add('important')
 ..onClick.listen((e) => window.alert('Confirmed!'));
複製代碼

第二行以後訪問的都是element的鍵和方法。