Flutter 前端秒入门，Dart 与 JavaScript 快速对照表

类型/概念

JavaScript 示例

Dart 示例

数字

let num = 100;

int num = 100;

字符串

let str = "Hello World";

String str = 'Hello World';

布尔值

let flag = true;

bool flag = true;

对象

let obj = {key: "value"};

Map<String, dynamic> obj = {'key': 'value'};

数组

let arr = [1, "2", true];

List arr = [1, '2', true];

函数

function hellow() {}

void hellow() {}

空值

let nothing = null;

Null nothing = null;

未定义

let undef;

Dart 没有 "undefined" 概念，空值用 null

正则表达式

let regex = /ab+c/;

RegExp regex = RegExp('ab+c');

日期

let date = new Date();

DateTime date = DateTime.now();

错误

let error = new Error('Error msg');

Exception error = Exception('Error msg');

Promise (异步)

let promise = new Promise();

Future promise = Future(() {});

类

class MyClass {}

class MyClass {}

Set (集合)

let set = new Set();

Set set = Set();

Map (映射)

Object、Map

Map<K, V> map = Map();

Symbol

let sym = Symbol('s');

Symbol sym = Symbol('s');

功能

JavaScript

Dart

打印输出

console.log('Hello, World!');

print('Hello, World!');

变量声明

let variable = 'value';

const constant = 'value';

var variable = 'value';

final constant = 'value';

const compileTimeConstant = 'value';

类型声明

let num = 10;

let str = 'hello';

int num = 10;

String str = 'hello';

函数定义

function myFunction(param) {

return param;

}

T myFunction<T>(T param) {

return param;

}

箭头函数

(param) => { return param; }

(param) => param;

类定义

class MyClass {

constructor(value) {

this.property = value;

}

}

class MyClass {

MyClass(this.property);

var property;

}

类继承

class MySubclass extends MyClass {

constructor(value) {

super(value);

}

}

class MySubclass extends MyClass {

MySubclass(var value) : super(value);

}

接口

abstract class MyInterface {

void myMethod();

}

异步编程

async function myAsyncFunction() {

let value = await fetchValue();

}

Future<void> myAsyncFunction() async {

var value = await fetchValue();

}

模块导入

import myModule from 'module.js';

import 'package:my_package/my_module.dart';

错误处理

try {

// code

} catch (error) {

// error handling

}

try {

// code

} on SpecificException catch (e) {

// handle specific exception

} catch (e) {

// handle all other exceptions

}

泛型

function myFunction<T>(arg: T): T {

return arg;

}

T myFunction<T>(T arg) {

return arg;

}

映射（字典/对象）

let map = { key: 'value' };

var map = { 'key': 'value' };

列表（数组）

let list = [1, 2, 3];

var list = [1, 2, 3];

解构赋值

let [a, b] = list;

var a = list[0];

var b = list[1]; // Dart没有内置的解构赋值

展开运算符

let newList = [...list, 4];

var newList = [...list, 4];

空值检查

let value = possiblyNull ?? 'default';

var value = possiblyNull ?? 'default';

条件属性访问

let value = object?.property;

var value = object?.property;

字符串模板

let str = `Hello, ${name}!`;

var str = 'Hello, $name!';

块作用域

{ let scopedVar = 'value'; }

{ var scopedVar = 'value'; } // Dart中var具有块作用域

类型转换

Number('42'); // 显式转换

+'42'; // 隐式转换

int.parse('42'); // 显式转换

类型检查

typeof variable === 'string'

variable is String

多行字符串

let multi = `Line1`<br>`Line2`;

var multi = '''Line1

Line2''';

功能

JavaScript

Dart

创建数组/列表

let array = [1, 2, 3];

List<int> list = [1, 2, 3];

获取长度

array.length;

list.length;

添加元素

array.push(4);

list.add(4);

合并数组/列表

let newArray = array.concat([5, 6]);

List<int> newList = [...list, 5, 6];

遍历元素

array.forEach((item) => { /* ... */ });

list.forEach((item) => { /* ... */ });

映射转换

let squares = array.map(x => x * x);

List<int> squares = list.map((x) => x * x).toList();

过滤元素

let evens = array.filter(x => x % 2 === 0);

List<int> evens = list.where((x) => x % 2 == 0).toList();

查找元素

let found = array.find(x => x === 2);

int found = list.firstWhere((x) => x == 2, orElse: () => -1);

排序

array.sort((a, b) => a - b);

list.sort((a, b) => a.compareTo(b));

判断所有元素

array.every((x) => x > 0);

list.every((x) => x > 0);

判断任一元素

array.some((x) => x > 0);

list.any((x) => x > 0);

累加元素

let sum = array.reduce((acc, x) => acc + x, 0);

int sum = list.reduce((acc, x) => acc + x);

查找索引

let index = array.indexOf(3);

int index = list.indexOf(3);

删除元素

array.splice(index, 1); // 删除索引处的元素

list.removeAt(index); // 删除索引处的元素

插入元素

array.splice(index, 0, 'newItem'); // 在索引处插入元素

list.insert(index, 'newItem'); // 在索引处插入元素

复制数组/列表

let copy = array.slice(); // 浅复制

List<int> copy = List<int>.from(list); // 浅复制

多维数组/列表

let multiDim = [[1, 2], [3, 4]];

List<List<int>> multiDim = [[1, 2], [3, 4]];

数组/列表解构

let [first, ...rest] = array;

int first = list.first;

List<int> rest = list.sublist(1);

数组/列表扁平化

let flatArray = multiDimArray.flat();

List<int> flatList = multiDim.expand((x) => x).toList();

功能

JavaScript

Dart

创建对象/Map

let obj = { key1: 'value1', key2: 'value2' };

Map<String, String> map = { 'key1': 'value1', 'key2': 'value2' };

添加键值对

obj['key3'] = 'value3';

obj.key4 = 'value4';

map['key3'] = 'value3';

获取值

let value1 = obj['key1'];

let value2 = obj.key2;

String value1 = map['key1'];

删除键值对

delete obj['key2'];

map.remove('key2');

遍历键值对

for (let key in obj) {

if (obj.hasOwnProperty(key)) {

console.log(key, obj[key]);

}

}

map.forEach((key, value) {

print('$key: $value');

});

获取所有键

Object.keys(obj);

map.keys;

获取所有值

Object.values(obj);

map.values;

检查键存在

'key1' in obj;

map.containsKey('key1');

复制对象/Map

let objCopy = { ...obj };

Map<String, String> mapCopy = Map<String, String>.from(map);

合并对象/Map

let mergedObj = { ...obj1, ...obj2 };

map1.addAll(map2);

键值对数量

Object.keys(obj).length;

map.length;

清空对象/Map

for (let key in obj) {

if (obj.hasOwnProperty(key)) {

delete obj[key];

}

}

map.clear();

对象解构

let { key1, key2 } = obj;

var key1 = map['key1'];

var key2 = map['key2']; // Dart没有内置的解构