Flutter开发之Dart必备基础知识

小鱼儿 2022-01-20 15:19 320阅读 0赞

在本文中我们主要对标JavaScript来讲解Dart与JavaScript的异同，对JavaScript还不熟悉的小伙伴可以省略JavaScript部分，直接学习Flutter部分。

## [程序入口][Link 1] ##

JavaScript没有预定义的入口函数，但在Dart中，每个app都必须有一个顶级的`main（）`函数作为应用程序的入口点。

// Dart
    main() {
    }
    复制代码

练一练 [DartPad][]。

> [DartPad][DartPad 1]是Dart的一个线上playground，提供Dart线上playground还有：[Online Dart Compiler][]。

## [控制台输出][Link 1] ##

要在Dart中打印到控制台，可使用`print`：

// JavaScript
    console.log("Hello world!");
    // Dart
    print('Hello world!');
    复制代码

练一练 [DartPad][]。

## [变量][Link 1] ##

**Dart是类型安全的** \- 它使用静态类型检查和运行时的组合,检查以确保变量的值始终与变量的静态值匹配 类型。尽管类型是必需的，但某些类型注释是可选的，因为 Dart会执行类型推断。

### [创建和分配变量][Link 1] ###

在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][DartPad 2]。

有关更多信息, 可参考 [Dart’s Type System][Dart_s Type System]。

### [默认值][Link 1] ###

在JavaScript中，未初始化的变量是 `undefined`。

在Dart中，未初始化的变量的初始值为`null`。

> 注意：数字在Dart中也被当成对象，所以只要是带有数字类型的未初始化变量的值都是“null”。

// JavaScript
    var name; // == undefined
    // Dart
    var name; // == null
    int x; // == null
    复制代码

尝试一下 [DartPad][DartPad 3]。

有关更多信息, 可参考Dart官网关于[变量][Link 2]的介绍。

## [检查null或零][Link 1] ##

在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][DartPad 4]。

> 前方高能

## [Dart null检查最佳实践][Link 1] ##

从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);
    复制代码

[练一练][DartPad]

> 技巧：获取一个对象中数组的长度：`searchModel?.data?.length ?? 0`。

## [Functions][Link 1] ##

Dart和JavaScript函数类似。主要区别是声明：

// JavaScript ES5
    function fn() {
      return true;
    }
    // Dart
    fn() {
      return true;
    }
    // can also be written as
    bool fn() {
      return true;
    }
    复制代码

练一练[DartPad][DartPad 5]。

关于functions的更多内容可参考dart官方文档[functions][]。

## [异步编程][Link 1] ##

### [Futures][Link 1] ###

与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][DartPad 6]。

关于Futures的更多内容可参考dart官方文档[Futures][]。

### [async 和 await][Link 1] ###

`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][DartPad 7]。

关于Futures的更多内容可参考dart官方文档[async and await][]。

> 关于Dart必备基础知识的更多实战技巧与最佳实践可学习[《基于Flutter1.x开发携程网App》][Link 1]。

## [未完待续][Link 1] ##

*  [Flutter入门基础知识][Flutter]
 *  [Flutter主题和文字处理][Link 1]
 *  [Flutter什么是声明式UI][Link 1]
 *  [Flutter布局与列表][Link 1]
 *  [Flutter手势检测及触摸事件处理][Link 1]
 *  [Flutter状态管理d][Link 1]
 *  [Flutter线程和异步UI][Link 1]
 *  [Flutter表单输入与富文本][Link 1]
 *  [Flutter认识视图(Views)md][Link 1]
 *  [Flutter调用硬件、第三方服务以及平台交互、通知][Link 1]
 *  [Flutter路由与导航][Link 1]
 *  [Flutter项目结构、资源、依赖和本地化][Link 1]

## [参考 ][Link 1] ##

*  [Flutter从入门到进阶实战携程网App][Link 1]

转载于:https://juejin.im/post/5c8fcb1a5188252db25243b4

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fcoding.imooc.com%2Fclass%2F321.html
[DartPad]: https://link.juejin.im?target=https%3A%2F%2Fdartpad.dartlang.org%2F0df636e00f348bdec2bc1c8ebc7daeb1
[DartPad 1]: https://link.juejin.im?target=https%3A%2F%2Fdartpad.dartlang.org
[Online Dart Compiler]: https://link.juejin.im?target=https%3A%2F%2Fwww.tutorialspoint.com%2Fexecute_dart_online.php
[DartPad 2]: https://link.juejin.im?target=https%3A%2F%2Fdartpad.dartlang.org%2F3f4625c16e05eec396d6046883739612
[Dart_s Type System]: https://link.juejin.im?target=https%3A%2F%2Fwww.dartlang.org%2Fguides%2Flanguage%2Fsound-dart
[DartPad 3]: https://link.juejin.im?target=https%3A%2F%2Fdartpad.dartlang.org%2F57ec21faa8b6fe2326ffd74e9781a2c7
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fwww.dartlang.org%2Fguides%2Flanguage%2Flanguage-tour%23variables
[DartPad 4]: https://link.juejin.im?target=https%3A%2F%2Fdartpad.dartlang.org%2Fc85038ad677963cb6dc943eb1a0b72e6
[DartPad 5]: https://link.juejin.im?target=https%3A%2F%2Fdartpad.dartlang.org%2F5454e8bfadf3000179d19b9bc6be9918
[functions]: https://link.juejin.im?target=https%3A%2F%2Fwww.dartlang.org%2Fguides%2Flanguage%2Flanguage-tour%23functions
[DartPad 6]: https://link.juejin.im?target=https%3A%2F%2Fdartpad.dartlang.org%2F5a0017d09b6823d0248d965b93133e2e
[Futures]: https://link.juejin.im?target=https%3A%2F%2Fwww.dartlang.org%2Ftutorials%2Flanguage%2Ffutures
[DartPad 7]: https://link.juejin.im?target=https%3A%2F%2Fdartpad.dartlang.org%2F04bb4334985107cddcd021322398c918
[async and await]: https://link.juejin.im?target=https%3A%2F%2Fwww.dartlang.org%2Fguides%2Flanguage%2Flanguage-tour%23asynchrony-support
[Flutter]: https://link.juejin.im?target=http%3A%2F%2Fwww.imooc.com%2Farticle%2F282911