Vue文件解析 什麼是<template/>標簽 template是html5新元素,主要用於保存客戶端中的內容,表現為瀏覽器解析該內容但不渲染出來,可以將一個模板視為正在被存儲以供隨後在文檔中使用的一個內容片段。 關於單文件組件 vue的單文件相當於一個頁面中的組件,包含了關於該組件的html-c ...
Js 簡介
什麼是 Js?
Js 最初被創建的目的是“使網頁更生動”。
Js 寫出來的程式被稱為 腳本,Js 是一門腳本語言。
- 被直接寫在網頁的 HTML 中,在頁面載入的時候自動執行
- 腳本被以純文本的形式提供和執行,不需要特殊的準備或編譯即可運行(JIN compiler)
Js 不僅可以在瀏覽器中執行,也可以在服務端執行,本質上是它可以在任意搭載了Js 引擎的設備中執行。
瀏覽器中嵌入了 Js 引擎,有時也稱作“JavaScript 虛擬機”,不同的引擎有不同的“代號”,例如:
- V8 —— Chrome、Opera 和 Edge 中的 Js 引擎。
- SpiderMonkey —— Firefox 中的 Js 引擎。
- Chakra —— IE
- JavaScriptCore、Nitro 、 SquirrelFish —— Safari
eg:如果 “V8 支持某個功能” ,那麼我們可以認為這個功能大概能在 Chrome、Opera 和 Edge 中正常運行。
引擎是如何工作的?
引擎很複雜,但是基本原理很簡單。
- 引擎(如果是瀏覽器,則引擎被嵌入在其中)讀取(“解析”)腳本。
- 然後,引擎將腳本轉化(“編譯”)為機器語言。
- 然後,機器代碼快速地執行。
引擎會對流程中的每個階段都進行優化。它甚至可以在編譯的腳本運行時監視它,分析流經該腳本的數據,並根據獲得的信息進一步優化機器代碼。
瀏覽器中的 Js
能做什麼?
現代的 Js 是一種“安全的”編程語言。它不提供對記憶體或 CPU 的底層訪問,因為它最初是為瀏覽器創建的,不需要這些功能。
Js 的能力很大程度上取決於它運行的環境。例如,Node.js 支持允許 Js 讀取/寫入任意文件,執行網路請求等。
瀏覽器中的 Js 可以做下麵這些事:
- 在網頁中添加新的 HTML,修改網頁已有內容和網頁的樣式。
- 響應用戶的行為,響應滑鼠的點擊,按鍵的按動。
- 向遠程伺服器發送網路請求,下載和上傳文件(所謂的 AJAX 和 COMET 技術)。
- 獲取或設置 cookie,向訪問者提出問題或發送消息。
- 記住客戶端的數據(“本地存儲”)。
不能做什麼?
為了用戶的(信息)安全,在瀏覽器中的 Js 的能力是受限的。
目的是防止惡意網頁獲取用戶私人信息或損害用戶數據。
此類限制的例子包括:
-
網頁中的 Js 不能讀、寫、複製和執行硬碟上的任意文件。它沒有直接訪問操作系統的功能。
現代瀏覽器允許 Js 做一些文件相關的操作,但是這個操作是受到限制的。
僅當用戶做出特定的行為,Js 才能操作這個文件。eg:用戶把文件“拖放”到瀏覽器中,或者通過
<input type='file'>
標簽選擇了文件。有很多與相機/麥克風和其它設備進行交互的方式,但是這些都需要獲得用戶的明確許可。
-
不同的標簽頁/視窗之間通常互不瞭解。
有時候,也會有一些聯繫,例如一個標簽頁通過 Js 打開的另外一個標簽頁。
但即使在這種情況下,如果兩個標簽頁打開的不是同一個網站(功能變數名稱、協議或者埠任一不相同的網站),它們都不能相互通信。這就是所謂的“同源策略”。
為瞭解決“同源策略”問題,兩個標簽頁必須都包含一些處理這個問題的特定的 Js 代碼,並均允許數據交換。
-
Js 可以輕鬆地通過互聯網與當前頁面所在的伺服器進行通信。但是從其他網站/域的伺服器中接收數據的能力被削弱了。儘管可以,但是需要來自遠程伺服器的明確協議(在 HTTP header 中)。這也是為了用戶的信息安全。
數據類型
在 Js 中有 8 種基本的數據類型(7 種原始類型和 1 種引用類型)
Number 類型
代表整數和浮點數,可以有很多操作,eg:乘法 *
、除法 /
、加法 +
、減法 -
等等。
除了常規的數字,還包括所謂的“特殊數值”:Infinity
、-Infinity
和 NaN
。
科學計數法
- 將
"e"
和 0 的數量附加到數字後。就像:123e6
與123
後面接 6 個 0 相同。 "e"
後面的負數將使數字除以 1 後面接著給定數量的零的數字。例如123e-6
表示0.000123
(123
的百萬分之一)。
多種進位
-
可以直接在十六進位(
0x
),八進位(0o
or00
)和二進位(0b
or0B
)系統中寫入數字。 -
使用
Number()
方法將含有對應首碼的字元串數值轉為十進位Number('0b111') // 7 Number('0o10') // 8
-
parseInt(str, base)
將字元串str
解析為在給定的base
數字系統中的整數,2 ≤ base ≤ 36
。 -
num.toString(base)
將數字轉換為在給定的base
數字系統中的字元串。
常規數字檢測
全局方法
isNaN(value)
—— 將其參數轉換為數字,然後檢測它是否為NaN
isFinite(value)
—— 將其參數轉換為數字,如果它是常規數字,則返回true
(NaN/Infinity/-Infinity
返回false)
定義在Number上的方法 (ES6)
-
Number.isNaN()
——檢查一個值是否為NaN
。如果參數類型不是NaN
,Number.isNaN
一律返回false
-
Number.isFinite()
—— 檢查一個數值是否為有限的。如果參數類型不是數值,Number.isFinite
一律返回false
。
區別
傳統的全局方法isFinite()
和isNaN()
先調用Number()
將非數值的值轉為數值,再進行判斷,而這兩個新方法只對數值有效,Number.isFinite()
對於非數值一律返回false
, Number.isNaN()
只有對於NaN
才返回true
,非NaN
一律返回false
。
isFinite(25) // true
isFinite("25") // true
Number.isFinite(25) // true
Number.isFinite("25") // false
isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false
Number.isNaN(1) // false
不規則字元串轉換為數字
任務:將 12pt
和 100px
之類的值轉換為數字
全局方法
- 使用
parseInt/parseFloat
進行“軟”轉換,它從字元串中讀取數字,然後返回在發生 error 前可以讀取到的值。
定義在Number上的方法 (ES6)
- ES6 將全局方法
parseInt()
和parseFloat()
,移植到Number
對象上面,行為完全保持不變。這樣做的目的,是逐步減少全局性方法,使得語言逐步模塊化。
Math 對象的擴展
-
使用
Math.floor
,Math.ceil
,Math.trunc
,Math.round
或num.toFixed(precision)
進行舍入。其中Math.trunc() —— 用於去除一個數的小數部分,返回整數部分(內部使用Number
方法將其先轉為數值) -
Math.sign() —— 用來判斷一個數到底是正數、負數、還是零。對於非數值,會先將其轉換為數值。
- 參數為正數,返回
+1
; - 參數為負數,返回
-1
; - 參數為 0,返回
0
; - 參數為-0,返回
-0
; - 其他值,返回
NaN
。
- 參數為正數,返回
-
Math.cbrt() —— 計算一個數的立方根
-
Math.clz32() —— 將參數轉為 32 位無符號整數的形式,然後返回這個 32 位值裡面有多少個前導 0
-
Math.imul() —— 返回兩個數以 32 位帶符號整數形式相乘的結果,返回的也是一個 32 位的帶符號整數。
-
Math.fround() —— 返回一個數的32位單精度浮點數形式
-
Math.hypot() —— 返回所有參數的平方和的平方根
使用兩個點來調用一個方法
請註意 123456..toString(36)
中的兩個點不是打錯了。如果我們想直接在一個數字上調用一個方法,比如上面例子中的 toString
,那麼我們需要在它後面放置兩個點 ..
。
如果我們放置一個點:123456.toString(36)
,那麼就會出現一個 error,因為 Js 語法隱含了第一個點之後的部分為小數部分。如果我們再放一個點,那麼 JavaScript 就知道小數部分為空,現在使用該方法。
也可以寫成 (123456).toString(36)
。
如果是小數:可以直接寫為0.13.toFixed(1)
數值分隔符
ES2021,允許 Js 的數值(所有進位)使用下劃線(_
)作為分隔符,這個數值分隔符沒有指定間隔的位數。
使用註意點:
- 不能放在數值的最前面或最後面。
- 不能兩個或兩個以上的分隔符連在一起。
- 小數點的前後不能有分隔符。
- 科學計數法裡面,表示指數的
e
或E
前後不能有分隔符。 - 分隔符不能緊跟著進位的首碼
0b
、0B
、0o
、0O
、0x
、0X
(eg:0_b1100,0b_0100)
下麵三個將字元串轉成數值的函數,不支持數值分隔符:
- Number()
- parseInt()
- parseFloat()
BigInt 類型
number 類型無法安全地表示大於 (253-1),或小於 - (253-1)的整數。
更準確的說:
“number” 類型可以存儲更大的整數,但超出安全整數範圍 ±(253-1)會出現精度問題,因為並非所有數字都適合固定的 64 位存儲。因此,可能存儲的是“近似值”。
// 尾部的 "n" 表示這是一個 BigInt 類型
const bigInt = 1234567890123456789012345678901234567890n;
String 類型
三種包含字元串的方式:
-
雙引號:"Hello"
-
單引號:'Hello'
-
反引號:`Hello`
反引號是 功能擴展 引號,稱為模板字元串。
它允許我們通過將變數和表達式包裝在
${…}
中,來將它們嵌入到字元串中,並且可以在裡面直接換行。
-
Js 中的字元串使用的是 UTF-16 編碼。
-
Js 中字元串不可以被改變
-
length
屬性表示字元串長度 -
可以使用像
\n
這樣的特殊字元或通過使用\u...
來操作它們的 Unicode 進行字元插入。其中
\uxxxx
是字元的Unicode表示法,這種表示法只限於碼點在\u0000
~\uFFFF
之間的字元。超出這個範圍的字元,必須用兩個雙位元組的形式表示。ES6 對這一點做出了改進,只要將碼點放入大括弧,就能正確解讀該字元。"\uD842\uDFB7" // "