物件程式庫

Array

Array 物件是 JavaScript 提供「陣列」資料結構的解決方案。雖然採行這樣的方式，只能建立一維陣列，但還是可以對陣列產生陣列的方式，來實現多維陣列的設計。

這裡只列出操作陣列物件的功能，並未列出 ECMAScript 5 以後追加的一系列函數式設計功能！因為這些功能很難說明，要看範例才知道在做什麼，所以請進一步看 MDN 的文件，熟悉這些能提升資料結構與演算法的開發效率。

Audio and Video

對應 HTML5 的 Audio 和 Video 標籤，兩者使用一樣的 API 來控制播放音樂和影片的功能。

事件：

Boolean

Boolean 物件用來表示 true 與 false 兩種值的資料。

它只有繼承自 Object 的 toString() 和 valueOf(物件) 兩個功能，前者以字串輸出 Boolean 物件的資料，後者將物件轉換為 Boolean 物件的資料。

Canvas

對應 HTML5 的 Canvas 標籤，用來表示繪圖區域。

對 JavaScript 來說，重點是取得 CanvasRenderlingContext2D 物件後，用它來進行繪圖，有如下屬性：

以及如下方法：

雖然 HTML5 提供了這套 API，但沒有 GDI 電腦繪圖專業的一般人很難活用它，不花個一年半載鑽研，沒辦法藉由 Canvas 做出什麼成效來。所以在這套 API 遇到挫折不要氣餒，循序漸進一步步學成相關技術就好。

你可以透過以下章節初步了解 Canvas API 的使用情況：貼圖 (Draw pictures)、連續圖像 (Sprite)、雙重緩衝 (Double Buffer)、翻頁 (Page Flipping)、影格 (Frame)、圖磚 (Tile)，雖然無法因此成為圖形裝置電腦繪圖技術的專業，但在循序漸進的這條路上應該會有幫助。

Date

Date 物件提供處理日期與時間的功能。

然而，取得的是使用者電腦所設定的時間，所以不見得是現實生活的準確時間。

new Date() 不輸入參數，會以當下時間為參數。

輸入字串當時間，格式就像 1995-12-04T12:34:56，依此類推。

在設定為台北地區的作業系統使用 getTimezoneOffset()，會傳回 -480 分鐘，也就是慢八小時的意思。

Function

JavaScript 把 function（函式）設計為 first class object（第一級物件），所有函式都是 Function 物件，而且是最高層級的型別，能夠當作參數傳遞！

call 其實就跟正常呼叫函式一樣，只是能指定 this 的接收者。

apply 可以把多個參數的函式，改用陣列替代，變成只需一個參數就好。它的用途不是指定 this 的接收者，所以接收者通常設為 null。

bind 不是呼叫函式，而是將函式建立成一個新的 function 物件給接收者，就像接收者自己有了這個方法一樣。通常用在傳入匿名函式參數的場合，也就是把 bind 出來的 function 物件當匿名函式傳入參數。

JSON

藉由 eval() 能執行字串中的程式，讓 JavaScript 能將物件轉為字串保存起來，日後再從字串轉為物件，所規範出來的資料格式，全文為 JavaScript Object Notation。

如果你不知道這是怎麼回事，來看範例：

//建立一個物件 let player={ name:'Twideem Civs', number:58 }; //轉為 JSON let json=JSON.stringify(player); document.write(json);

{"name":"Twideem Civs","number":58}

接續上面的範例，現在還原 json 字串為另一個新的物件：

//將 JSON 建立為新的第二個物件 let oldboy=JSON.parse(json); //輸出新物件的屬性值 document.write(oldboy.name); document.write(oldboy.email);

Twideem Civs
twideem@outlook.com

字串很容易寫在檔案保存起來，有了 JSON 等於 JavaScript 有了序列化的機制。

Map

鍵值對資料結構，與 Object 的差別在於照 set() 資料的順序排列資料，不會排序，且迭代性能提高。

Math

Math 是適合用來做數學運算的物件。特別的是，Math 物件不能使用 new 來建立，必須直接呼叫它的函數與常數。

大多是直接套用的數學函數，只有 random() 的使用比較複雜，需要另外說明！它是我們取得「亂數」的管道，但它傳回的值是小數點達十幾個位數、介於 0.0 到 1.0 之間，所以如果不另外處理的話，傳回來的值不適合我們使用。

通常我們取得亂數的情況希望是整數，因此常見的用法是使用四捨五入的方式來處理 random() 的值……

Math.round(Math.random()*(最大值-最小值))+最小值

如果你需要傳回 3 到 9 之間的亂數，就是：

Math.round(Math.random()*(9-3))+3;
除了使用四捨五入的 round()，有時候會想使用無條件進位的 ceil() 或無條件捨去的 floor()，差異如下：

Math.round(Math.random()*10); //四捨五入：傳回 0 到 10。 Math.ceil(Math.random()*10); //無條件進位：傳回 1 到 10。 Math.floor(Math.random()*10); //無條件捨去：傳回 0 到 9。
當你希望產生的亂數直接對照陣列索引值，就適合直接用 floor()：

document.write(['剪刀','石頭','布'][Math.floor(Math.random()*3)]);

Number

Number 物件可以直接決定數值資料的輸出方式。在 JavaScript 我們稍不留意，資料容易就會轉為字串來處理，使用 Number 物件來確保使用數值資料。

Object

所有物件都會繫結 Object 的 prototype，因此 Object 最主要作用，就是在內部做為其它物件的共通功能！像是所有物件都能以 toString() 輸出資料、都能以 valueOf() 將資料轉換成各自己型態的資料、都能以 constructor 做為 class 語法的建構式。

其次是以 Object. 開頭的功能，方便外部使用者組織程式碼，讓 JavaScript 這門動態型別的物件導向語言，也能有效管理大量程式碼。

Object 有多好用，看了範例就知道，簡直能讓人下出一手神乎其技：

Object.prototype.br=function(){ document.write(`${this}<br>`); }; 'abc'.br(); //String (123).br(); //Number [1,2,3].br(); //Array

abc
123
1,2,3

Promise

用來設計非同步（asynchronous）執行的程式。

在 JavaScript 3 時代，想另外開一個執行序來進行非同步運算，都是用 setTimeout()。但 setTimeout() 把要執行的程式寫在回呼函式裡，當非同步運算複雜到一條又一條的執行序，會導致一層又一層的回呼函式：

setTimeout(function(){ setTimeout(function(){ setTimeout(function(){ setTimeout(function(){ //一場回呼地獄災難 },200); },200); },200); },200);
Promise 可以用串接一個又一個 then() 函式解決回呼地獄的問題：

let promise = new Promise(/*這裡先省略 executor 函式*/); promise.then(function(){}) .then(function(){}) .then(function(){}) .then(function(){});
注意！Promise 並不是執行序，它本身並沒有執行序的功能，Promise API 是用來為非同步程式設計制定一個上下文語義的框架，畢竟就本文所舉的例子，執行序只是用來設計非同步運算的一個手段。所以它不叫 Thread，而叫 Promise，它可用來表示非同步運算結果為成功或失敗。如果你需要的是比 setTimeout() 和 setInterval() 更正式一點的執行序，可以用 Web worker。

底下範例會在三秒後輸出 Hello! 訊息：

let promise = new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve('Hello!'); },3000); }); promise.then(console.log);
Promise() 建構函式可接受兩個參數，第一個用在有結果的情況，通常參數名稱取為 resolve，第二個用在沒有結果的情況，通常參數名稱取為 reject。範例只對有結果的情況做出反應，沒有結果的話其實可以進一步除錯或防呆。

then() 會在 Promise 送出 resolve() 的情況下有反應，它會獲得 resolve() 傳回的值，並將它傳入第一個參數，運作完會再將 Promise 本身傳回，也就是再度獲得同一個 Promise，這也是 then() 可以串接的原因，能持續對同一個 Promise 做出反應。

就像 resolve 對應 then()，reject 的話可以用 catch() 來做反應。

除了用建構函式設計非同步程式，也可以直接用 Promise.resolve() 和 Promise.reject() 產生有結果的 Promise 和沒有結果的 Promise：

Promise.resolve('Bye').then(console.log);

RegExp

RegExp 物件用來實現 Regular Expressions，這是一種強大的字元匹配機制。

還有 hasIndices、global、ignoreCae、multiline、dotAll、unicode、sticky 屬性沒列出來，這是因為通常要設定這些狀態的話，不如改用 /正規式/dgimsuy 這語法糖來簡化 RegExp 的操作。

Set

集合資料結構，與 Array 的差別在於資料不會重複，且迭代性能提高。

Set 雖然也有 entries() 和 keys()，但那是為了能和混用 Map() 防錯用的。

來看個有趣的範例：

let set=new Set([2,0,1,2,1,2,2,1]); //陣列轉集合 let array=[...set]; //集合轉陣列 document.write(array);

2,0,1

String

String 物件可以對「文字資料」進行多種操作，例如：搜尋、替換、擷取。

JavaScript 的字串使用 UTF-16，不夠處理完整的 Unicode 編碼，於是追加 code point 和 well formed 等做法解決問題。

substr() 並不是標準，但它往往比 substring() 好用而被廣泛使用，於是規格書刻意 deprecated 說不建議使用這項功能。對此我的想法是，就算有哪個程式引擎沒實作 substr()，我也會自己加到 String.prototype，沒理由不用它 (●'◡'●)

URL

URL 能在從網址中取得通訊行定、域名、埠號、標識，以及夾帶的參數資料。

你很難不喜歡這個功能：

let url=new URL('http://localhost/exec.html?command=notepad'); document.write(url.searchParams.get('command'));

notepad

進一步把 window.location 傳給 URL()，就能取得網頁夾帶的參數資料。