JavaScript的聲明方法和作用范圍，常見的結構

JavaScript的聲明方法和作用范圍，常見的結構賦值類型和使用場景

接：https://juejin.im/post/5d9bf530518825427b27639d

聲明

const命令：聲明常量
let命令：聲明變量

作用

作用域

全局作用域
函數作用域：function() {}
塊級作用域：{}

作用范圍

var 命令在全局代碼中執行
const命令和let命令只能在代碼塊中執行

賦值使用

const命令聲明常量后必須立馬賦值
let命令聲明變量后可立馬賦值或使用時賦值

聲明方法：var、const、let、function、class、import

重點難點

不允許重復聲明
未定義就使用會報錯：const命令和let命令不存在變量提升（有爭議）
暫時性死區：在代碼塊內使用let命令聲明變量之前，該變量都不可用

解構賦值

字符串解構：const [a, b, c, d, e]="hello"
數值解構：const { toString: s }=123
布爾值解構：const { toString: b }=true
對象解構
形式：const { x, y }={ x: 1, y: 2 }
默認：const { x, y=2 }={ x: 1 }
改名：const { x, y: z }={ x: 1, y: 2 }
數組解構
規則：數據結構具有Iterator接口可采用數組形式的解構賦值
形式：const [x, y]=[1, 2]
默認：const [x, y=2]=[1]
函數參數解構
數組解構：function Func([x=0, y=1]) {}
對象解構：function Func({ x=0, y=1 }={}) {}

應用場景

交換變量值：[x, y]=[y, x]
返回函數多個值：const [x, y, z]=Func()
定義函數參數：Func([1, 2])
提取JSON數據：const { name, version }=packageJson
定義函數參數默認值：function Func({ x=1, y=2 }={}) {}
遍歷Map結構：for (let [k, v] of Map) {}
輸入模塊指定屬性和方法：const { readFile, writeFile }=require("fs")

重點難點

匹配模式：只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值
解構賦值規則：只要等號右邊的值不是對象或數組，就先將其轉為對象
解構默認值生效條件：屬性值嚴格等于undefined
解構遵循匹配模式
解構不成功時變量的值等于undefined
undefined和null無法轉為對象，因此無法進行解構

TML 代碼約定

很多 Web 開發人員對 HTML 的代碼規范知之甚少。

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

使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

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

使用正確的文檔類型

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

<!DOCTYPE html>

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

<!doctype html>

使用小寫元素名

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

推薦使用小寫字母：

混合了大小寫的風格是非常糟糕的。
開發人員通常使用小寫 (類似 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)會發生錯誤。

省略 <head>?

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

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

實例

<!DOCTYPE html>

<html>

<body>

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

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

</body>

</html>

嘗試一下 ?

	現在省略 head 標簽還不推薦使用。

元數據

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

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

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫在  中:

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

<!--

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

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

-->

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

樣式表

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

短的規則可以寫成一行:

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

長的規則可以寫成多行:

body {

background-color: lightgrey;

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

font-size: 16em;

color: black;

}

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

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

在 HTML 中載入 JavaScript

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

使用 JavaScript 訪問 HTML 元素

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

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

實例

var obj=getElementById("Demo")

var obj=getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規則。

訪問 JavaScript 代碼規范。

使用小寫文件名

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

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

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

文件擴展名

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

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區別

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

區別在于：

.htm 應用在早期 DOS 系統，系統現在或者只能有三個字符。

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

技術上區別

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

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

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

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

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

篇文章介紹了 注釋標簽，我個人感覺很容易理解，在日常編碼中，大多數編輯器都有注釋標簽的快捷鍵，如sublime或VS code里在html代碼里，選中想要注釋掉的代碼后，直接按ctrl+/即可。幾乎不用手動輸入了。還是很方便的。

這篇我寫<!DOCTYPE>標簽，說起來這個標簽，很常見，因為它會出現在每一個httml文檔的最開頭，然而，我們很少去重視它，為什么呢？

說到這個標簽，我不得不說起html的版本歷史了。

在大約10年前吧，html5應用還不如今天這么廣泛吧，于是當時的文檔類型聲明如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

很長，也很難記，由于我入行晚，懂得這玩意就只是一個聲明了，比如strict表示嚴格模式。其他的我也不想知道了。

當然html版本的規范從4到5的過渡經歷了太多年，因為要考慮老瀏覽器的兼容性，再加上前期移動設備配置低，不支持較為復雜的媒體元素。于是，一些資歷深的前端開發人員，面對這么長的代碼還是有很長一段時間。

當然，9102年都快過完了，我們這邊已經不需要再考慮這些了，于是，我直接就用html5了。

然后聲明文檔給格式，就變得很簡單了。

<!DOCTYPE html>

最開始我是使用sublime生成的模板練習的，然后，犯懶，直接輸入了<html>就出來下面的代碼：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
</body>
</html>

然后就開始進行填充了。

直到今天我才注意到原來<!DOCTYPE html>是單獨的一行，與下方<html></html>是兩碼事。

所以，我重新看了下書上的強調內容：

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前，沒有結束標簽，對大小寫不敏感。
<!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD(文檔類型定義)，因為 HTML 4.01 基于 SGML（標準通用標記語言)）。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。
HTML5 不基于 SGML，所以不需要引用 DTD。

關于SGML，參見https://wiki.mbalib.com/wiki/SGML

常用的 DOCTYPE 聲明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

該 DTD 等同于 XHTML 1.0 Transitional，但允許框架集內容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

該 DTD 等同于 XHTML 1.0 Strict，但允許添加模型（例如提供對東亞語系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

最后，雖然上方的html4和xml的文檔類型聲明這么麻煩了，但是這里沒什么知識點了，因為如今，html5應用這么普及了，我們只需在文檔開頭寫<!DOCTYPE html>即可，當然html4的嚴格模式和傳統模式大概知道就行了。

在線咨詢

上一篇：大神為什么比你優秀，靠的就是這些外掛網站，看看你都知
下一篇：（Python基礎教程之二十二）爬蟲下載網頁視頻(v

您的項目需求

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

整合營銷服務商

JavaScript的聲明方法和作用范圍，常見的結構

聲明

解構賦值

常用的 DOCTYPE 聲明

您的項目需求