Dart和JavaScript对比小结

记得叫大红大厨 發表於 2019-11-26 13:25:00

作为一名web前端来入门dart，新语言和我们熟悉的js有所差异，写dart的过程中容易受到原有思维的影响，这里把dart和js做一个对比总结，方便查找和熟悉。
 
<h2 id="LyqUp">变量声明</h2>
<ol start="1">
<li>var 关键字</li>
</ol>
dart和js都支持var关键字，使用 var 关键词进行声明的时候，dart 会自动推断出当前变量的类型，如果在变量声明的时候没有进行赋值，那么该类型就是动态的，类似于 TS 的 any。在类型推断上跟 <code>TypeScript</code> 是一致的。
众所周知，JavaScript 是一门弱类型的语言，而 Dart 是强类型的语言
但dart也支持一些弱类型，Dart 中弱类型有<code>var</code>, <code>Object</code> 以及<code>dynamic</code>
大家在学习dart的过程中，可能有疑问：同为弱类型，<code>var</code>, <code>Object</code> 以及<code>dynamic</code>有什么区别？
(1) var 初始可定义, 如果有初始值，那么其类型将会被锁定，定义之后不可改变类型
(2) Object 动态任意类型，编译阶段检查类型
(3) dynamic 动态任意类型，编译阶段不检查类型
<code>var</code> 初始化确定类型后不可更改类型， <code>Object</code> 以及<code>dynamic</code> 可以更改类型
<code>Object</code> 编译阶段检查类型, 而 <code>dynamic</code> 编译阶段不检查类型
<div class="cnblogs_code">
<pre>// 同样在声明的时候类型
var a = 'defalut';
Object b = 'defalut';
dynamic c = 'defalut'; // 编译时不会检查数据类型

a = 123;
//出现报错提示A value of type 'int' can't be assigned to a variable of type 'String'
//Try changing the type of the variable, or casting the right-hand type to 'String'

b = 123;
c = 123;

b.foo(); // 出现报错提示The method 'foo' isn't defined for the class 'Object'.
// Try correcting the name to the name of an existing method, or defining a method 
// named 'foo'.dart(undefined_method)

c.foo(); // 通过它定义的变量会关闭类型检查,这段代码静态类型检查不会报错，但是运行时会crash，
// 因为mic并没有foo（）方法，所以建议大家在编程时不要直接使用dynamic</pre>
</div>
<ol start="2">
<li>final 关键字  </li>
</ol>
在学习dart 的过程中，很快就能接触到 final 关键字，大家会发现它和 const 其实很像，都是必须初始化，初始化后都是只读的，不可变
但此时可能又会发出灵魂疑问：final和const有啥区别？
它们的区别在于，const比final更加严格。final只是要求变量在初始化后值不变，但通过final，我们无法在编译时（运行之前）知道这个变量的值；而const所修饰的是编译时常量，我们在编译时就已经知道了它的值。
<div class="cnblogs_code">
<pre>// 定义常量
final a = 90;
static const b = 90;

final c = new DateTime.now(); // 在编译时不知道他的值
static const d = new DateTime.now(); // Const variables must be initialized with a
// constant value.Try changing the initializer to be a constant </pre>
</div>
<ol start="3">
<li>默认值</li>
</ol>
js中变量的初始值是undefined
<div class="cnblogs_code">
<pre>var a
console.log(a) // undefined</pre>
</div>
在 Dart 中，未初始化的变量拥有一个默认的初始化值： <code>null</code>。即便数字也是如此，因为在 Dart 中一切皆为对象，数字也不例外。要用final的话必须定义一个初始值
<div class="cnblogs_code">
<pre>var some;// -> null
bool flag;// -> null
int number;// -> null
String str;// -> null
Object obj;// -> null
final namic;// Error: must be initialized</pre>
</div>
<ol start="4">
<li>类型判断</li>
</ol>
js用 typeof 来判断基本类型（字符串（string）、数值（number）、布尔值（boolean）、undefined），用 instanceof 来判断引用类型（Object对象Array数组Function函数）
<div class="cnblogs_code">
<pre>var a = 0
var b = '0'
var c
var d = true

var e = {}
var f = []
var g = function(){}

typeof a // number
typeof b // string
typeof c // undefined
typeof d // boolean

e instanceof Object // true
f instanceof Array // true
g instanceof Function // true</pre>
</div>
dart 用关键字 is 来进行类型判断，返回布尔值，ps: assert 生产环境忽略，debug模式开启
<div class="cnblogs_code">
<pre>var a = 123;
print(a is dynamic);// true
assert(a is Object);// true</pre>
</div>
<ol start="5">
<li>类型转换</li>
</ol>
js除了自动类型转换之外，还有类型转换的方法
<div class="cnblogs_code">
<pre>// json和字符串互相转换
var obj = {a:'2.2'}
var str = JSON.stringify(obj) // "{"a":"2.2"}"
JSON.parse(str) // {a: "2.2"}
Number(obj.a) // 2.2 // 转成number类型
parseInt(obj.a) // 2 转成int类型</pre>
</div>
在实际项目中，后台接口往往会返回一些结构化数据，如JSON、XML等，可以通过<code>dart:convert</code>中内置的JSON解码器json.decode() 来进行转换。
通过json.decode() 将JSON字符串转为List/Map的方法比较简单，它没有外部依赖或其它的设置，对于小项目很方便。但当项目变大时，这种手动编写序列化逻辑可能变得难以管理且容易出错，JSON.decode()仅返回一个<code>Map<String, dynamic></code>，这意味着我们直到运行时才知道值的类型。通过这种方法，我们失去了大部分静态类型语言特性：类型安全、自动补全和最重要的编译时异常。
<div class="cnblogs_code">
<pre>// 内连序列化JSON 使用 dart:convert手动序列化JSON
// JSON.decode方法来解码JSON
//一个JSON格式的用户列表字符串
String jsonStr='[{"name":"Jack"},{"name":"Rose"}]';
//将JSON字符串转为Dart对象(此处是List)
List items=json.decode(jsonStr);
//输出第一个用户的姓名
print(items["name"]);</pre>
</div>
可以通过引入一个简单的模型类(Model class)来解决前面提到的问题
这样，调用代码现在可以具有类型安全、自动补全字段（name和email）以及编译时异常。如果我们将拼写错误字段视为<code>int</code>类型而不是<code>String</code>，那么我们的代码就不会通过编译，而不是在运行时崩溃。
官方推荐的json_serializable package包 
操作方法：JSON 转dart Model 类 
<h2 id="va3WA">布尔值</h2>
 
在js中，自动类型转换，使用判断的时候空字符串，0，null，undefined都会被转换为false
<div id="QvRNa" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22var%20flag%20%3D%201%20%3D%3D%20'1'%3B%5Cnconsole.log(flag)%3B%20%20%2F%2F%20-%3E%20true%22%2C%22id%22%3A%22QvRNa%22%7D">
<div class="lake-codeblock-content">
<div class="cnblogs_code">
<pre>var flag = 1 == '1';
console.log(flag);// -> true</pre>
</div>
Dart是强类型语言，不会进行自动类型转换，在判断的时候就要注意了
<div class="cnblogs_code">
<pre>bool flag = 1 == '1';
print(flag);// -> false
// 检查是否为空字符串。
var fullName = '';
assert(fullName.isEmpty);
// 检查是否小于等于零。
var hitPoints = 0;
assert(hitPoints <= 0);
// 检查是否为 null。
var unicorn;
assert(unicorn == null);
// 检查是否为 NaN。
var iMeantToDoThis = 0 / 0;
assert(iMeantToDoThis.isNaN);</pre>
</div>
<h2 id="dqNjm">字符串</h2>
 
js
<div class="cnblogs_code">
<pre>var str = 'string' // 单引号
var str2 = "string2" // 双引号
var str3 = 'test ' + "string" // 字符串拼接
var str4 = `string3${str2}` // 反引号-变量字符串

str.length // 6 字符串长度
str.charAt(1) // s 返回给定位置的字符
str.charcodeAt(1) // 返回给定位置字符的字符编码
str //s ie8+

str.concat('a') //stringa 可以接受任意多个参数拼接成新的字符串，但不会改变原字符串
str.slice(0,3) //str 截取字符串
str.substring(3) //ing 截取字符串
str.substr(0,1) //s 截取字符串
str.indexOf('s') // 0 可接受两个参数，找到返回位置，找不到返回-1
str.lastIndexOf('t') // 1 从数组的末尾开始查找
str.trim() //删除前置和后缀的空格返回的是字符串的副本，原始字符串不变

str.toLowerCase() //转小写
str.toUpperCase() //转大写
str.toLocaleLowerCase() //string 转小写，针对地区的方法
str.toLocaleUpperCase() //STRING 转大写，针对地区的方法

str.match('s') // ["s", index: 0, input: "string", groups: undefined]
str.search('s') //0 接受一个正则，返回字符串中第一个匹配项的索引，没有返回-1
str.replace('s','c') //ctring 替换字符串,可正则匹配
str.split() //["string"] 分割字符串，并返回一个数组。</pre>
</div>
dart
<div class="cnblogs_code">
<pre>String a = 'string' // 单引号 
String b = "string" // 双引号 
// 多行字符串
String c = '''string
huanhang'''
// 使用前缀 r 创建 raw string，字符串内不会进行转义
String d = r'haha \n breakLine' // 不换行，输出haha \n breakLine
// 使用变量$name或${name}都可以，前一种方法的后面不能直接跟字符串，要用空格或者逗号等方式隔开
String name = 'hello';
assert('$name string'); // hello string
assert('${name} string'); // hello string
assert(name.length); // 6 字符串长度
assert(name.isEmpty) // false 判断是否为空
assert(name.isNotEmpty) // true 是否不为空
assert(name.substring(0, 2)) // he 字符串切割
assert(name.substring(3)) // lo 从指定index至末尾
String e = "a,b,,";
List<String> a6 = e.split(",");// 使用，分割，返回的是一个数组,同js 
// 查找并替换相当于split 和 join
String f = "a b,c";
String g = f.splitMapJoin(",",//查询“,”
onMatch: (Match match) { // 用匹配的值替换
return "a";
}, onNonMatch: (String nonMatch) { // 用不匹配的值替换
return "b";
});
assert(g);//bab a b,c=> bab
// 字符串判断
String = 'aabbbcccc';
assert(h.startsWith("aa")); //true startsWith以某某开始
assert(h.startsWith("aa", 3)); //false 从index=3开始判断
assert(h.endsWith("c")); //true endsWith 以xx结尾
assert(h.contains("ab")); //true contains是否包含
assert(h.contains("ac")); //false
assert(h.contains("ab", 3)); //false 从index=3开始判断
// 字符串替换
String i = "stringing";
assert(i.replaceAll("st","cc"));// ccringing 替换全部符合条件的
assert(i.replaceFirst("ing", "ss"));//strssing 只替换第一个符合条件的
assert(i.replaceFirst("ing", "dd",5));//stringdd 从index=5开始替换第一个符合条件的
assert(i.replaceRange(0, 3, "z"));// zinging 范围替换从0-3 含0不含3
assert(i.replaceAllMapped("i", (Match match){//stryngyng 用方法返回值替换指定的字符串
return "y";
}));
assert(i.replaceFirstMapped("i", (Match match){
return "333";
},5)); //string333ng 从index=5开始用方法返回值替换指定的字符串
// 字符串查找
Sting j = 'hello'
assert(j.indexOf('l')); // 2 从前往后找返回第一个符合条件的index
assert(j.lastIndexOf('l')); // 3 从后往前找返回第一个符合条件的index
// 转换为大小写
Stinrg k = 'aaBBcC'
assert(k.toLowerCase()); // aabbcc
assert(k.toUpperCase()); // AABBCC
// 去除空格
String l = " aab bcc ";
assert(l.trim()); //aabbcc 去除左右空格
assert(l.trimLeft()); //aabbcc 去除左边空格
assert(l.trimRight()); // aabbcc去除右边空格
// 补齐长度剩余位使用指定字符串替换
String j = "111";
assert(j.padLeft(6));// 111 剩余3个位默认使用""补齐
assert(j.padRight(6,"c")); //111ccc 剩余3个位指定使用"c"
assert(j.padRight(6,"dd")); //111dddddd 剩余3个位每个位指定使用"dd" 替换后总长度不是6
assert(j.padLeft(2,"e"));//111 如果指定长度小于原字符串长度返回原字符串</pre>
</div>
<h2 id="LDkEv">对象</h2>
 
js
<div class="cnblogs_code">
<pre>var gifts = {
'first': 'partridge',
'second': 'turtledoves'
};
gifts.first = 'hhh'
// Object.keys(obj) 返回对象的key组成的数组
// Object.values(obj) 返回对象的value组成的数组
// Object.assign() 可以将源对象复制到目标对象中
// Object.entries(obj) 返回对象的key和value组成的数组
// obj.hasOwnProperty() hasOwnProperty 方法判断对象中属性是否存在</pre>
</div>
dart
<div class="cnblogs_code">
<pre>var gifts = {
'first': 'partridge',
'second': 'turtledoves'
};
var gifts = Map();
gifts['first'] = 'partridge';
gifts['second'] = 'turtledoves';</pre>
</div>
<h2 id="ja2im">数组</h2>
 
js
<div class="cnblogs_code">
<pre>var list = ;
var list1 = ;
var list2 = ;

console.log(list.length) // 3
list1.concat(list2) // 连接两个或更多的数组，并返回结果。
list.every(i=>i>3) // false 检测数值元素的每个元素是否都符合条件。
list.some(i=>i>3) // true 检测数值元素是否有符合条件的值
list.filter(i=>i>3) // 检测数值元素，并返回符合条件所有元素的数组。
list.find(i=>i=3) // 1 返回符合传入测试（函数）条件的数组元素。
list.forEach() // 遍历数组
list.join('') // 12345 把数组的所有元素放入一个字符串。
list.map(i=>i+1) // 通过指定函数处理数组的每个元素，并返回处理后的数组。
list.pop() // 5 删除数组的最后一个元素并返回删除的元素。
list.push(8) // 5 向数组的末尾添加一个或更多元素，并返回新的长度。
list.shift() // 1 删除并返回数组的第一个元素。
list.sort() // 排序
list.toString() // 1,2,3,4,5 把数组转换为字符串，并返回结果。
list.unshift(8) // 向数组的开头添加一个或更多元素，并返回新的长度。
list.reduce((curr, next) => curr + next); // 15 数组相加的总和</pre>
</div>
dart
<div class="cnblogs_code">
<pre>var list = ;
assert(list.length == 3);
assert(list[1] == 2);

list[1] = 1;
assert(list[1] == 1);

// 同js
list.forEach((i) => print(i)); // 遍历数组
list.map(i=>i+1) // 
list.sort((num1, num2) => num1 - num2); // 排序
list.every(i=>i<5) // true 用法同上
list.reduce((curr, next) => curr + next); // 15 数组相加的总和

list.fold(2,(curr, next) => curr + next);// 17 用法同reduce，有一个初始值
list.contains(5) // false 用于判断数组是否包含某个元素
list.where((i) => i > 2); // 返回数组中满足给定条件的元素集合
// firstWhere() 返回数组中满足给定条件的第一个元素
list.firstWhere((i) => i > 2, orElse: () => null); // 3
// singleWhere() 返回数组中满足给定条件的唯一一个元素，若有多个元素满足条件会抛出异常
list.singleWhere((i) => i < 2, orElse: () => null);
List arr = ;
arr.take(3).toList() // take(n) 从数组里取 n 个元素
arr.skip(4).toList() // skip(n) 跳过数组中的 n 个元素
arr.take(3).skip(2).take(1).toList() // 
var clonedArr = List.from(list); // from 克隆一个数组
print(clonedArr);
var arr1 = [, , ];
arr1.expand((item) => item).toList(); // 
list.expand((item) => ).toList();// 
// 当对每一项进行计算时类似于 map() 
list.map((item) => item * 8).toList();
list.add(10); // 向数组中添加元素
list.addAll(); // 向数组中添加另一个数组的所有元素</pre>
</div>
 
</div>
</div> 
来源：https://www.cnblogs.com/leiting/p/11908532.html

頁: [1]

琼殿技术论坛's Archiver

Dart和JavaScript对比小结