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