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<int> 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<Color> 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;