[toc] ### 新增的數組API #### 靜態方法 - Array.of(...args): 使用指定的數組項創建一個新數組 用法： ```js const arr = Array.of(1,2,3,4); console.log(arr); //輸出[1,2,3,4] ``` 通常情況下，Array.of與new Array功能基本一致。只有在參數中只有一個數值時兩者有區別。 ```js const arr1 = new Array(3); //arr1表示創建了一個length為3且每一項都為empty的數組 const arr2 = Array.of(3); //arr2表示創建了一個length為1且下標為0位的值為3的數組 ``` 在創建的數組長度不固定的情況下，建議采用Array.of方法創建數組。 - Array.from(arg): 通過給定的類數組 或 可迭代對象 創建一個新的數組。 例如：獲取到的元素集合是一個類數組，并不能使用數組中的方法，比如filter方法。若想對該集合使用數組中的方法就可以使用Array.from將類數組轉換成數組，再進行相關操作。 #### 實例方法 - find(callback): 用于查找滿足條件的第一個元素 例如：有一個學生信息的數組，里面有20條學生的信息，每條學生信息是一個對象。如果想在該數組中找到學號ID為6的學生，就可以用find方法。 ```js const students = new Array(20); //假設每條記錄都是一個學生信息的對象 const res = students.find(item=>{ if(item.id === 6){ return true } else{ return false } }) //find方法會將數組中的每一項按順序傳給item，然后進入函數體進行相關的計算。若函數體返回true，則將該項數據返回給res。若為false則繼續對下一條數據進行處理。如果數組中沒有滿足條件的數據則返回undefined。 //上面的代碼還可以簡寫成如下的形式： const res = students.find(item=>item.id === 6) ``` >find與filter的區別為：find只會查找出第一個滿足條件的數據，filter會找出數組中所有滿足條件的記錄。 - findIndex(callback)：用于查找滿足條件的第一個元素的下標 該方法與find方法基本相同，只不過該方法找到第一個滿足條件的數據時返回的是該項數據在數組中的下標。若沒有滿足條件的數據則返回-1。 >find和findIndex兩個方法適合方便的查找數組中的每一項數據是對象的時候，以對象中的某一個鍵值為條件進行匹配。 - fill(data)：用指定的數據填充滿數組所有的內容 ```js const arr = new Array(10); //創建一個長度為10的數組 arr.fill('abc'); //將數組中的每一項賦值為abc ``` - copyWithin(target, start?, end?): 在數組內部完成復制，該方法會直接改變該數組的值，沒有返回值。 - target(number類型)表示從數組的第幾個下標位置開始改變數據，必須設置 - start(number類型)表示從數組的第幾個下標位開始復制，不填默認從數組0位開始復制 - end(number類型)表示要復制的數據取到第幾位結束，不包含end值下標的那位數據。不填默認復制到數組末位。 ```js const arr = [1, 2, 3, 4, 5, 6]; //只設置第一個參數，表示從下標2開始，改變數組的數據，數據來自于下標0位置開始 arr.copyWithin(2); // [1, 2, 1, 2, 3, 4] //設置第一個和第二個參數，表示從下標為2的位置開始改變數據，數據來自于下標為1的位置開始的數據，向后依次復制。 arr.copyWithin(2, 1); // [1, 2, 2, 3, 4, 5] //設置三個參數，表示從下標為2的位置開始改變數據，數據來自于下標為1的位置開始的數據，截止到下標為3的數據停止復制且不復制下標為3的這條數據。 arr.copyWithin(2, 1, 3); // [1, 2, 2, 3, 5, 6] ``` 該方法實際開發中應用場景不多，滿足特定條件可以使用。 - includes(data)：判斷數組中是否包含某個值，使用Object.is匹配。該方法為ES7中的方法，返回值為true或false。 ### [擴展]類型化數組 #### 數字存儲的前置知識 1. 計算機必須使用固定的位數來存儲數字，無論存儲的數字是大是小，在內存中占用的空間是固定的。 2. n位的無符號整數能表示的數字是2^n個，取值范圍是：0 ~ 2^n - 1 3. n位的有符號整數能表示的數字是2^n個，取值范圍是：-2^(n-1) ~ 2^(n-1) - 1 4. 浮點數表示法可以用于表示整數和小數，目前分為兩種標準： 1. 32位浮點數：又稱為單精度浮點數，它用1位表示符號，8位表示階碼，23位表示尾數 2. 64位浮點數：又稱為雙精度浮點數，它用1位表示符號，11位表示階碼，52位表示尾數 5. JS中的所有數字，均使用雙精度浮點數保存 #### 類型化數組 類型化數組：用于優化多個數字的存儲 具體分為： - Int8Array： 8位有符號整數（-128 ~ 127） - Uint8Array： 8位無符號整數（0 ~ 255） - Int16Array: ... - Uint16Array: ... - Int32Array: ... - Uint32Array: ... - Float32Array: - Float64Array 1. 如何創建數組 ```js new 數組構造函數(長度) const arr = new Int8Array(5); //創建一個長度為5的8位有符號整數數組 console.log(arr); //輸出結果為[0,0,0,0,0]，不同于new Array創建完成后是empty。該構造函數創建完成后為保證數據位的存儲空間，會采用0占位。該數組中每一項只能存儲-128~127之間的整數值。 數組構造函數.of(元素...) const arr = Int8Array.of(3,4,5,6,7); 數組構造函數.from(可迭代對象) const arr = Int8Array.from([2,3,4,5,6]) new 數組構造函數(其他類型化數組) const arr1 = new Int8Array(arr); //該方法可以將arr復制到arr1中，兩個數組內容相同，但不是同一個數組。復制時若原數組類型與新數組類型不一致，可能會出現數據混亂。 ``` 2. 得到長度 ```js 數組.length //得到元素數量 數組.byteLength //得到占用的字節數 ``` 3. 其他的用法跟普通數組一致，但是： - 不能增加和刪除數據，類型化數組的長度固定 - 一些返回數組的方法，返回的數組是同類型化的新數組 ### ArrayBuffer ArrayBuffer：一個對象，用于存儲一塊固定內存大小的數據。 ```js new ArrayBuffer(字節數) ``` 可以通過屬性```byteLength```得到字節數，可以通過方法```slice```得到新的ArrayBuffer #### 讀寫ArrayBuffer 1. 使用DataView 通常會在需要混用多種存儲格式時使用DataView DataView會返回一個對象，用來操作指定的buffer，創建時可以設置三個參數 DataView(buffer, offset, len) - buffer，該參數必填，用來指定要操作哪個buffer，用來填寫該buffer的變量名 - offset，可選項，用來設置操作buffer起始位置的偏移量。即從buffer的哪個位置開始操作，默認從第一位開始，偏移量設置幾就代表從第一位開始向后偏移幾位。 - len，可選項，用來設置操作buffer從起始位置開始多長的數據。即可以操作的buffer的長度，默認為從起始位開始到buffer結束的長度 ```js const bf = new ArrayBuffer(10); //創建了一個10個字節長度的buffer const dview = new DataView(bf, 2, 5); //dview用來操作buffer，只能操作從bf從下標為2的位置開始到下標為6的位置結束這一區間內的數據。 ``` 如何用DataView來讀寫buffer中的數據 ```js //以上方的buffer對象為例創建一個DataView實例 const dview = new DataView(bf, 2, 5); //此時dview只能操作buffer中下標從2-6之間的這段數據 //完整的bf的buffer以Int8的表現為[0,0,0,0,0,0,0,0,0,0] //dview可操作的區域為兩豎線間的位置 | | //使用set+數組類型的方法向具體的位置添加數據 dview.setInt8(1,33); //第一個參數1代表在DataView實例可操作范圍內的偏移量 //第二個參數表示具體賦給該位置的值 //執行完該條語句buffer的Int8值為[0,0,0,33,0,0,0,0,0,0] //使用get+數組類型的方法讀取指定buffer區域的數據 console.log(divew.getInt8(1)); //僅有一個參數，表示可操作區域的偏移量 //執行該語句會輸出33 ``` 2. 使用類型化數組 實際上，每一個類型化數組都對應一個ArrayBuffer，如果沒有手動指定ArrayBuffer，類型化數組創建時，會新建一個ArrayBuffer 創建類型化數組也可以使用已創建的ArrayBuffer進行創建，例如： ```js const bf = new ArrayBuffer(10); //創建了一個長度為10的ArrayBuffer const arr = Int8Array(bf); //通過bf創建了一個長度為10的8位類型化數組 const arr2 = Int16Array(bf); //通過bf創建了一個長度為10的16位類型化數組 //arr和arr2這兩個數組雖然不同，但因為都是基于bf創建的，所以兩個數組操作的是同一個內存空間。 arr[0] = 13; //把arr的第一位賦值13 console.log(arr2[0]); //arr2的第0位也會輸出13 ```