1.【文档讲解】Dart基础快速入门

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

DartPadDart的一个线上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函数返回一个Promiseawait运算符是用来等待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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容