1.創建數組
1.1 ES5的方式
回憶下ES5中創建數組的方式：
調用Array的構造函數，即
new?Array()
new?Array(size)
new?Array(element0,?element1,?...,?elementn);
用數組字面量語法，例如：
var?arr1?=?[1,2,3];
其中，調用Array的構造函數時，要注意下面這三點：
(1)如果傳入了一個數組型的值，則數組的長度length屬性會被設為該值，而數組的元素都是undefined;
(2)如果傳入了一個非數值型的值，則該值會被設為數組中的唯一項；
(3)如果傳入了多個值，則都被設為數組元素；
驗證(1)
傳入了一個數組型的值：
var?arr?=?new?Array(3);
console.log(arr);?//?[empty?×?3]
console.log(arr.length);?//?3
console.log(arr[0]);?//?undefined
console.log(arr[1]);?//?undefined
console.log(arr[2]);?//?undefined
驗證(2)
傳入了一個非數值型的值：
var?arr?=?new?Array("3");
console.log(arr);?//?["3"]
console.log(arr.length);?//?1
console.log(arr[0]);?//?3
驗證(3)
傳入了多個值：
var?arr?=?new?Array(3,"3");
console.log(arr);?//?[3,"3"]
console.log(arr.length);?//?2
console.log(arr[0]);?//?3
console.log(arr[1]);?//?3
可以看出，使用new Array()創建數組時，要特別注意傳入一個值時，這個值的類型。而如果想就傳入一個數值，且這個值就是數組中的唯一一個元素時，只能用數組字面量語法了。
Luckily，ES6中創建數組的方法就不需要考慮這么多，下面介紹Array.of()和Array.from()
1.2 ES6的方式
1.2.1Array.of()
針對上述問題，Array.of()就可以解決。不論傳幾個參數、是什么類型的參數，使用Array.of()會把所有傳入的參數都被設為數組元素
驗證(1)
傳入了一個數組型的值：
letarr?=?Array.of(3);
console.log(arr);?//?[3]
console.log(arr.length);?//?1
console.log(arr[0]);?//?3
驗證(2)
傳入了一個非數值型的值：
letarr?=?Array.of("3");
console.log(arr);?//?["3"]
console.log(arr.length);?//?1
console.log(arr[0]);?//?3
驗證(3)
傳入了多個值：
letarr?=?Array.of(3,"3");
console.log(arr);?//?[3,"3"]
console.log(arr.length);?//?2
console.log(arr[0]);?//?3
console.log(arr[1]);?//?3
可以看出，使用Array.of()創建數組時，會把所有傳入的參數都被設為數組元素。
1.2.2 Array.from()
用途：可將類似數組的對象、可遍歷的對象轉為真正的數組。
要想把類似數組的對象轉為數組，在ES5中的實現方法：
Array.prototype.slice.call(arrayLike);
letarrayLike?=?{
'0':'element0',
'1':'element1',
'2':'element2',
length:?3
};
letarr?=?Array.prototype.slice.call(arrayLike);
console.log(arr);?//?["element0","element1","element2"]
可以說ES5的這種方法語義上不夠清晰，在ES6中可以使用Array.from()方法實現：
驗證：
letarrayLike?=?{
0:'element0',
1:'element1',
2:'element2',
length:?3
};
letarr?=?Array.from(arrayLike);
console.log(arr);?//?["element0","element1","element2"]
Array.from()支持三個參數：
第一個參數是類數組對象或可遍歷的對象；
第二個參數(可選)是一個函數，可以對一個參數中的對象中的每一個的值進行轉換；
第三個參數(可選)是函數的this值。
其中，常見的類數組的對象是 ：DOM 操作返回的NodeList集合，以及函數內部的arguments對象。
所謂類似數組的對象，本質特征只有一點，即必須有length屬性。因此，任何有length屬性的對象，都可以通過Array.from方法轉為數組。
可遍歷的對象：含有Symbol.iterator屬性的對象，如Set和Map
驗證(1)
函數內的arguments對象，轉換為數組：
functiontest(){
letarr?=?Array.from(arguments);
returnarr;
}
letarr1?=test(1,2,3,4);
console.log(arr1);?//?[1,?2,?3,?4]
驗證(2)
傳入函數作為第二個參數，轉換對象中的每個值
functiontest()?{
letarr?=?Array.from(arguments,?val?=>?val?*?2);
returnarr;
}
letarr1?=test(1,?2,?3,?4);
console.log(arr1);?//?[2,?4,?6,?8]
驗證(3)
可遍歷對象轉換為數組
letset=?new?Set(['a','b'])
console.log(Array.from(set))?//?['a','b']
2.查找元素
ES5中可以用indexOf、lastIndexOf()查找某個值是否出現在字符串中。
ES6中可以用find()、findIndex()在數組中查找匹配的元素。
其中，find()方法是返回查找到的第一個值，而findIndex()是返回查找到的第一個值的index，即索引位置。這兩個方法都接受兩個參數：
第一個參數是回調函數；
第二個參數(可選)是用于指定回調函數中的this值。
驗證：
find()返回的是滿足條件的第一個值，findIndex()返回的是滿足條件的第一個值的索引。
letarr?=?[1,?2,?3,?4,?5]
console.log(arr.find(item?=>?item?>?3))?//?4
console.log(arr.findIndex(item?=>?item?>?3))?//?3
3.填充數組
3.1 fill()
fill()：用指定的值填充一個到多個數組元素。
其中，當只傳入一個值時，會用這個值重寫數組中的所有值。
該方法接受三個參數：
第一個參數是要填充的值；
第二個參數(可選) 表示填充的開始索引；
第三個參數(可選) 表示結束索引的前一個索引。
驗證(1)
只傳入一個值
letarr?=?[1,?2,?3,?4,?5];
console.log(arr.fill(6));?//?[6,?6,?6,?6,?6]
驗證(2)
如果第二個參數或第三個參數為負值，可將值+數組.length來計算位置
letarr?=?[1,?2,?3,?4,?5];
console.log(arr.fill(6,?-4,?-1));?//?[1,6,6,6,5]
上面第二個參數和第三個參數為負值，實際計算后的值分別為：-4+5，-1+5，即1,4。那么相當于arr.fill(6,1,4);從索引1到索引4前一個位置，即從索引1到索引3，用數值6填充，結果為：[1,6,6,6,5]
類似的方法還有copyWithin()方法
3.2 copyWithin()
該方法也可接受三個參數：
第一個參數是開始粘貼值的索引位置
第二個參數(可選)是開始復制值的索引位置
第三個參數(可選)是停止復制值的位置（不包含當前位置）
注意：所有參數都可以是負值，處理方法和fill()一樣，需加上arr.length來計算
驗證(1)：
copyWithin()傳入一個參數：
letarr?=?[1,?2,?3,?4,?5];
//?從索引位置2開始粘貼
//?1,2,3,4,5填充
console.log(arr.copyWithin(2));?//?[1,?2,?1,?2,?3]
傳入兩個參數：
letarr?=?[1,?2,?3,?4,?5];
//?從索引位置2開始粘貼
//?從索引位置1開始復制
//?2，3，4，5填充
//?console.log(arr.copyWithin(2,?1))?//?[1,?2,?2,?3,?4]
傳入三個參數：
letarr?=?[1,?2,?3,?4,?5];
//?從索引位置2開始粘貼
//?從索引位置1開始復制
//?到索引位置2之前結束復制，即到位置1
//?2填充
//?console.log(arr.copyWithin(2,?1,?2))?//?[1,2,2,4,5]
驗證(2)：
參數傳入負值
//?從索引位置-3+5?=2開始復制
//?從索引位置?-1+5=4之前結束復制，即到位置3
//?3,4填充
//?從索引位置2開始粘貼
console.log(arr.copyWithin(2,-3,-1))?//?[1,2,3,4,5]
4.小結
本文主要總結了ES6中數組部分的擴展。包括兩個創建數組的新方法：Array.of()、Array.from()。兩個在數組中根據條件來查找匹配的元素的方法：find()、findIndex()。還有兩個填充數組的方法：fill()、copyWithin()
