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