From JavaScript To Dart
Dart 的一些特性
- Dart 是静态类型的，但是 Dart 可以推断类型，类型系统也是可选的
- Dart 没有关键字 public， protected 和 private
- 支持 Optional named parameters 与 Optional positional parameters
- 函数是一等公民
- 级联操作符 / 条件成员访问操作符...
- 继承 / 抽象类 / 隐式接口 ( class 即 interface ) / Mixin / 枚举
- 支持泛型
- 支持元数据（注解）
- async 和 await 及 Future API / Stream API
- 不支持对象字面量，函数重载，匿名内部类，联合类型，non-nullable types，tuples 等功能
JavaScript to Dart
打印日志
- JavaScript
console.log('Hello World')
- Dart
print('Hello World');
常量与变量
- JavaScript
let num = 1;
const num = 1;
- Dart
int num = 1;
var num = 1;
const num = 1;
final num = 1;
null声明
- JavaScript
let lineCount = null;
- Dart
未初始化的变量默认值是 null
int lineCount;
空判断
- JavaScript
if (text) {
const length = text.length();
}
- Dart
// If p is non-null, set its y value to 4.
p?.y = 4;
字符串拼接
- JavaScript
let firstName = "Amit";
let lastName = "Shekhar";
let message = "My name is: " + firstName + " " + lastName;
- Dart
var firstName = "Amit";
var lastName = "Shekhar";
var message = "My name is: $firstName $lastName";
换行
- JavaScript
let text = "First Line\n" +
"Second Line\n" +
"Third Line";
- Dart
var text = """
First Line
Second Line
Third Line
""";
三元表达式
- JavaScript
let text = x > 5 ? "x > 5" : "x <= 5";
- Dart
var text = x > 5 ? "x > 5" : "x <= 5";
String playerName = name ?? 'Guest';
操作符
- JavaScript
const andResult = a & b;
const orResult = a | b;
const xorResult = a ^ b;
const rightShift = a >> 2;
const leftShift = a << 2;
const unsignedRightShift = a >>> 2;
- Dart
var andResult = a & b;
var orResult = a | b;
var xorResult = a ^ b;
var rightShift = a >> 2;
var leftShift = a << 2;
类型判断和转换 (声明式)
- JavaScript
class Person {
firstName;
constructor(firstName) {
this.firstName = firstName;
console.log(`in Person${firstName}`);
}
}
class Employee extends Person {
constructor(firstName) {
super(firstName);
console.log(`in Employee${firstName}`);
}
}
const emp = new Employee('Peter');
emp.firstName = 'Bob';
console.log(emp.firstName);
- Dart
class Person {
String firstName;
Person(this.firstName) {
print('in Person$firstName');
}
}
class Employee extends Person {
Employee(firstName) : super(firstName) {
print('in Employee$firstName');
}
}
void main() {
var emp = new Employee('Peter');
if (emp is Person) {
// Type check
emp.firstName = 'Bob';
}
(emp as Person).firstName = 'Bob';
print(emp.firstName);
}
类型判断和转换 (隐式)
- JavaScript
"1" + 2
- Dart
"1" + 2 // The argument type 'String' can't be assigned to the parameter type 'num'.
集合操作
- JavaScript
// Or simply use a list literal.
var fruits = ['apples', 'oranges'];
// Add to a list.
fruits.push('kiwis');
// Add multiple items to a list.
fruits = fruits.concat(['grapes', 'bananas']);
// Remove a single item.
var appleIndex = fruits.indexOf('apples');
fruits.splice(appleIndex, 1);
console.log(fruits);
- Dart
// Or simply use a list literal.
var fruits = ['apples', 'oranges'];
// Add to a list.
fruits.add('kiwis');
// Add multiple items to a list.
fruits.addAll(['grapes', 'bananas']);
// Remove a single item.
var appleIndex = fruits.indexOf('apples');
fruits.removeAt(appleIndex);
print(fruits);
fruits.clear();
print(fruits.isEmpty);
方法定义
- JavaScript
function doSomething() {
// logic here
}
function doSomething(numbers) {
// logic here
}
- Dart
void doSomething() {
// logic here
}
fun doSomething(List numbers) {
// logic here
}
带返回值的方法
- JavaScript
function getScore() {
// logic here
return score;
}
- Dart
int getScore(int score) {
// logic here
return score * 100;
}
// as a single-expression function
int getScore(int score) => score * 100;
constructor 构造器
- JavaScript
class Point {
constructor(x, y) {
// There's a better way to do this, stay tuned.
this.x = x;
this.y = y;
}
}
- Dart
class Point {
num x, y;
Point(num x, num y) {
// There's a better way to do this, stay tuned.
this.x = x;
this.y = y;
}
}
// another way
class Point {
num x, y;
// Syntactic sugar for setting x and y
// before the constructor body runs.
Point(this.x, this.y);
}
Get Set 构造器
- JavaScript
class Rectangle {
left;
top;
width;
height;
constructor(left, top, width, height) {
this.left = left;
this.top = top;
this.width = width;
this.height = height;
}
// Define two calculated properties: right and bottom.
get right() {
return this.left + this.width;
}
set right(value) {
this.left = value - this.width
}
get bottom() {
return this.top + this.height;
}
set bottom(value) {
this.top = value - this.height
}
}
- Dart
class Rectangle {
num left, top, width, height;
Rectangle(this.left, this.top, this.width, this.height);
// Define two calculated properties: right and bottom.
num get right => left + width;
set right(num value) => left = value - width;
num get bottom => top + height;
set bottom(num value) => top = value - height;
}
克隆
- JavaScript
lodash#clone
- Dart
dart 不提供通用的 clone 方法，但可以自己实现 clone 方法。
class Foo {
int id;
String something;
List elements;
Foo(this.id, this.something, this.elements);
Foo.clone(Foo original)
: this(original.id, original.something, new List.from(original.elements));
@override
String toString() {
return 'Foo{id: $id, something: $something, elements: $elements}';
}
}
Class 静态方法
- JavaScript
class Utils {
static triple(value) {
return 3 * value;
}
}
- Dart
class Utils {
static int triple(int value) {
return 3 * value;
}
}
enum
- Dart
enum Color { red, green, blue }
void main() {
List colors = Color.values;
assert(colors[2] == Color.blue);
}
排序
- JavaScript
var fruits = ['bananas', 'apples', 'oranges'];
// Sort a list.
fruits.sort();
- Dart
var fruits = ['bananas', 'apples', 'oranges'];
// Sort a list.
fruits.sort();
匿名类
- JavaScript
let Rectangle = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
- Dart
Dart 不支持匿名类与内部类。
Union Types
JavaScript 和 Dart 都不支持 Union Types
- TypeScript
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;