15 個(gè) JavaScript 代碼示例及其 Dart 對應(yīng)代碼
做為 開發(fā)過React/React Native 的工程師，在剛開始接觸Flutter 開發(fā)的時(shí)候，一定會(huì)遇到這種情況，對于某個(gè)功能你能很熟練使用特定Javascript語法去完成，但是對于Flutter 開發(fā)，對應(yīng)的Dart的語法又是什么?往往要再翻開Dart文檔去尋找對應(yīng)的語法。在此分享15 個(gè) JavaScript 代碼示例及其 Dart 對應(yīng)代碼。
1. JSON.stringify 和 JsonEncoder().convert
在 JavaScript 中，如果要將對象轉(zhuǎn)換為 JSON 字符串，可以使用：
- JSON.stringify（yourObject）
在 Dart 中，只需導(dǎo)入'dart:convert'即可使用：
- import 'dart:convert';
- JsonEncoder().convert(yourObject)
2. JSON.parse和JsonDecoder().convert
在 JavaScript 中將 JSON 轉(zhuǎn)換為對象，會(huì)使用以下代碼：
- JSON.parse(yourJson)
在 Dart 中，只需導(dǎo)入'dart:convert'即可使用：
- import 'dart:convert';
- JsonDecoder().convert(yourJson)
3. array.push和list.add
在 JavaScript 中，要添加'hello'到數(shù)組中，可以使用
- array.push('hello')
在 Dart 中，這樣使用，
- list.add('hello')
4. array.splice和list.sublist
在 JavaScript 中，數(shù)組刪除第一個(gè)元素(索引值為0)
- array.splice(0, 1)
在Dart中， 返回索引范圍(1 和 3)內(nèi)的新列表
- list.sublist(1, 3)
5. array.splice和list.removeAt
array.splice與#4點(diǎn)一樣
在Dart中， 刪除索引值為itemIndex的值
- list.removeAt(itemIndex)
6. array.length > 0和list.isNotEmpty
檢查數(shù)組是否為空
- array.length > 0
Dart里，是這樣
- list.isNotEmpty
7. array.length === 0和list.isEmpty
檢查數(shù)組是否為空
- array.length === 0
Dart里，是這樣
- list.isEmpty
8. parseInt和int.parse
在 JavaScript 中將字符串轉(zhuǎn)換為整數(shù)，可以使用
- parseInt('123')
在Dart里，是這樣
- int.parse('123')
9. parseFloat 和 double.parse
雙精度浮點(diǎn)數(shù)的使用如下：
- parseFloat('1.23')
在Dart里，是這樣
- double.parse('1.23')
10. array.some 和 list.any
在 JavaScript 中，array.some()方法測試數(shù)組中是不是至少有1個(gè)元素通過了被提供的函數(shù)測試。它返回的是一個(gè)Boolean類型的。
例如，如果想查看數(shù)組[1, 2, 3, 4, 5, 6, 7]是否有任何大于 5 的數(shù)字：
- var some = array.some(x=>x > 5)
在Dart，是這樣的，
- array.any((x)=>x > 5);
11. array.findIndex和list.indexWhere
Javascript的array.findIndex()方法返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的索引。若沒有找到對應(yīng)元素則返回-1。
Dart用的是list.indexWhere,只是用法不一樣
- var notes = ['do', 're', 'mi', 're'];
- // JavaScript
- notes.findIndex(x=>x.indexOf("r") > -1) // 1
- // Dart
- notes.indexWhere((note) => note.startsWith('r')); // 1
「Tip」 在 Dart 中，還可以在函數(shù)后面?zhèn)鬟f一個(gè)參數(shù)來提供起始索引。如下：
- notes.indexWhere((note) => note.startsWith('r'), 2 ); // 3
12. array.indexOf() 和 list.indexOf()
在 JavaScript 和 Dart 中，indexOf是一種用于在數(shù)組或列表中查找索引位置的方法。沒有則返回-1
- var author = ['Edgar Allen Poe', 'JK Rowling', 'Ernest Hemingway']
- author.indexOf('JK Rowling') // 1
13. toString
在 JavaScript 中，會(huì)使用toString()將另一種數(shù)據(jù)類型的值轉(zhuǎn)換為字符串。它適用于整數(shù)、浮點(diǎn)數(shù)、布爾值、數(shù)組和對象。對于對象的話會(huì)得到以下結(jié)果：
- var x = {id: 1}
- console.log(x.toString())
- => '[object Object]'
但是兩者會(huì)有一定的差別，如下：
- // Dart
- String test = 1.toString() // '1'
- // JavaScript
- var x = 1.toString() // 未捕獲的語法錯(cuò)誤：無效或意外的標(biāo)記
14. array.every 和 list.every
every() 方法測試一個(gè)數(shù)組內(nèi)的所有元素是否都能通過某個(gè)指定函數(shù)的測試。它返回一個(gè)布爾值。用法與上面array.some 和 list.any相似
15. map, forEach, filter, find等
除了語法上的一些差異之外，上述所有方法都在 JavaScript 和 Dart 之間共享。當(dāng)map用于test等于的數(shù)組時(shí)，請參見如下[1, 2, 3, 4, 5]。
Javascript:
- // 其他類似
- test.map(x=>x*2)
Dart:
- est.map((x)=>x*2)
