前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Dart语言基础

Dart语言基础

作者头像
zhangjiqun
发布于 2024-12-16 08:37:11
发布于 2024-12-16 08:37:11
14200
代码可运行
举报
文章被收录于专栏:计算机工具计算机工具
运行总次数:0
代码可运行

  var是一个可变变量,这是一个可以通过重新分配来更改为另一个值的变量。这种声明变量的方式和java中声明变量的方式一样。

  val是一个只读变量,这种声明变量的方式相当于java中的final变量。一个val创建的时候必须初始化,因为以后不能被改变。

数据类型

在 Dart 里是强类型的,也有自动推断类型的机制。 在 Dart 里定义变量使用有 var、const、dynamic、Object、类型等方式。对于函数而言,并不需要写 function 关键字,而让它有函数应有的外形即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 基本类型
var name = 'Voyager I';
var antennaDiameter = 3.7;
const image = {
    'tags': ['Jupiter', 'Saturn', 'Uranus', 'Neptune'],
    'url': '//path/to/saturn.jpg'
};

// 函数类型
String sayHello(var name) {
    return 'Hello $name!';
}

// 箭头函数
var add = (a, b) => a + b;

// 类似 Promise
Future sum(num a, num b) async {
    return await add(a, b);
}

// main 函数
void main() async {
    print(sayHello(name));               // Hello Voyager I!
    print(max(1, 2));                    // 2
    sum(1, 2).then((res) => print(res)); // 3 (类似 Promise)
}

Object name1 = "小明";
dynamic name2 = "老王";

dynamic 是任意的意思,它与 var 不同,var 会自动推断类型从而得出一个确定类型,而 dynamic 可以表示任意,相对于 Typescript 中的 any。 Dart 在声明时有以下几个基本类型:number、string、boolean、list、map、rune、symbol

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
int x = 1;
double y = 1.1;
num z = 1.2;
String x = 'abc';
enum Color { red, green, blue };        // 枚举类型
const msPerSecond = 1000;
bool flag = false;
var list = [1, 2, 3];
List arr = [1, 2, 3];
List<String> names = ['a', 'b', 'c'];   // 泛型
var constantList = const [1, 2, 3];

Map nobleGases = const {
    2: 'helium',
    10: 'neon',
    18: 'argon',
};
var gifts = {
    'first': 'partridge',
    'second': 'turtledoves',
    'fifth': 'golden rings'
};
print(gifts['first']);
// 在 Dart 里,对象是 Map 不能用 . 的形式访问,只能用 [] 的形式访问。

函数

Dart 的函数支持函数声明、函数字面量、箭头函数、函数表达式、匿名函数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
int add(int a, int b) {
    return a + b;
}

// 类型可省略
add(a, b) {
    return a + b;
}

// 箭头函数
var add = (a, b) => a + b;
int add(int a, int b) => a + b;

// 可选参数,使用 [] 限定
int add(int a, int b, [int c = 1, int d = 2]) => a + b + c + d;

// 显示指定参数名称,默认参数
int add({ int a = 1, int b = 2 }) {
    return a + b;
}
add(a: 1, b: 2);

// 回调函数
var list = ['apples', 'bananas', 'oranges'];
list.forEach((item) {
    print('${list.indexOf(item)}: $item');
});

// 回调 + 箭头
list.forEach((item) => print(item));

// 闭包
Function makeAdder(int addBy) {
    return (int i) => addBy + i;
}

操作符

操作符包括了:expr++、expr--、()、[]、.、?、等,基本和 ES6 一致,除了没有 === 的判断。

例外有三个特色的操作:is、as、is?

is 用于判断类型,as 用于续言、is?is 相反。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
if (emp is Person) {
    // Type check
    emp.firstName = 'Bob';
}

(emp as Person).firstName = 'Bob';

级联符号(..):允许您在同一个对象上进行一系列操作。除了函数调用之外,还可以访问同一对象上的字段。这通常会为您节省创建临时变量的步骤,并允许您编写更流畅的代码。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var gifts = {
    'first': 'partridge',
    'second': 'turtledoves',
    'fifth': 'golden rings'
};

getGifts() {
    return gifts;
}

// 不使用级联符号
var g = getGifts();
g.first = 1;
g.second = 2;
g.fifth = 3;
// 使用级联符号
getGifts()
    ..first = 1
    ..second = 2
    ..fifth = 3;

级联符号对于时引用操作的是非常有用。

控制流程

Dart 的控制流程支持:if、if-else、for、while、do-while、switch、try-catch-finally

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
if (isRaining()) {
    // ...
} else if (isSnowing()) {
    // ...
} else {
    // ...
}

var message = new StringBuffer('Dart is fun');
for (var i = 0; i < 5; i++) {
    message.write('!');
}

var collection = [0, 1, 2];
for (var x in collection) {
    print(x); // 0 1 2
}

类结构

Dart 的类支持继承、静态方法、接口、构造函数、重载操作符、抽象类、接口类、 mixins等。 Dart 的类不支持什么 public、private 这些。_method 下划线代表私有方法。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
lass X {
    num x, y;
    X(x, y) {
        this.x = x;
        this.y = y;
    }
    void say() {
        print(this.x + this.y);
    }
}

class Point extends X {
    num x;
    num y;

    final int k = 1; // 无法被实例修改值

    static const int initialCapacity = 16; // 静态常量

    // 静态方法
    static add() {
        // ...
    }

    // 构造函数,用 :super(arg) 调用父类的构造函数
    // 等效 => Point(this.x, this.y): super(x, y);
    Point(num x, num y): super(x, y) {
        super.say(); // 调用父类的方法
        this.x = x;
        this.y = y;
    }
    // 命名构造函数(觉得构造函数长的丑,也可以命名哦)
    // var p = new Point.origin();
    Point.origin() {
        x = 0;
        y = 0;
    }

    // getter、setter 函数
    get xx => this.x;
    set xx(v) => this.x = xx;

    // 重写父类的方法,其实不佳 @override 也可以
    @override
    void say() {
        // ···
    }
}

Dart 还支持重载操作符。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 重载操作符
class Vector {
    final int x, y;

    const Vector(this.x, this.y);

    /// Overrides + (a + b).
    Vector operator +(Vector v) {
        return new Vector(x + v.x, y + v.y);
    }

    /// Overrides - (a - b).
    Vector operator -(Vector v) {
        return new Vector(x - v.x, y - v.y);
    }
}

Dart 中的实现接口类。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Impostor implements Person {
    get _name => '';
    String greet(String who) => 'Hi $who. Do you know who I am?';
}

Dart 能支持 mixins,使用 with 关键字。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Musician extends Performer with Musical {
    // ···
}

泛型

Dart 支持泛型哦。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var names = <String>['Seth', 'Kathy', 'Lars'];
var pages = <String, String>{
    'index.html': 'Homepage',
    'robots.txt': 'Hints for web robots',
    'humans.txt': 'We are people, not machines'
};

var names = new List<String>();
names.addAll(['Seth', 'Kathy', 'Lars']);
names.add(42); // Error
print(names is List<String>); // true

// 泛型函数
T first<T>(List<T> ts) {
    T tmp = ts[0];
    return tmp;
}

// 泛型类
abstract class Cache<T> {
    T getByKey(String key);
    void setByKey(String key, T value);
}

模块

Dart 的模块导入。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 全部导入,并且是全局变量
import 'dart:math';
max(1, 2);

// 别名
import 'dart:math' as math;
math.max(1, 2);

// 只导入部分
import 'dart:math' show min;
min(1, 2);

// 懒加载,类似 ES6 的 import()
import 'dart:math' deferred as math;
Future greet() async {
    await math.max(1, 2);
}

导出模块,创建一个 myMath.dart 文件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
int max(int a, int b) {
    return a > b ? a : b;
}

int _min(int a, int b) {
    return a < b ? a : b;
}

Dart 的导出默认是带下划线为私有,其他为公有。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import './myMath.dart' as math;

math.max(1, 2);

异步编程

在 ES6 与异步相关的就是 Promise、async、await。而在 Dart 则是 Future、async、await。

Dart库充满了返回 Future 或 Stream 对象的函数。这些功能是异步的:它们在设置可能耗时的操作(例如 I/O)之后返回,而不等待该操作完成。 在 async 和 await 关键字支持异步编程,让你写异步代码看起来类似于同步代码。

使用 async/await 之前需要引入 dart:async 模块。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import 'dart:async';

Future<String> lookUpVersion() async => '1.0.0';

Future main() async {
    await for (var request in requestServer) {
        handleRequest(request);
    }
}

也支持 then,catchError 等。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
void getIPAddress() {
    final url = 'https://httpbin.org/ip';
    HttpRequest.request(url).then((value) {
        print(json.decode(value.responseText)['origin']);
    }).catchError((error) => print(error));
}

// 也可以这样写
Future<String> getIPAddress() async {
    final url = 'https://httpbin.org/ip';
    var request = await HttpRequest.request(url);
    String ip = json.decode(request.responseText)['origin'];
    return ip;
}

类似 setTimeout 的操作。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 等待 2000ms
await new Future.delayed(const Duration(milliseconds: 2000));

// 或者
new Future.delayed(const Duration(milliseconds: 2000)).then(() {
    // ...
});

JSON处理

json 在 JavaScript 里是一个非常有优势的处理,因为 json 本身延至于 JavaScript。

在 Dart 里处理 json 有两个 API 可用:encode(序列化) 和 decode(反序列化)。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 把对象转为 json 字符串
var jsonstr = json.encode([1, 2, { "a": null }]);

// 把 json 字符串转为对象
var decoded = json.decode('["foo", { "bar": 499 }]');

正则表达式

正则使用的是 RegExp 对象。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
RegExp exp = new RegExp(r"(\w+)");

// 返回正则表达式匹配项的可迭代对象
exp.allMatches("abc def ghi");

// 搜索并返回第一个匹配项,没有则返回null
exp.firstMatch("");

// 正则表达式是否找到匹配项
exp.hasMatch("as");

// 从第几个字符开始匹配正则表达式
exp.matchAsPrefix("ab cd", 3);

// 返回正则表达式的第一个匹配字符串
exp.stringMatch("abc de");

// 返回正则表达式的字符串表示
exp.toString();
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-12-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
React Native 开发工具推荐
近几年在大前端的开发领域,选择跨端方案的公司和部门越来越多,曾一何时市面有不下10种跨端框架,但随着“生物进化论”的推动,目前市面上仅剩两种主流方案,就是经常听到的 React Native 和 Flutter。去年终于引来了 React Native 的新版本 0.70.0,开发者也大为振奋。
Onegun
2023/04/19
1.9K0
React Native 开发工具推荐
移动开发者必备的 React Native 开发工具
近几年在大前端的开发领域,选择跨端方案的公司和部门越来越多,曾一何时市面有不下10种跨端框架,但随着“生物进化论”的推动,目前市面上仅剩两种主流方案,就是经常听到的 React Native 和 Flutter。去年终于引来了 React Native 的新版本 0.70.0,开发者也大为振奋。
凡泰极客
2023/04/21
2K0
使用umi开发react-native应用
自此,开发者可以迅速投入到业务代码的开发,而不用去搭建脚手架,写一堆配置和胶水代码去整合各种框架等等。
conanma
2021/11/02
6.9K0
我不认为Flutter比React Native好
Jamon Holmgren 是一家软件开发公司的创始人兼 CTO,拥有超过 25 年的编程经验,同时也是 React Native 的核心成员,维护着几个开源库。在这篇文章里,他试着尽可能公平地从多方面去讨论 Flutter 和 React Native 的优劣势。本文仅代表他个人观点,希望能为读者带来收获。
深度学习与Python
2022/03/22
2.7K0
前端开发工具的优化使用:提升效率与体验的实战技巧
作为一名前端开发者,我们每天都在与代码打交道。从编写页面布局到实现复杂的交互,再到调试和优化性能,前端的工作内容既丰富又挑战十足。幸运的是,随着前端开发工具的不断升级和完善,我们有了越来越多的利器来提升工作效率,让开发变得更加轻松高效。
Echo_Wish
2025/03/01
1180
前端开发工具的优化使用:提升效率与体验的实战技巧
Luna:你想要的 React Native 调试工具
React Native(以下简称 RN)目前在 Shopee 前端团队得到大量应用。RN 虽然有很多优势,但是其开发和调试流程与 Mobile Web 相比却不那么友好,特别是在运行时的调试。
Shopee技术团队
2022/01/28
2.2K0
Luna:你想要的 React Native 调试工具
Flutter 与 React Native - 详细深入对比分析(2024 年)
Flutter 和 React Native 是跨平台应用程序开发的两个领先工具。了解它们的差异以及各自的最佳用例。
一点一木
2024/10/15
2.2K0
Flutter 与 React Native - 详细深入对比分析(2024 年)
ReactJS和React-Native的主要区别在哪里
React-Native已经存在了约2年,而且因为它能被Android使用让我们构建跨平台的移动app而成为真正有趣的框架。一些开发者还为构建适用于Mac和Windows的桌面应用程序量身打造了一些框架,这简直太酷了。
疯狂的技术宅
2019/03/27
18.2K0
ReactJS和React-Native的主要区别在哪里
React Native 学习资源精选仓库
React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是一名React Native爱好者,或者有一颗热爱钻研新技术的心,喜欢分享技术干货、项目经验、以及你在React Naive学习研究或实践中的一些经验心得等等,欢迎投稿《React Native Awesome》。 如果你是一名Android、iOS、或前端开发人员,有者一颗积极进取的心,欢迎关注《React Native Awesome》。本项目汇
CrazyCodeBoy
2018/05/07
3.1K0
跨端开发框架:一次编码,多端运行的终极解决方案
跨端开发框架是现代应用程序开发的一项重要技术,它使开发者能够使用一套代码基础构建应用程序,并在多个平台上运行,包括Web、移动和桌面。本文将深入探讨跨端开发框架的关键概念,为您提供一份全面的指南,并提供带有实际代码示例的技巧,以帮助您构建强大的跨平台应用。
海拥
2023/09/19
1.5K0
跨端开发框架:一次编码,多端运行的终极解决方案
使用Expo开发React-native程序(一)
开发React-native程序,除了官方提供的React-native CLI外,目前还有一个新的选择Expo。
蒙古上单2
2024/04/09
2.2K2
移动端调试技巧与工具:构建无缝的开发体验
在移动应用开发过程中,调试是不可或缺的一部分。了解如何有效地调试移动应用,可以提高开发效率并改善应用的质量。本文将深入探讨移动端调试的关键技巧和工具,为您提供一份全面的指南,并提供带有实际代码示例的技巧,以帮助您构建更出色的移动应用。
海拥
2023/09/19
5200
移动端调试技巧与工具:构建无缝的开发体验
如今大家还会如何评价 React Native
1、跨平台省钱大法好:我记得当年团队组长拍着桌子说“安卓和iOS各招5个人”的画面,后面一个同事用RN写了个Demo,成功把团队砍到3人。react native的跨平台大法让同一套代码跑双端,是真的省心好用。
Onegun
2025/03/19
2670
如今大家还会如何评价 React Native
Taro3.2 适配 React Native 之运行时架构详解
由 58 前端团队主导的 Taro 3 适配 React Native 工作已完成有一段时间了。目前发布了多个体验版,也将在3月底迎来正式版。基于 Taro 的良好架构演变,适配 React Native 的方案的也做了较大调整,本文将主要介绍 Taro 3 适配 React Native 运行时相关的详细设计与实现。
PHP开发工程师
2021/05/24
2.8K0
Taro3.2 适配 React Native 之运行时架构详解
React Native 核心技术知识点快速入门
Node.js 是 JavaScript 的运行环境,npm 是 Node.js 的包管理器。可以从 Node.js 官方网站 下载并安装适合你操作系统的版本。
威哥爱编程
2025/02/28
5140
干货 | 携程机票 React Native 整洁架构实践
携程机票前台团队在使用 React Native 实现众多业务的过程中,经历了前期少量探索,中期大量应用,后期架构和性能优化的三个阶段。
携程技术
2019/07/22
1.9K0
干货 | 携程机票 React Native 整洁架构实践
React-Native调试工具Redux调试DOM结构查看
redux的调试,除了最基本的打断点进去调试之外,还有一个好用的调试工具reactotron,它能够帮你清楚的记录你所发出的action,以及http请求,可以帮你更好的分析redux的结构。
贺贺V5
2018/08/21
2.9K0
React-Native调试工具Redux调试DOM结构查看
React Native程序调试
在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率。 Developer Menu Android模拟器: 可以通过Command⌘ + M 快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开。 iOS模拟器: 可以通过Command⌘ + D快捷键来快速打开Developer Menu。 在真机上开启Developer Menu: 在真机上你可以通过摇动手机来开启
xiangzhihong
2018/01/26
4K0
原来 React Native 已经如此成熟了
我有很丰富的 React Native 开发经验。但是由于接触它太早了,所以我跟它之间的恩怨是有点多的,曾经在各种场合吐槽了它无数次。主要是早期的版本坑确实多,开发体验并不是很友好,React Native 在国内社区的发展也并不是很好,要解决一个坑的成本非常高。
用户6901603
2024/07/12
5650
原来 React Native 已经如此成熟了
React-native,我们一起走过的坑。
前几个星期,点开了RN的技能树,废话不多说,那我就意简言赅地记录一下自己遇到的坑,避免后人再犯自己的错误。 先说明一下我的运行环境: 1.我当时这个年代用的RN版本是0.55 2.使用的脚手架是create-react-native-app
前端小哥哥
2023/05/04
1.1K0
React-native,我们一起走过的坑。
推荐阅读
相关推荐
React Native 开发工具推荐
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档