怎樣深入理解JavaScript

本篇文章為大家展示了怎樣深入理解JavaScript，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

正則表達式

A.創建正則表達式

1.字面量：/xyz/i，加載時編譯

2.構造函數：new RegExp(‘xyz’,’i')，運行時編譯

3.標識：

• g（global），給定的正則可以匹配多次
  

• i（ignoreCase），試圖匹配給定的正則時忽略大小寫
  

• M（multiline），在多行模式時，開始操作符^和結束操作符$匹配每一行
  

B.正則方法

• RegExp.prototype.test()：是否存在匹配
  

• String.prototype.search()：匹配位置的索引
  

• RegExp.prototype.exec()：捕獲分組
  

• String.prototype.match()：捕獲分組或返回所有匹配的子字符串
  

• String.prototype.replace()：查找和替換
  

C.標識/g的一些問題

1.帶有/g的正則表達式不能內聯

2.帶有/g的正則表達式作為參數：為了安全起見，應該設置lastIndex為0（test()和exec()時）

3.共享帶有/g的正則表達式：需要把lastIndex設置為0

D.提示與技巧

1.缺少斷言（例如^、$）的正則表達式可以在任意位置匹配

2.匹配一切：new RegExp(‘’).test()或/(?:)/，不匹配任何字符：/.^/

E.正則表達式備忘單：P310

https://github.com/zhangyue0503/html5js/blob/master/speakingjavascript/19.js

Date

A.Date構造函數

1.new Date(year, month,date?,hours?,minutes?,seconds?,milliseconds?)

B.Date原型方法

• Date.prototype.get<<Unit>>()：根據當地時間返回單位時間
  

• Date.prototype.set<<Unit>>()：根據當地時間設置單位時間
  

• Date.prototype.getUTC<<Unit>>()：根據世界時間返回單位時間
  

• Date.prototype.setUTC<<Unit>>()：根據世界時間設置單位時間
  

• Date.prototype.getTime()：返回毫秒數（從1970.1.1開始）
  

• Date.prototype.setTime()：以毫秒數為單位指定日期
  

• Date.prototype.valueOf()：當日期轉換成數值的時候調用此方法
  

• Date.prototype.getTimezoneOffset()：以分鐘為單位返回當地時間與世界時間的偏差
  

• Date.prototype.getFullYear()：獲取年
  

• Date.prototype.setFullYear()：設置年
  

• Date.prototype.toTimeString()：返回當前時區的時間
  

• Date.prototype.toLocaleTimeString()：返回的時間格式是具備地區特性的
  

• Date.prototype.toDateString()：返回日期
  

• Date.prototype.toLocaleDateString()：具備地區特性的日期
  

• Date.prototype.toString()：返回的日期和時間落在當前的時區內不包含毫秒
  

• Date.prototype.toLocaleString()：具備地區特性
  

• Date.prototype.toUTCString()：返回世界時間
  

• Date.prototype.toISOString()：所有的內部屬性都出現在返回的字符串中
  

• Date.prototype.toJSON()：以日期為對象轉換成JSON字符串
  

Math

A.Math屬性

Math.E（歐拉常數）、Math.LN2（2的自然對數）、Math.LN10（10的自然對數）、Math.LOG2E（以2為底的e的對數）、Math.LOG10E（以10為底的e的對數）、Math.PI（圓周率）、Math.SQRT1_2（1/2的平方根）、Math.SQRT2（2的平方根）

B.數值函數

• Math.abs()：絕對值
  

• Math.ceil(x)：返回大于等于x的最小整數 
  

• Math.exp(x)：返回e的x次冪
  

• Math.floor(x)：返回小于等于x的最大整數
  

• Math.log(x)：返回x的自然對數
  

• Math.pow(x)：返回x的y次冪
  

• Math.round(x)：返回最接近x的整數 
  

• Math.sqrt(x)：返回根號x
  

C.三角函數

• Math.acos(x)：返回x的反余弦值
  

• Math.atan(x)：返回x的反正切值
  

• Math.cos(x)：返回x的余弦值
  

• Math.sin(x)：返回x的正弦值
  

• Math.tan(x)：返回x的正切值
  

D.其他函數

• Math.min(……)：返回參數中最小的數字，通過apply可以應用于數組
  

• Math.max(……)：返回參數中最大的數字，通過apply可以應用于數組
  

• Math.random()：返回一個偽隨機數，0<=r<=1
  

JSON

A.背景

1.遵循兩個原則

• 字符串必須使用雙引號，字符串字面量是無效的
  

• 屬性鍵也必須使用雙引號
  

B.JSON.stringify(value, replacer?,space?)

1.將值valueOf轉換成JSON字符串

2.replacer用于轉換前替換參數value：節點訪問函數、屬性鍵白名單

3.space影響輸出格式，沒有這個參數將以單行文本輸出：可選數字和字符來控制縮進

4.解析不被JSON支持的內容：

• 一個不被支持的值返回undefined，如JSON.stringify(function(){})
  

• 不被支持的屬性直接被忽略，如JSON.stringify({foo:function(){}})
  

• 不被支持的值在數組中被解析成null，如JSON.stringify([function(){}])
  

5.JSON.stringify()遇到一個對象具有toJSON方法，則直接該方法來獲得字符串化的值，內置toJSON的：

Boolean.prototype.toJSON()、Number.prototype.toJSON()、String.prototype.toJSON()、Date.prototype.toJSON()

C.JSON.parse(text, reviver?)

1.解析方便格式的JSON數據，返回相應的值

2.reviver是一個節點訪問函數，可以用來轉換解析后的數據

標準全局變量

A.構造器

Array、Boolean、Date、Function、Number、Object、RegExp、String

B.Error構造器

Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError

C.非構造器函數

• encodeURI(uri)：用百分號來編碼特殊字符，除了;,/?:@&=+$#a-zA-z0-9-_.!~*’()
  

• encodeURIComponent(uriComponent)：編碼，除了a-zA-Z0-9-_.!~*’()
  

• decodeURI()：解碼encodeURI
  

• decodeURIComponent()：解碼encodeURIComponent
  

• 廢棄函數：escape()、unescape()
  

• isFinite(number)檢測是否為infinity、isNaN()、parseFloat()、parseInt()
  

D.通過eval()和new Function()來動態執行JS代碼

1.非嚴格模式中，eval所執行的代碼會在當前作用域下創建本地變量，而嚴格模式下不會

2.執行eval()的方式有兩種

• 直接調用：直接調用eval函數
  

• 間接調用：通過將eval()存儲在另一個名稱下并通過call()方法來調用
  

3.new Function()會創建全局作用域的函數

4.盡可能使用new Function()來替代eval執行代碼，參數更為沒弄明白

5.最佳實踐是盡量避免使用eval()和new Function()。動態執行代碼通常相對比較慢并且存在安全隱患

E.Console API

console.clear()、console.debug()、console.error()、console.exception()、console.info()、console.log()、console.trace()、console.warn()、console.assert()、console.count()、console.dir()、console.dirxml()、console.group()、console.groupCollapsed()、console.groupEnd()、console.table()、console.markTimeline()、console.profile()、console.profileEnd()、console.time()、console.timeEnd()、console.timeStamp()

編碼和JavaScript

1.對于你自己的應用，可以使用Unicode。但是必須聲明app的HTML頁面是UTF-8編碼的

元編程風格指南

A.通用技巧

1.代碼應該具有一致性

2.代碼應該易于理解：簡短并不總是更好的；好的代碼是一本教科書（代碼應該解釋正在發生的事情，注釋應該解釋事情為什么發生、文檔應該填補代碼和注釋留下的空白）；

3.不要自作聰明，不要讓人思考

4.避免優化代碼速度或大小

B.普遍認可的最佳實踐

1.使用嚴格模式；總是使用分號；總是使用嚴格相等（===）和嚴格不等（!==）；只有空格或只用制表符縮進，但不要混合使用；引用字符串；避免全局變量；

2.括號風格：使用1TBS，左括號開始于同一行的語句頭部之后，if(x){這樣

3.推薦字面量而不是構造函數

4.不要自作聰明：不要嵌套條件操作符；使用邏輯操作符時，不要簡寫if語句；使用自增或自減操作符作為語句而不要作為表達式；檢查undefined；使用Math.round()轉換整數；

5.可接受的技巧：使用或(||)提供默認值；使用泛型方法，把Object.prototype簡寫為{}，把Array.prototype簡寫為[]；ECMAScript5中末尾的逗號是合法的；ECMAScript5允許使用保留字作為屬性鍵；

C.具有爭議的規則

1.面向對象

• 推薦構造函數而不是其他實例創建模式
  

• 避免私有數據使用閉包
  

• 即使構造函數沒有參數，也要寫括號
  

• 小心操作符優先級
  

調試的語言機制

• 調試器聲明的行為類似于設置數點并啟動調試器
  

• console.log(x)把x的值輸出到JS引擎的控制臺
  

• console.trace()把堆棧跟蹤信息打印到引擎的控制臺
  

子類化內置構造函數

A.術語

1.使用“子類化內置構造函數(subclass a built-in)”，而避免采用“擴展(extend)”

B.障礙1：具有內部屬性的實例

1.在JS中常用的子類化技術是在子類構造函數中調用超類構造函數，且作用域中this指向子類自身

2.解決方法：直接復制方法和屬性到實例中

C.障礙2：內置的構造函數不能作為方法調用

1.解決方法：在子類構造函數中，新建一個超類實例，并且將超類實例的屬性復制到子類實例中

D.另一種解決方案：委托

JSDoc：生成API文檔

1.通過/**來標記內容

類庫

1.shim和polyfill，在舊的JS引擎上改造新的功能

模塊系統和包管理器

A.模塊系統

1.CommonJS模塊(CommonJS Module,CJS)：化身就是Node.js模塊，緊湊的語法、同步加載的設計、主要用于服務端

2.異步模塊定義（Asynchronous Module Definition,AMD）：典型就是Requirejs，語法稍復雜但不通過eval或者靜態編譯步驟就可以工作、異步加載的設計、主要用于瀏覽器

B.包管理器

npm、Bower、Browserify

其他工具

1.代碼檢測：JSLint、JSHint、ESLint

2.單元測試：Jasmine、mocha

3.壓縮：UglifyJS、YUI Compressor、Closure Compiler

上述內容就是怎樣深入理解JavaScript，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。