一、相似之处
1. 基础语法结构
· 均使用 if/else、for、while、switch 等控制流语句。
· 支持 // 单行注释和 /* */ 多行注释。
· 使用 {} 定义代码块。
示例:条件判断
// Dart
if (condition) {
print('True');
} else {
print('False');
}
// JavaScript
if (condition) {
console.log('True');
} else {
console.log('False');
}
2. 函数定义
· 支持函数作为一等公民(可赋值给变量、作为参数传递)。
· 支持箭头函数(简化单行函数)。
示例:箭头函数
// Dart
var add = (int a, int b) => a + b;
// JavaScript
const add = (a, b) => a + b;
3. 异步处理(async/await)
· 均支持 async/await 语法处理异步操作。
· 返回 Promise(JS)或 Future(Dart)。
示例:异步函数
// Dart
Future
var data = await http.get('https://api.example.com');
print(data);
}
// JavaScript
async function fetchData() {
const data = await fetch('https://api.example.com');
console.log(data);
}
二、不同之处
1. 变量声明与类型
· Dart
· 显式声明类型(可选,但推荐):int x = 10;
· 使用 var 自动推断类型:var name = 'Dart';
· 支持 final(不可变变量)和 const(编译时常量)。
· JavaScript
· 动态类型:let x = 10; 或 const name = 'JS';
· 无静态类型(需用 TypeScript 补充)。
示例:类型声明
// Dart
String name = 'Dart'; // 显式类型
final age = 25; // 不可变
const PI = 3.14; // 编译时常量
// JavaScript
let name = 'JS'; // 可变变量
const PI = 3.14; // 不可变常量
2. 类与继承
· Dart
· 更接近 Java/C#,支持 class、extends、implements、mixin。
· 构造函数可简化:ClassName(this.param1, this.param2);
· 支持命名构造函数:ClassName.named();
· JavaScript
· 基于原型链的继承(ES6 引入 class 语法糖)。
· 无接口(需通过约定或 TypeScript 实现)。
示例:类定义
// Dart
class Animal {
String name;
Animal(this.name); // 简化构造函数
void speak() => print('Sound');
}
class Dog extends Animal {
Dog(String name) : super(name);
@override
void speak() => print('Bark');
}
// JavaScript
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log('Sound');
}
}
class Dog extends Animal {
speak() {
console.log('Bark');
}
}
3. 空安全(Null Safety)
· Dart
· 默认变量不可为 null,需显式声明可空:String? nullableName;
· 避免空指针异常。
· JavaScript
· 无内置空安全,变量默认可为 null 或 undefined。
示例:可空类型
// Dart
String? name; // 可空变量
name = null; // 允许
name.length; // 编译错误,需判空:name?.length
// JavaScript
let name = null;
console.log(name.length); // 运行时错误:Cannot read property 'length' of null
4. 集合操作
· Dart
· 使用 List 和 Map,支持强类型集合:List
· 扩展操作符:var combined = [...list1, ...list2];
· JavaScript
· 使用 Array 和 Object(或 Map),动态类型。
· 扩展操作符:const combined = [...arr1, ...arr2];
示例:集合操作
// Dart
List
List
// JavaScript
const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers]; // 合并数组
5. 模块导入导出
· Dart
· 使用 import 和 export,支持库前缀和条件导入:
import 'package:http/http.dart' as http;
import 'src/utils.dart' show helperFunction;
· JavaScript
· 使用 import/export(ES6 模块):
import http from 'http';
import { helperFunction } from './src/utils.js';
6. 字符串插值
· Dart
· 使用 $ 或 ${}:print('Hello $name, age: ${age + 1}');
· JavaScript
· 使用模板字符串:console.log(Hello {name}, age: {age + 1});
三、总结
· 相似点:基础语法、函数式特性、异步处理逻辑。
· 不同点:
· Dart 强调类型安全和代码规范(类似 Java/C#),JavaScript 更灵活(需依赖工具链如 TypeScript 约束)。
· Dart 的类系统更完善,JavaScript 依赖原型链。
· Dart 支持空安全,JavaScript 需自行处理空值。
代码风格对比示例
1. 函数式操作(过滤列表)
// Dart
List
var evenNumbers = numbers.where((n) => n % 2 == 0).toList();
// JavaScript
const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(n => n % 2 === 0);
2. 异步链式调用
// Dart
Future
try {
var data = await fetchData();
var result = await process(data);
print(result);
} catch (e) {
print('Error: $e');
}
}
// JavaScript
async function processData() {
try {
const data = await fetchData();
const result = await process(data);
console.log(result);
} catch (e) {
console.error(`Error: ${e}`);
}
}
选择建议
· 若需强类型、跨平台 UI 开发(Flutter),选 Dart。
· 若需灵活快速开发 Web 应用或依赖庞大生态,选 JavaScript/TypeScript。
本文暂时没有评论,来添加一个吧(●'◡'●)