JavaScript 常用功能總結

小編吐血整理加上翻譯，太辛苦了~求贊！

本文主要總結了JavaScript 常用功能總結，如一些常用的JS 對象，基本資料結構，功能函數等，還有一些常用的設計模式。

目錄：

衆所周知，JavaScript是動态的面向對象的程式設計語言，能夠實作以下效果：

1. 豐富Web 網頁功能

2. 豐富Web界面

3. 實作本地或遠端存儲。

4. 實作分布式網絡應用的前端元件，并在背景進行資料存儲管理。

5. 使用JavaScript可以實作完整的分布式Web 應用。

JavaScript 中的資料類型

JavaScript 提供三種中繼資料類型，string，number，和Boolean,可使用typeof(v) 測試變量V 的類型，<code>typeof(v)==="number"</code>

提供五種基本的引用類型：Object, Array, Function, Date 及RegExp。數組，函數，日期和正規表達式是特殊類型，但是嚴格來講，日期和正規表達式是中繼資料類型，可封裝在其他對象中。

JS 中變量類型，數組元素類型，函數參數以及傳回值的類型不需要聲明類型，類型之間的轉換是自動執行的。

變量值可以是：

1. 數值：如字元串，數字或布爾值。

2. 對象引用： 可引用典型對象，也可以是資料，函數，日期或正規表達式。

3. 特殊資料值，Null,是典型的用于初始化對象的預設值。

4. 特殊資料undefined，常用于已被定義，但未指派的變量。

string 是一系列的Unicode 字元串，String 如“hello world”,’A3FO’或空字元串“”，字元串連接配接可通過+操作符來執行，也可以使用=号來驗證兩個字元串是否相等；

<code><code></code></code> numeric 表示64位的浮點數，在JS 中沒有明顯的區分整形和浮點數，如果一個表達式的值不等于某個數字，那麼它的值可設為NaN,表示非數字，可聯合isNaN使用。

如下表是詳細的類型測試和轉換

<code><code></code></code> 

目前，JavaScript，ES5提供兩種作用域類型：全局變量及函數作用域，沒有塊作用域。塊作用域的範圍不太明确，是以應當避免塊作用域的使用。如下代碼，盡管是開發人員常用的Pattern,卻是一個陷阱。

所有的變量聲明最好是在函數的開始位置。在JS，ES6版本中支援塊作用域，采用關鍵字let 定義變量。

從ES5開始， 嚴格模式用于檢測運作時的錯誤，在嚴格模式下，所有的變量必須聲明，如果給未聲明的變量指派會抛出異常。

在JavaScript 檔案或&lt;Script&gt;元素内，通過輸入以下代碼切換到嚴格模式：

建議采用嚴格模式，除非項目依賴的庫不相容嚴格模式。

JS中的對象概念不同于OO或UML中的對象，尤其是在JS中對象不需要執行個體化，也可以有自己的方法，不僅有property slots，也包含method slots。除此之外還包含key-value slots；是以他們總共有三種Slots， 而常見的對象隻有屬性槽。

JS對象是由一系列的name-value 組成的Slot。而name 可以是屬性名稱，函數名稱，映射名稱。對象可通過一種特定的方式建立，使用JS 對象聲明文法（JSON），而不需要執行個體化一個類。代碼如下：

如果Slot 的name 是合法的JS 辨別符，則Slot可表示屬性，方法，或鍵值對。如果名稱含有一些特殊字元如空格，則Slot代表鍵值對，是一種映射元素，如下：

Property Slot  中的name:

1. data value 屬性，在這種情況下，Value 表示變量值，或是值表達式。

2. object-valued 屬性，Value 表示對象的引用或對象表達式。

method Slot 表示的是JS 函數，它的值是JS 函數定義表達式：

Object 屬性可以使用兩種方法來通路：

1. 使用”.”(與C++ 和Java的類似)：

2. 使用map：

person1["lastName"] = "Smith"

JS 對象能夠用于各種途徑，以下是五種常見情況：

1. Record是Property slots集合，如：

2. map 如Hash map，數組，hash表；

3. Untyped 對象不需要執行個體化類，它可能包含property slot 和function slots:

Array List

JS array 即邏輯資料結構，通過數組下标通路。如數組初始化：

JS數組可動态增長，是以數組索引有可能比實際元素個數多，如下：

數組循環：

for (i=0; i &lt; a.length; i++) { ...}

數組是特殊的對象類型，是以有很多情況下，需要判斷變量是否為數組類型，使用IsArray方法：<code>Array.isArray( a)。</code>

添加新元素到數組：

如果數組較小，可使用foreach 循環：

JS 也提供克隆數組的函數：

map 提供key 到值得映射。JS map 是一串字元集，可包含空格：

1：array lists：如["one","two","three"]，special JS對象

2：records：特殊的JS 對象，如<code>{firstName:"Tom", lastName:"Smith"}；</code>

3：maps： 如{"one":1, "two":2, "three":3}

4：entity 表：如下表所示,是一種特殊的map，值是有固定ID的記錄。

record，map，entity 在實際應用中沒有明顯的區分，隻是概念上的區分。對JS 引擎而言，都是對象。但是從概念上是有區分的。

如表1 所示，函數是特殊的JS 對象，有name 屬性和length屬性表示參數的個數，如下，判斷v是否指向函數：

函數定義：

theNameOfMyFunction 是可選的，如果省略函數名稱，則稱該函數為匿名函數。通常，函數是通過變量來調用的，如上面的代碼，則表示

myFunction 會調用myFunction（）函數，而不是使用theNameOfMyFunction()調用。

匿名函數表達式在其他程式設計語言中稱為lambda 表達式。如下代碼是匿名函數。可以與預定義的sort函數對比：

函數聲明：

等價；

聲明了函數theNameOfMyFunction ，并使用theNameOfMyFunction 變量來引用函數。

JS 提供函數内聯，closure機制允許JS 函數調用函數之外的使用變量。函數可以建立closure 來存儲目前的環境。如下，不需要通過參數将外部變量的結果傳給内部函數，它本身就是可用的。

當執行一個方法時，可以使用内置arguments 對象通路函數内的參數，arguments 對象與數組使用方法類似，有長度屬性，也有索引，并且可以使用For語句來循環疊代。但是由于它并不是Array 執行個體，是以JS arrary的部分方法無法應用如foreach。

arguments 對象的元素個數與函數參數個數相同，也可以定義方法的時候不指定參數個數，在調用時，可為函數賦多個參數，如：

方法是在構造函數的原型上定義的，可以通過對象建立的構造器調用，如Array.prototype.forEach；Array表示構造器，調用類的執行個體作為上下文對象參考的，如下： 在foreach中numbers表示上下文對象：

無論原型方法是否被上下文對象調用，但是隻要是參數為對象，可以使用JS函數的Call 方法來輔助調用對象。如下，我們可以使用foreach 循環方法：

Function.prototype.call方法和apply都是為了改變某個函數運作時的 context 即上下文而存在的。

類是面向對象中的基本概念，對象的執行個體化稱為類。JS中定義類需要滿足以下五個需求：1.指定類的名稱，執行個體級别的屬性和方法，類級别的屬性和方法。2. 是可預測的實力，能夠用于驗證是否是某一對象的執行個體。3. 執行個體級别的屬性用于檢測對象的直接類型。4. 屬性繼承5.方法繼承。

除此之外還支援對哦內建和多分類。

JS中對類沒有統一的定義規範，可以使用不同代碼模式來定義類，并應用于多種不同的架構。JS中最常用的定義類的方法如下：

1. 構造函數規範，可通過prototype chain實作方法繼承，并支援建立新的類執行個體。

2. factory 對象，用于預定義Object.create 方法來建立新執行個體。該方法中基于構造函數的繼承機制可以被其他機制代替。

建立App都需要使用類，是以經常需要定義類之間的關系，是以必須保證，使用相同類

隻有ES6引入了定義基于構造器的類。新文法支援定義一些簡單的類繼承，具體步驟如下：

Step 1.a 基類Person 具有兩個屬性，first Name 和Last Name，執行個體層的方法toString和靜态方法checkLastName；

Step 1.b 類層次的屬性定義：

在第二步中，會定義一個帶有其他屬性和方法的子類，也有可能重寫父類的相關方法：

ES5中，可以定義繼承基于構造器類的子類。如下：

Step1.a 首先定義構造函數，能夠隐式的定義類的屬性并指派；

注意，上述代碼中的this 指的是新生成的對象，當構造函數被調用時，該對象就已經生成了。

Step1.b 定義執行個體層的方法：

Step 1.c 定義靜态方法：

Step 1.d 定義類層次的靜态屬性

通過調用超類的構造函數Person.call( this, ...)，來建立新對象。其中This指的是Student，Property Slots 在超類的構造函數中已經建立（(firstName 和lastName） 以及其他子類相關的屬性。在這種情況下可使用Property Inheritance 機制保證所有的屬性已經被定義且被建立。

Step2b,通過構造函數的prototype 屬性安裝method inheritance 。如下，配置設定了一個新對象建立子類型構造函數的Prototype 屬性，并做出适當的調整：

Step2c， 重新定義子類方法重寫超類方法：

基于構造器類的執行個體化是通過應用new 操作符來建立的，并提供合适的構造參數：

方法toString 通過pers1. 來調用：

在JS中，prototype 是具有method slots 的對象，可以通過JS方法或屬性槽繼承的。

在該方法中定義了JS 對象Person，含有特殊的Create 方法來調用預定義的Object.Create方法，建立Person類型的對象；

注意JS對象Person實際表示的是factory-based 類。factory-based類的執行個體化是通過調用它自己的Create方法實作的：

getFullName 方法是通過pers1. 調用的，如下：

每個屬性的聲明都是使用Object.Create 聲明的，其中包含三個參數及值，'descriptors'<code>writable: true</code> and <code>enumerable: true；如上面第五行的。</code>