前端的flutter之路（一）：语法-白红宇

刚开始学习flutter的话，个人感觉并不需要太多的dart语法知识，所以下面就只是简单的说一下js和dart的语法差异（一开始有的语法看的不是很懂，导致看的总是一知半解的）。

字符串的差异

dart中字符串的表示方法有很多：

单引号 'Single quotes work well for string literals.'

双引号 "Single quotes work well for string literals."

多行字符串，

'''Single quotes work well for string literals.dsa'''复制代码

"""Single quotes work well for string literals.dsa"""复制代码

raw string，在前几种表示方式之前加上r即可。 r"Single quotes work well for string literals."

字符串拼接，跟js不同，+可有可无。比如'test '"string"和'test ' + "string"都是可以的。

使用变量，$name或者 ${name}都可以，前一种方法的后面不能直接跟字符串，要用空格或者逗号等方式隔开

String name = 'hello';print('$name string'); // hello stringprint('${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的键和方法。