知道瀏覽器和服務端是通過 HTTP 協議進行數據傳輸的，而 HTTP 協議又是純文本協議，那么瀏覽器在得到服務端傳輸過來的 HTML 字符串，是如何解析成真實的 DOM 元素的呢，也就是我們常說的生成 DOM Tree，最近了解到狀態機這樣一個概念，于是就萌生一個想法，實現一個 innerHTML 功能的函數，也算是小小的實踐一下。

函數原型

我們實現一個如下的函數，參數是 DOM 元素和 HTML 字符串，將 HTML 字符串轉換成真實的 DOM 元素且 append 在參數一傳入的 DOM 元素中。

function html(element, htmlString) {
 // 1. 詞法分析
 // 2. 語法分析
 // 3. 解釋執行
}
復制代碼

在上面的注釋我已經注明，這個步驟我們分成三個部分，分別是詞法分析、語法分析和解釋執行。

詞法分析

詞法分析是特別重要且核心的一部分，具體任務就是：把字符流變成 token 流。

詞法分析通常有兩種方案，一種是狀態機，一種是正則表達式，它們是等效的，選擇你喜歡的就好。我們這里選擇狀態機。

首先我們需要確定 token 種類，我們這里不考慮太復雜的情況，因為我們只對原理進行學習，不可能像瀏覽器那樣有強大的容錯能力。除了不考慮容錯之外，對于自閉合節點、注釋、CDATA 節點暫時均不做考慮。

接下來步入主題，假設我們有如下節點信息，我們會分出哪些 token 來呢。

<p class="a" data="js">測試元素</p>
復制代碼

對于上述節點信息，我們可以拆分出如下 token

• 開始標簽：<p
• 屬性標簽：class="a"
• 文本節點：測試元素
• 結束標簽：</p>

狀態機的原理，將整個 HTML 字符串進行遍歷，每次讀取一個字符，都要進行一次決策（下一個字符處于哪個狀態），而且這個決策是和當前狀態有關的，這樣一來，讀取的過程就會得到一個又一個完整的 token，記錄到我們最終需要的 tokens 中。

萬事開頭難，我們首先要確定起初可能處于哪種狀態，也就是確定一個 start 函數，在這之前，對詞法分析類進行簡單的封裝，具體如下

function HTMLLexicalParser(htmlString, tokenHandler) {
 this.token=[];
 this.tokens=[];
 this.htmlString=htmlString
 this.tokenHandler=tokenHandler
}
復制代碼

簡單解釋下上面的每個屬性

• token：token 的每個字符
• tokens：存儲一個個已經得到的 token
• htmlString：待處理字符串
• tokenHandler：token 處理函數，我們每得到一個 token 時，就已經可以進行流式解析

我們可以很容易的知道，字符串要么以普通文本開頭，要么以<開頭，因此 start 代碼如下

HTMLLexicalParser.prototype.start=function(c) {
 if(c==='<') {
 this.token.push(c)
 return this.tagState
 } else {
 return this.textState(c)
 }
}
復制代碼

start處理的比較簡單，如果是<字符，表示開始標簽或結束標簽，因此我們需要下一個字符信息才能確定到底是哪一類 token，所以返回tagState函數去進行再判斷，否則我們就認為是文本節點，返回文本狀態函數。

接下來分別展開tagState和textState函數。tagState根據下一個字符，判斷進入開始標簽狀態還是結束標簽狀態，如果是/表示是結束標簽，否則是開始標簽，textState用來處理每一個文本節點字符，遇到<表示得到一個完整的文本節點 token，代碼如下

HTMLLexicalParser.prototype.tagState=function(c) {
 this.token.push(c)
 if(c==='/') {
 return this.endTagState
 } else {
 return this.startTagState
 }
}
HTMLLexicalParser.prototype.textState=function(c) {
 if(c==='<') {
 this.emitToken('text', this.token.join(''))
 this.token=[]
 return this.start(c)
 } else {
 this.token.push(c)
 return this.textState
 }
}
復制代碼

這里初次見面的函數是emitToken、startTagState和endTagState。

emitToken用來將產生的完整 token 存儲在 tokens 中，參數是 token 類型和值。

startTagState用來處理開始標簽，這里有三種情形

• 如果接下來的字符是字母，則認定依舊處于開始標簽態
• 遇到空格，則認定開始標簽態結束，接下來是處理屬性了
• 遇到>，同樣認定為開始標簽態結束，但接下來是處理新的節點信息

endTagState用來處理結束標簽，結束標簽不存在屬性，因此只有兩種情形

• 如果接下來的字符是字母，則認定依舊處于結束標簽態
• 遇到>，同樣認定為結束標簽態結束，但接下來是處理新的節點信息

邏輯上面說的比較清楚了，代碼也比較簡單，看看就好啦

HTMLLexicalParser.prototype.emitToken=function(type, value) {
 var res={
 type,
 value
 }
 this.tokens.push(res)
 // 流式處理
 this.tokenHandler && this.tokenHandler(res)
}
HTMLLexicalParser.prototype.startTagState=function(c) {
 if(c.match(/[a-zA-Z]/)) {
 this.token.push(c.toLowerCase())
 return this.startTagState
 }
 if(c===' ') {
 this.emitToken('startTag', this.token.join(''))
 this.token=[]
 return this.attrState
 }
 if(c==='>') {
 this.emitToken('startTag', this.token.join(''))
 this.token=[]
 return this.start
 }
}
HTMLLexicalParser.prototype.endTagState=function(c) {
 if(c.match(/[a-zA-Z]/)) {
 this.token.push(c.toLowerCase())
 return this.endTagState
 }
 if(c==='>') {
 this.token.push(c)
 this.emitToken('endTag', this.token.join(''))
 this.token=[]
 return this.start
 }
}
復制代碼

最后只有屬性標簽需要處理了，也就是上面看到的attrState函數，也處理三種情形

• 如果是字母、單引號、雙引號、等號，則認定為依舊處于屬性標簽態
• 如果遇到空格，則表示屬性標簽態結束，接下來進入新的屬性標簽態
• 如果遇到>，則認定為屬性標簽態結束，接下來開始新的節點信息

代碼如下

HTMLLexicalParser.prototype.attrState=function(c) {
 if(c.match(/[a-zA-Z'"=]/)) {
 this.token.push(c)
 return this.attrState
 }
 if(c===' ') {
 this.emitToken('attr', this.token.join(''))
 this.token=[]
 return this.attrState
 }
 if(c==='>') {
 this.emitToken('attr', this.token.join(''))
 this.token=[]
 return this.start
 }
}
復制代碼

最后我們提供一個parse解析函數，和可能用到的getOutPut函數來獲取結果即可，就不啰嗦了，上代碼

HTMLLexicalParser.prototype.parse=function() {
 var state=this.start;
 for(var c of this.htmlString.split('')) {
 state=state.bind(this)(c)
 }
}
HTMLLexicalParser.prototype.getOutPut=function() {
 return this.tokens
}
復制代碼

接下來簡單測試一下，對于<p class="a" data="js">測試并列元素的</p><p class="a" data="js">測試并列元素的</p>HTML 字符串，輸出結果為

看上去結果很 nice，接下來進入語法分析步驟

語法分析

首先們需要考慮到的情況有兩種，一種是有多個根元素的，一種是只有一個根元素的。

我們的節點有兩種類型，文本節點和正常節點，因此聲明兩個數據結構。

function Element(tagName) {
 this.tagName=tagName
 this.attr={}
 this.childNodes=[]
}
function Text(value) {
 this.value=value || ''
}
復制代碼

目標：將元素建立起父子關系，因為真實的 DOM 結構就是父子關系，這里我一開始實踐的時候，將 childNodes 屬性的處理放在了 startTag token 中，還給 Element 增加了 isEnd 屬性，實屬愚蠢，不但復雜化了，而且還很難實現。仔細思考 DOM 結構，token 也是有順序的，合理利用棧數據結構，這個問題就變的簡單了，將 childNodes 處理放在 endTag 中處理。具體邏輯如下

• 如果是 startTag token，直接 push 一個新 element
• 如果是 endTag token，則表示當前節點處理完成，此時出棧一個節點，同時將該節點歸入棧頂元素節點的 childNodes 屬性，這里需要做個判斷，如果出棧之后棧空了，表示整個節點處理完成，考慮到可能有平行元素，將元素 push 到 stacks。
• 如果是 attr token，直接寫入棧頂元素的 attr 屬性
• 如果是 text token，由于文本節點的特殊性，不存在有子節點、屬性等，就認定為處理完成。這里需要做個判斷，因為文本節點可能是根級別的，判斷是否存在棧頂元素，如果存在直接壓入棧頂元素的 childNodes 屬性，不存在 push 到 stacks。

代碼如下

function HTMLSyntacticalParser() {
 this.stack=[]
 this.stacks=[]
}
HTMLSyntacticalParser.prototype.getOutPut=function() {
 return this.stacks
}
// 一開始搞復雜了，合理利用基本數據結構真是一件很酷炫的事
HTMLSyntacticalParser.prototype.receiveInput=function(token) {
 var stack=this.stack
 if(token.type==='startTag') {
 stack.push(new Element(token.value.substring(1)))
 } else if(token.type==='attr') {
 var t=token.value.split('='), key=t[0], value=t[1].replace(/'|"/g, '')
 stack[stack.length - 1].attr[key]=value
 } else if(token.type==='text') {
 if(stack.length) {
 stack[stack.length - 1].childNodes.push(new Text(token.value))
 } else {
 this.stacks.push(new Text(token.value))
 }
 } else if(token.type==='endTag') {
 var parsedTag=stack.pop()
 if(stack.length) {
 stack[stack.length - 1].childNodes.push(parsedTag)
 } else {
 this.stacks.push(parsedTag)
 }
 }
}
復制代碼

簡單測試如下：

沒啥大問題哈

解釋執行

對于上述語法分析的結果，可以理解成 vdom 結構了，接下來就是映射成真實的 DOM，這里其實比較簡單，用下遞歸即可，直接上代碼吧

function vdomToDom(array) {
 var res=[]
 for(let item of array) {
 res.push(handleDom(item))
 }
 return res
}
function handleDom(item) {
 if(item instanceof Element) {
 var element=document.createElement(item.tagName)
 for(let key in item.attr) {
 element.setAttribute(key, item.attr[key])
 }
 if(item.childNodes.length) {
 for(let i=0; i < item.childNodes.length; i++) {
 element.appendChild(handleDom(item.childNodes[i]))
 }
 }
 return element
 } else if(item instanceof Text) {
 return document.createTextNode(item.value)
 }
}
復制代碼

實現函數

上面三步驟完成后，來到了最后一步，實現最開始提出的函數

function html(element, htmlString) {
 // parseHTML
 var syntacticalParser=new HTMLSyntacticalParser()
 var lexicalParser=new HTMLLexicalParser(htmlString, syntacticalParser.receiveInput.bind(syntacticalParser))
 lexicalParser.parse()
 var dom=vdomToDom(syntacticalParser.getOutPut())
 var fragment=document.createDocumentFragment()
 dom.forEach(item=> {
 fragment.appendChild(item)
 })
 element.appendChild(fragment)
}
復制代碼

三個不同情況的測試用例簡單測試下

html(document.getElementById('app'), '<p class="a" data="js">測試并列元素的</p><p class="a" data="js">測試并列元素的</p>')
html(document.getElementById('app'), '測試<div>你好呀，我測試一下沒有深層元素的</div>')
html(document.getElementById('app'), '<div class="div"><p class="p">測試一下嵌套很深的<span class="span">p的子元素</span></p><span>p同級別</span></div>')
復制代碼

聲明：簡單測試下都沒啥問題，本次實踐的目的是對 DOM 這一塊通過詞法分析和語法分析生成 DOM Tree 有一個基本的認識，所以細節問題肯定還是存在很多的。

總結

其實在了解了原理之后，這一塊代碼寫下來，并沒有太大的難度，但卻讓我很興奮，有兩個成果吧

• 了解并初步實踐了一下狀態機
• 數據結構的魅力

這篇文章中，作者將分享 12 個非常有用的 JavaScript 技巧，可以幫助你寫出簡潔且高性能的代碼。

1. 過濾唯一值

ES6 引入了 Set 對象和延展（spread）語法…，我們可以用它們來創建一個只包含唯一值的數組。

const array=[1, 1, 2, 3, 5, 5, 1]
const uniqueArray=[...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

在 ES6 之前，獲得同樣的數組需要更多的代碼！

這個技巧可以支持包含原始類型的數組：undefined、null、boolean、string 和 number。但如果你的數組包含了對象、函數或其他嵌套數組，就不能使用這種方法了。

2. 在循環中緩存數組長度

在我們學習使用 for 循環時，一般建議使用這種結構：

for (let i=0; i < array.length; i++){
 console.log(i);
}

在使用這種方式時，for 循環的每次迭代都會重復計算數組長度。

有時候這個會很有用，但在大多數情況下，如果能夠緩存數組的長度會更好，這樣只需要計算一次就夠了。我們可以把數組長度復制給一個叫作 length 的變量，例如：

for (let i=0, length=array.length; i < length; i++){
 console.log(i);
}

這段代碼和上面的差不多，但從性能方面來看，即使數組變得很大，也不需要花費額外的運行時重復計算 array.length。

3. 短路求值

使用三元運算符可以很快地寫出條件語句，例如：

x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

但有時候三元運算符仍然很復雜，我們可以使用邏輯運算符 && 和||來替代，讓代碼更簡潔一些。這種技巧通常被稱為“短路求值”。

假設我們想要返回兩個或多個選項中的一個，使用 && 可以返回第一個 false。如果所有操作數的值都是 true，將返回最后一個表達式的值。

let one=1, two=2, three=3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0

使用||可以返回第一個 true。如果所有操作數的值都是 false，將返回最后一個表達式的值。

let one=1, two=2, three=3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null

示例 1

假設我們想要返回一個變量的 length，但又不知道變量的類型。

我們可以使用 if/else 來檢查 foo 是否是一個可接受的類型，但這樣會讓代碼變得很長。這個時候可以使用短路求值：

return (foo || []).length;

對于上述兩種情況，如果變量 foo 具有 length 屬性，這個屬性的值將被返回，否則將返回 0。

示例 2

你是否曾經在訪問嵌套對象屬性時遇到過問題？你可能不知道對象或某個子屬性是否存在，所以經常會碰到讓你頭疼的錯誤。

假設我們想要訪問 this.state 中的一個叫作 data 的屬性，但 data 卻是 undefined 的。在某些情況下調用 this.state.data 會導致 App 無法運行。為了解決這個問題，我們可以使用條件語句：

if (this.state.data) {
 return this.state.data;
} else {
 return 'Fetching Data';
}

但這樣似乎有點啰嗦，而||提供了更簡潔的解決方案：

return (this.state.data || 'Fetching Data');

4. 轉換成布爾值

除了標準的布爾值 true 和 false，在 JavaScript 中，所有的值要么是“真值”要么是“假值”。

在 JavaScript 中，除了 0、“”、null、undefined、NaN 和 false 是假值之外，其他的都是真值。

我們可以使用! 云算法來切換 true 和 false。

const isTrue=!0;
const isFalse=!1;
const alsoFalse=!!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

5. 轉換成字符串

要快速將數字轉換成字符串，我們可以使用 + 運算符，然后在后面跟上一個空字符串。

const val=1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

6. 轉換成數字

要把字符串轉成數字，也可以使用 + 運算符。

let int="15";
int=+int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

也可以使用這種方式將布爾值轉成數字，例如：

console.log(+true); // Return: 1
console.log(+false); // Return: 0

在某些情況下，+ 運算符會被解析成連接操作，而不是加法操作。對于這種情況，可以使用兩個波浪號：~~。

一個波浪號表示按位取反操作，例如，~15 等于 -16。

const int=~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

使用兩個波浪號可以再次取反，因為 -(-n-1)=n+1-1=n，所以~-16 等于 15。

7. 快速冪運算

從 ES7 開始，可以使用 ** 進行冪運算，比使用 Math.power(2,3) 要快得多。

console.log(2 ** 3); // Result: 8

但要注意不要把這個運算符于 ^ 混淆在一起了，^ 通常用來表示指數運算，但在 JavaScript 中，^ 表示位異或運算。

在 ES7 之前，可以使用位左移運算符 << 來表示以 2 為底的冪運算：

// 以下表達式是等效的:
Math.pow(2, n);
2 << (n - 1);
2**n;

例如，2 << 3=16 等同于 2 ** 4=16。

8. 快速取整

我們可以使用 Math.floor()、Math.ceil() 或 Math.round() 將浮點數轉換成整數，但有另一種更快的方式，即使用位或運算符 |。

console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23

| 的實際行為取決于操作數是正數還是負數，所以在使用這個運算符時要確保你知道操作數是正是負。

如果 n 是正數，那么 n|0 向下取整，否則就是向上取整。它會移除小數部分，也可以使用~~ 達到同樣的效果。

移除整數尾部數字

| 運算符也可以用來移除整數的尾部數字，這樣就不需要像下面這樣：

let str="1553"; 
Number(str.substring(0, str.length - 1));

相反，我們可以這樣：

console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1

9. 自動類綁定

在 ES6 中，我們可以使用箭頭進行隱式綁定，這樣可以為類的構造器省下一些代碼，并跟一些重復出現的表達式說再見，比如 this.myMethod=this.myMethod.bind(this)。

import React, { Component } from React;
export default class App extends Compononent {
 constructor(props) {
 super(props);
 this.state={};
 }
myMethod=()=> {
 // This method is bound implicitly!
 }
render() {
 return (
 <>
 <div>
 {this.myMethod()}
 </div>
 </>
 )
 }
};

10. 截取數組

如果你想從一個數組尾部移除某些元素，可以使用一種比 splice() 更快的方法。

例如，如果你知道初始數組的大小，可以像下面這樣重新定義它的 length 屬性：

let array=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length=4;
console.log(array); // Result: [0, 1, 2, 3]

這顯然是一種更簡潔的解決方案。不過，我發現 slice() 的運行速度更快，所以，如果你更看重速度，可以像下面這樣：

let array=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array=array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]

11. 獲取數組最后的元素

數組的 slice() 方法可以接受負整數，并從數組的尾部開始獲取元素。

let array=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

12. 格式化 JSON

你之前可能使用過 JSON.stringify，但你是否知道它還可以用來給 JSON 添加縮進？

stringify() 方法可以接受兩個額外的參數，一個是函數（形參為 replacer），用于過濾要顯示的 JSON，另一個是空格個數（形參為 space）。

space 可以是一個整數，表示空格的個數，也可以是一個字符串（比如’\t’表示制表符），這樣得到的 JSON 更容易閱讀。

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'

英文原文：https://medium.com/@bretcameron/12-javascript-tricks-you-wont-find-in-most-tutorials-a9c9331f169d