3-2 【文档讲解】Dart基础快速入门
image
声明：Flutter专栏文档均来自慕课网
https://coding.imooc.com/class/321.html
Dart基础知识
-
程序入口
-
控制台输出
-
变量
-
检查null或零
-
Functions
-
异步编程
-
Futures
-
async 和 await
-
在本节中我们主要对标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》。
网友评论