JavaScript ES6 - 陣列擴充套件

本章節的主要內容是： ES6 陣列擴充套件

一：陣列擴充套件： 1。陣列新增特性 <10個API> 1。 Array。from（） 2。 Array。of（） 3。 copyWithin（） 4。 find/findIndex 5。 fill（） 6。 entries（） / keys（） / values（） 7。 includes（）

如圖所示：

1。 ES6 Array。from（）

/**1。 Array。from（） 1。用於將兩類物件轉化為陣列 1。類似陣列的物件 2。可遍歷的物件（包含 ES6 新增的資料結構 Set 和 Map） */// 類似陣列{ let obj1 = { ‘0’： ‘a’， ‘1’： ‘b’， ‘2’： ‘c’， ‘3’： ‘dddddddddd’， // str： ‘dddddddddd’， length： 4 } let arr1 = Array。from（obj1） console。log（arr1）； // 列印結果： // ［‘a’， ‘b’， ‘c’， ‘dddddddddd’］}// DOM 操作返回的 NodeList 集合{ let pAll = document。querySelectorAll（‘p’） console。log（pAll）； // 列印結果： // NodeList（4）［p， p， p， p］ /** * 在我們沒有使用 Array。from 之前我們試著去遍歷一下，看看其結果 * * 1。結果是可以遍歷。 * 2。那麼妧一峰的《ES6標準入門》第三版中的解說： ‘只有將這個物件轉為真正的陣列，才能使用 foeEach 方法。’ 這個說法怎麼解釋？是因為瀏覽器的問題還是JS語法改變？具體也不清楚。 */ pAll。forEach（function（item） { console。log（‘沒有使用 Array。from 方法之前的遍歷： ’， item）； // 列印結果： // 沒有使用 Array。from 方法之前的遍歷：

•陣列擴充套件•

• // 沒有使用 Array。from 方法之前的遍歷：

•Array。from（） —— 1•

• // 沒有使用 Array。from 方法之前的遍歷：

•Array。from（） —— 2•

• // 沒有使用 Array。from 方法之前的遍歷：

•Array。from（） —— 3•

• }） let pArr = Array。from（pAll） console。log（pArr）； // 列印結果： // （4）［p， p， p， p］ pArr。forEach（function（item） { console。log（item）； // 列印結果： //

陣列擴充套件

Array。from（） —— 1

Array。from（） —— 2

Array。from（） —— 3

console。log（item。innerText）； console。log（item。textContent）； // 列印結果： // 陣列擴充套件 // Array。from（） —— 1 // Array。from（） —— 2 // Array。from（） —— 3 }）}// 字串轉換{ let str1 = ‘abcde’ let arr1 = Array。from（str1） console。log（‘Array。from —— 字串轉換： ’， arr1）； // Array。from —— 字串轉換：［‘a’， ‘b’， ‘c’， ‘d’， ‘e’］}// Array。from（）可以接收第二個引數{ let arr1 = ［1， 3， 5］ let resArr1 = Array。from（arr1， function（item） { return item * 2 }） console。log（‘Array。from - 接收第二個引數，原陣列： ’， arr1）； // Array。from - 接收第二個引數，原陣列：（3）［1， 3， 5］ console。log（‘Array。from - 接收第二個引數，返回結果： ’， resArr1）； // Array。from - 接收第二個引數，返回結果：（3）［2， 6， 10］ // 將陣列中的布林值為 false 的成員轉為 0 let arr2 = ［1，，2，，3］ let resArr2 = Array。from（arr2，（num） => { return num || 0 }） console。log（‘Array。from - 將陣列中的布林值為 false 的成員轉為 0： ’， resArr2）； // Array。from - 將陣列中的布林值為 false 的成員轉為 0：（5）［1， 0， 2， 0， 3］}// Array。from（）可以將字串轉為陣列，然後返回字串的長度{ /** * 因為 Array。from（）能夠正確處理各種 Unicode 字元，可以避免 JS 將大於 \uFFFF 的字元算作兩個字元的 bug 。 */ let str1 = ‘1234’ console。log（‘普通方法獲取字串長度： ’， str1。length）； // 普通方法獲取字串長度： 6 console。log（‘Array。from 將字串轉為陣列，然後返回字串的長度： ’， Array。from（str1）。length）； // Array。from 將字串轉為陣列，然後返回字串的長度 5}

2。 ES6 Array。of（）

/**2。 Array。of（） 1。將一組數值轉化為陣列。 2。 Array。of 這個方法的主要目的是為了你補陣列建構函式 Array（）的不足。 1。不足點： Array（）會因為引數個數的不同，導致 Array（）的行為有差異。 2。小知識點： 1。 Array。of 肯定返回一個數組；如果沒有引數，就返回一個空陣列。 */{ let arr1 = Array。of（1， 2， 3， 4， 5， 6） console。log（‘Array。of（） —— 純數字： ’， arr1）； // Array。of（） —— 純數字：（6）［1， 2， 3， 4， 5， 6］ let arr2 = Array。of（） console。log（‘Array。of（） —— 不放置任何引數： ’， arr2）； // Array。of（） —— 不放置任何引數：［］ let arr3 = Array。of（‘aaa’， ‘2’， 4， 6， NaN） console。log（‘Array。of（） —— 引數中有字串與數字： ’， arr3）； // Array。of（） —— 引數中有字串與數字：（5）［‘aaa’， ‘2’， 4， 6， NaN］}// 展示 Array（）不足{ console。log（‘Array（）方法沒有引數： ’， Array（））； // Array（）方法沒有引數：［］ console。log（‘Array（）方法 1 個引數： ’， Array（3））； // Array（）方法 1 個引數：（10）［empty × 3］ <此處可以理解為［，，，］> console。log（‘Array（）方法 3 個引數： ’， Array（1， 3， 5））； // Array（）方法 3 個引數：（3）［1， 3， 5］}

3。 ES6 fill

/**3。 fill 1。用給定的值替換陣列中的內容（原本的解析是：使用給定值填充一個數組）。 */{ // 當使用一個引數時： let arr1 = ［1， 2， 3， 4， 5］ let resArr1 = arr1。fill（7） console。log（‘fill —— 當使用一個引數時： ’， arr1， resArr1）； // fill —— 當使用一個引數時（5）［7， 7， 7， 7， 7］（5）［7， 7， 7， 7， 7］ // 當使用兩個引數時 let arr2 = ［1， 2， 3， 4， 5］ let resArr2 = arr2。fill（7， 1） console。log（‘fill —— 當使用兩個引數時： ’， arr2， resArr2）； // fill —— 當使用兩個引數時：（5）［1， 7， 7， 7， 7］（5）［1， 7， 7， 7， 7］ // 當使用三個引數時 let arr3 = ［1， 2， 3， 4， 5］ let resArr3 = arr3。fill（7， 1， 3） console。log（‘fill —— 當使用三個引數時： ’， arr3， resArr3）； // fill —— 當使用三個引數時：（5）［1， 7， 7， 4， 5］（5）［1， 7， 7， 4， 5］}

4。 ES6 keys（） / values（） / entries（）

/**4。 keys（） / values（） / entries（）：用於遍歷陣列 1。 keys（）：對鍵名的遍歷。 2。 values（）：對鍵值的遍歷。 3。 entries（）：對鍵值對的遍歷。 */{ // keys（） let arr1 = ［‘a’， ‘b’， ‘c’］ for （let index of arr1。keys（）） { console。log（‘keys（） —— 對鍵名的遍歷： ’， index）； // 列印結果： // keys（） —— 對鍵名的遍歷： 0 // keys（） —— 對鍵名的遍歷： 1 // keys（） —— 對鍵名的遍歷： 2 } // values（） for （let index of ［‘aa’， ‘bb’， ‘cc’］。values（）） { console。log（‘values（） —— 對鍵值的遍歷： ’， index）； // 列印結果： // values（） —— 對鍵值的遍歷： aa // values（） —— 對鍵值的遍歷： bb // values（） —— 對鍵值的遍歷： cc } // entries（） for （let ［index， val］ of ［‘zzz’， ‘xxx’， ‘ccc’］。entries（）） { console。log（‘entries（） —— 對鍵值對的遍歷： ’， index， val）； // 列印結果： // entries（） —— 對鍵值對的遍歷： 0 zzz // entries（） —— 對鍵值對的遍歷： 1 xxx // entries（） —— 對鍵值對的遍歷： 2 ccc }}

5。 ES6 copyWithin（）

/**5。 copyWithin（） 1。在當前陣列內部將指定位置的成員複製到其它位置。 2。 copyWithin（target， start， end） 1。 target：從當前位置開始替換資料。 2。 start：從當前位置開始讀取資料；預設為 0 。 3。 end：到改位置停止讀取資料（不包含當前位置）；預設等於陣列長度。 3。注意： 1。使用該方法會修改當前陣列。 */{ let arr1 = ［1， 2， 3， 4， 5， 6， 7， ‘aaaa’， 9］ let resArr1 = arr1。copyWithin（0， 7， 8） console。log（‘copyWithin - 從陣列中的第 1 個值，替換為陣列中的第 8 個位置的值’， ‘arr1： ’， arr1， ‘resArr1： ’， resArr1）； // 列印結果： // copyWithin - 從陣列中的第 1 個值，替換為陣列中的第 8 個位置的值 arr1：（9）［‘aaaa’， 2， 3， 4， 5， 6， 7， ‘aaaa’， 9］ resArr1：（9）［‘aaaa’， 2， 3， 4， 5， 6， 7， ‘aaaa’， 9］}

6。 ES6 find（） / findIndex（）

/**6。 find（） / findIndex（） 1。 find（）：用於找出 ‘第一個’ 符合條件的陣列成員。 1。當 find 找出第一個符合條件的陣列成員後，就會停止查詢。 2。如果沒有符合條件的成員，則返回 undefinde 。 2。 findIndex（）：返回第一個符合條件的書組成員的位置，即陣列下標。 1。當 findIndex 找出第一個符合條件的陣列成員後，就會停止查詢。 2。如果所有陣列成員都不符合條件，則返回 -1 。 3。注意：這兩個方法會對資料進行轉換 */// find（）方法{ let arr1 = ［1， 3， 5， 7， 9］ let resMember1 = arr1。find（function（item） { return item > 5 }） console。log（‘find（）強調： find 方法只返回了一個值，並沒有將符合條件的兩個值都返回： ’， resMember1）； // find（）強調： find 方法只返回了一個值，並沒有將符合條件的兩個值都返回： 7 let arr2 = ［1， 3， 5， 7， 9］ let resMember2 = arr2。find（function（item） { return item > 10 }） console。log（‘find（）強調：如果沒有符合條件的成員，則返回 undefinde： ’， resMember2）； // find（）強調：如果沒有符合條件的成員，則返回 undefinde： undefined}// findIndex（）方法{ let arr1 = ［2， 3， 5， 7， 8］ let resMember1 = arr1。findIndex（function（item） { return item > 5 }） console。log（‘findIndex（）強調： findIndex 方法只返回了一個下標，並沒有將符合條件的兩個下標都返回： ’， resMember1）； // findIndex（）強調： findIndex 方法只返回了一個下標，並沒有將符合條件的兩個下標都返回： 3 let arr2 = ［1， ‘2’， ‘3’， ‘4’， ‘5’］ let resMember2 = arr2。findIndex（function（item） { return item > 5 }） console。log（‘findIndex（）強調：如果沒有符合條件的成員，則返回 -1： ’， resMember2）； // findIndex（）強調：如果沒有符合條件的成員，則返回 -1： -1}// 與 indexOf 對比：{ // indexOf 無法識別 NaN 。 let res1 = ［1，2，NaN］。indexOf（NaN） console。log（‘indexOf 無法識別 NaN： ’， res1）； // indexOf 無法識別 NaN： -1 /** * findIndex 方法配合 Object。is（）方法可以識別 NaN 。 */ let res2 = ［1，2，NaN］。findIndex（item => Object。is（NaN， item）） console。log（‘findIndex 配合 Object。is（）方法識別 NaN： ’， res2）； // findIndex 配合 Object。is（）方法識別 NaN： 2 let res3 = ［1，2，NaN］。findIndex（（item） => { return item = NaN }） console。log（‘單獨使用 findIndex 方法： ’， res3）； // 單獨使用 findIndex 方法： -1}

7。 ES6 includes（）

/**7。 includes（） 1。判斷陣列是否包含給定的值。 2。注意： 1。當陣列判斷是否包含 NaN 時，推薦使用 includes 方法。 */{ let arr1 = ［1， 2， NaN］ console。log（‘includes —— 普通判斷： ’， arr1。includes（1））； // includes —— 普通判斷： true console。log（‘includes —— NaN 判斷： ’， arr1。includes（NaN））； // includes —— NaN 判斷： true console。log（‘includes —— 不存在時的返回結果： ’， arr1。includes（8）） // includes —— 不存在時的返回結果： false}

以上程式碼執行結果，如圖所示：