15 個 JavaScript 代碼示例及其 Dart 對應代碼

為開發(fā)過React/React Native 的工程師，在剛開始接觸Flutter 開發(fā)的時候，一定會遇到這種情況，對于某個功能你能很熟練使用特定Javascript語法去完成，但是對于Flutter 開發(fā)，對應的Dart的語法又是什么？往往要再翻開Dart文檔去尋找對應的語法。在此分享15 個 JavaScript 代碼示例及其 Dart 對應代碼。

1. JSON.stringify 和 JsonEncoder().convert

在 JavaScript 中，如果要將對象轉換為 JSON 字符串，可以使用：

  JSON.stringify（yourObject）

在 Dart 中，只需導入'dart:convert'即可使用：

  import 'dart:convert';
  
  JsonEncoder().convert(yourObject)

2. JSON.parse和JsonDecoder().convert

在 JavaScript 中將 JSON 轉換為對象，會使用以下代碼：

  JSON.parse(yourJson)

在 Dart 中，只需導入'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ù)組刪除第一個元素（索引值為0）

  array.splice(0, 1)

在Dart中，返回索引范圍（1 和 3）內的新列表

  list.sublist(1, 3)

5. array.splice和list.removeAt

array.splice與#4點一樣

在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 中將字符串轉換為整數(shù)，可以使用

  parseInt('123')

在Dart里，是這樣

  int.parse('123')

9. parseFloat 和 double.parse

雙精度浮點數(shù)的使用如下：

  parseFloat('1.23')

在Dart里，是這樣

  double.parse('1.23')

10. array.some 和 list.any

在 JavaScript 中，array.some()方法測試數(shù)組中是不是至少有1個元素通過了被提供的函數(shù)測試。它返回的是一個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()方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的索引。若沒有找到對應元素則返回-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一個參數(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 中，會使用toString()將另一種數(shù)據(jù)類型的值轉換為字符串。它適用于整數(shù)、浮點數(shù)、布爾值、數(shù)組和對象。對于對象的話會得到以下結果：

var x = {id: 1}
console.log(x.toString())
=> '[object Object]'

但是兩者會有一定的差別，如下：

 // Dart
 String test = 1.toString() // '1'
 // JavaScript
 var x = 1.toString() // 未捕獲的語法錯誤：無效或意外的標記

14. array.every 和 list.every

every() 方法測試一個數(shù)組內的所有元素是否都能通過某個指定函數(shù)的測試。它返回一個布爾值。用法與上面array.some 和 list.any相似

15. map, forEach, filter, find等

除了語法上的一些差異之外，上述所有方法都在 JavaScript 和 Dart 之間共享。當map用于test等于的數(shù)組時，請參見如下[1, 2, 3, 4, 5]。
Javascript:

  // 其他類似
  test.map(x=>x*2)

Dart:

est.map((x)=>x*2)

如果你還有其他需要補充的？在評論中讓我知道哈！

TML 代碼約定

很多 Web 開發(fā)人員對 HTML 的代碼規(guī)范知之甚少。

在2000年至2010年，許多Web開發(fā)人員從 HTML 轉換到 XHTML。

使用 XHTML 開發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)范。

而針對于 HTML5 ，我們應該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：

<!doctype html>

使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

混合了大小寫的風格是非常糟糕的。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

不推薦:

<p>這是一個段落。</p>

</SECTION>

非常糟糕:

<p>這是一個段落。</p>

</SECTION>

推薦:

<body>

<p>菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。</p>

</body>

表格實例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表實例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在標準 HTML5 中， <html> 和 <body> 標簽是可以省略的。

以下 HTML5 文檔是正確的:

實例:

<!DOCTYPE html>

<head>

</head>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標簽。

<html> 元素是文檔的根元素，用于描述頁面的語言：

<!DOCTYPE html>

聲明語言是為了方便屏幕閱讀器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會發(fā)生錯誤。

省略 <head>?

在標準 HTML5 中， <head>標簽是可以省略的。

默認情況下，瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。

實例

<!DOCTYPE html>

<html>

<body>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

</body>

</html>

嘗試一下 ?

	現(xiàn)在省略 head 標簽還不推薦使用。

元數(shù)據(jù)

HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題:

標題和語言可以讓搜索引擎很快了解你頁面的主題:

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫在  中:

比較長的評論可以在  中分行寫：

<!--

這是一個較長評論。這是一個較長評論。這是一個較長評論。

這是一個較長評論這是一個較長評論。這是一個較長評論。

-->

長評論第一個字符縮進兩個空格，更易于閱讀。

樣式表

樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

短的規(guī)則可以寫成一行:

p.into {font-family: Verdana; font-size: 16em;}

長的規(guī)則可以寫成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個空格。
每個屬性與值結尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。

	在逗號和分號后添加空格是常用的一個規(guī)則。

在 HTML 中載入 JavaScript

使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

使用 JavaScript 訪問 HTML 元素

一個糟糕的 HTML 格式可能會導致 JavaScript 執(zhí)行錯誤。

以下兩個 JavaScript 語句會輸出不同結果:

實例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規(guī)則。

訪問 JavaScript 代碼規(guī)范。

使用小寫文件名

大多 Web 服務器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。

其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

你必須保持統(tǒng)一的風格，我們建議統(tǒng)一使用小寫的文件名。

文件擴展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區(qū)別

.htm 和 .html 的擴展名文件本質上是沒有區(qū)別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。

區(qū)別在于：

.htm 應用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個字符。

在 Unix 系統(tǒng)中后綴沒有特別限制，一般用 .html。

技術上區(qū)別

如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

如果服務器只配置了 "index.html" 作為默認文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是，通常服務器可以設置多個默認文件，你可以根據(jù)需要設置默認文件嗎。

不管怎樣，HTML 完整的后綴是 ".html"。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

avaScript 使 HTML 頁面具有更強的動態(tài)和交互性。

在線實例

插入一段腳本

如何將腳本插入 HTML 文檔。

使用 <noscript> 標簽

如何應對不支持腳本或禁用腳本的瀏覽器。

HTML <script> 標簽

JavaScript 最常用于圖片操作、表單驗證以及內容動態(tài)更新。

下面的腳本會向瀏覽器輸出"Hello World!"：

實例

Tip: 學習更多關于Javascript教程，請查看JavaScript 教程!

HTML<noscript> 標簽

只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 <noscript> 元素中的內容：

實例

JavaScript體驗(來自本站javascript教程)

JavaScript實例代碼:

JavaScript可以直接在HTML輸出:

document.write("<p>這是一個段落。</p>");

JavaScript事件響應:

<buttontype="button"onclick="myFunction()">點我！</button>

JavaScript處理 HTML 樣式:

document.getElementById("demo").style.color="#ff0000";

HTML 腳本標簽

標簽	描述
<script>	定義了客戶端腳本
<noscript>	定義了不支持腳本瀏覽器輸出的文本

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：Bootstrap-table 使用總結
下一篇：Facebook、隱私、監(jiān)聽廣告以及我們如何失去自由的互聯(lián)網的

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

15 個 JavaScript 代碼示例及其 Dart 對應代碼

1. JSON.stringify 和 JsonEncoder().convert

2. JSON.parse和JsonDecoder().convert

3. array.push和list.add

4. array.splice和list.sublist

5. array.splice和list.removeAt

6. array.length > 0和list.isNotEmpty

7. array.length === 0和list.isEmpty

8. parseInt和int.parse

9. parseFloat 和 double.parse

10. array.some 和 list.any

11. array.findIndex和list.indexWhere

12. array.indexOf() 和 list.indexOf()

13. toString

14. array.every 和 list.every

15. map, forEach, filter, find等

您的項目需求