除了 Object 之外炉旷，Array 類(lèi)型恐怕是 ECMAScript 中最常用的類(lèi)型了；數(shù)組的每一項(xiàng)可以保存任何類(lèi)型的數(shù)據(jù)；數(shù)組的大小是可以動(dòng)態(tài)調(diào)整的套腹，即可以隨著數(shù)據(jù)的添加自動(dòng)增長(zhǎng)以容納新增數(shù)據(jù)。
下面是操作數(shù)組的常用方法：
（一）數(shù)組的創(chuàng)建
（二）數(shù)組自帶屬性
（三）檢測(cè)是否為數(shù)組
（四）數(shù)組元素的增加與刪除
（五）數(shù)組與字符串的相互轉(zhuǎn)化
（六）數(shù)組的截取和合并
（七）數(shù)組元素的排序
（八）元素在數(shù)組中的位置
（九）數(shù)組的遍歷與迭代
（十）其他方法
（十一）擴(kuò)展運(yùn)算符
（一）數(shù)組的創(chuàng)建[1]
- 使用
Array構(gòu)造函數(shù)的方式
new Array(); // 創(chuàng)建一個(gè)數(shù)組
new Array([size]); // 創(chuàng)建一個(gè)數(shù)組并指定長(zhǎng)度资铡，注意不是上限电禀，是長(zhǎng)度
new Array(element0, element1, ..., elementn); // 創(chuàng)建一個(gè)數(shù)組并賦值
const array = new Array();
array[0] = '1';
- 采用字面量的方法
const array = []; //創(chuàng)建一個(gè)空數(shù)組
const array2 = [1, 2, 3]; //創(chuàng)建一個(gè)有三個(gè)元素的數(shù)組
在使用數(shù)組字面量表示法時(shí)，不會(huì)調(diào)用Array構(gòu)造函數(shù)笤休。
（二）數(shù)組自帶屬性[2]
constructor // 返回創(chuàng)建數(shù)組對(duì)象的原型函數(shù)
length // 返回?cái)?shù)組對(duì)象的長(zhǎng)度
prototype // 可以增加數(shù)組的原型方法和屬性
關(guān)于數(shù)組的length屬性
（1）關(guān)于數(shù)組的的length屬性尖飞，這個(gè)屬性不是只讀的，數(shù)組的該屬性可讀可寫(xiě)店雅；通過(guò)設(shè)置這個(gè)屬性政基，可以從數(shù)組的末尾移除項(xiàng)或向數(shù)組中添加新項(xiàng)。
// 將其 length 屬性設(shè)置為 2 會(huì)移除最后一項(xiàng)結(jié)果再訪問(wèn) colors[2]就會(huì)顯示 undefined 了
var colors = ["red", "blue", "green"]; // 創(chuàng)建一個(gè)包含 3 個(gè)字符串的數(shù)組
colors.length = 2;
alert(colors[2]); //undefined
（2）如果將其 length 屬性設(shè)置為大于數(shù)組 項(xiàng)數(shù)的值闹啦，則新增的每一項(xiàng)都會(huì)取得undefined 值沮明。
var colors = ["red", "blue", "green"]; // 創(chuàng)建一個(gè)包含 3 個(gè)字符串的數(shù)組
colors.length = 4;
alert(colors[3]); //undefined
（3）利用 length 屬性可以方便地在數(shù)組末尾添加新項(xiàng)。
var colors = ["red", "blue", "green"]; // 創(chuàng)建一個(gè)包含 3 個(gè)字符串的數(shù)組
colors[colors.length] = "black"; //（在位置 3）添加一種顏色
colors[colors.length] = "brown"; //（在位置 4）再添加一種顏色
（三）檢測(cè)是否為數(shù)組[3]
- 使用
instanceof方法
instanceof 用于判斷一個(gè)變量是否是某個(gè)對(duì)象的實(shí)例
const array = new Array();
array instanceof Array; //true
- 使用
constructor屬性
constructor 屬性返回對(duì)創(chuàng)建此對(duì)象的數(shù)組函數(shù)的引用窍奋，就是返回對(duì)象相對(duì)應(yīng)的構(gòu)造函數(shù)荐健。
const array = new Array();
array.constructor === Array; // true
- 使用
isArray()方法
對(duì)支持isArray的瀏覽器,直接使用isArray方法酱畅。
const array = new Array();
Array.isArray(array); //true
如果瀏覽器不支持Array.isArray()則需進(jìn)行必要判斷。
/**
* 判斷一個(gè)對(duì)象是否是數(shù)組江场，參數(shù)不是對(duì)象或者不是數(shù)組纺酸，返回false
*
* @param {Object} arg 需要測(cè)試是否為數(shù)組的對(duì)象
* @return {Boolean} 傳入?yún)?shù)是數(shù)組返回true，否則返回false
*/
function isArray(arg) {
if (typeof arg === 'object') {
return Object.prototype.toString.call(arg) === '[object Array]';
}
return false;
}
（四）數(shù)組元素的增加與刪除[4]
-
array.push(e1, e2, ...eN)將一個(gè)或多個(gè)元素添加到數(shù)組的末尾址否，并返回新數(shù)組的長(zhǎng)度餐蔬。
const array = [1, 2, 3];
const length = array.push(4, 5);
// array: [1, 2, 3, 4, 5]; length: 5
-
array.unshift(e1, e2, ...eN)將一個(gè)或多個(gè)元素添加到數(shù)組的開(kāi)頭，并返回新數(shù)組的長(zhǎng)度佑附。
const array = [1, 2, 3];
const length = array.unshift(4, 5);
// array: [ 4, 5, 1, 2, 3]; length: 5
-
array.pop()從數(shù)組中刪除最后一個(gè)元素樊诺，并返回最后一個(gè)元素的值，原數(shù)組的最后一個(gè)元素被刪除帮匾。數(shù)組為空時(shí)返回undefined啄骇。
const array = [1, 2, 3];
const poped = array.pop();
// array: [1, 2]; poped: 3
-
array.shift()刪除數(shù)組的第一個(gè)元素，并返回第一個(gè)元素瘟斜，原數(shù)組的第一個(gè)元素被刪除缸夹。數(shù)組為空時(shí)返回undefined。
const array = [1, 2, 3];
const shifted = array.shift();
// array: [2, 3]; shifted: 1
-
array.splice(start[, deleteCount, item1, item2, ...])從數(shù)組中添加/刪除元素螺句，返回值是由被刪除的元素組成的一個(gè)新的數(shù)組虽惭，如果只刪除了一個(gè)元素，則返回只包含一個(gè)元素的數(shù)組蛇尚。如果沒(méi)有刪除元素芽唇，則返回空數(shù)組。
start指定修改的開(kāi)始位置（從0計(jì)數(shù)）取劫。如果超出了數(shù)組的長(zhǎng)度匆笤，則從數(shù)組末尾開(kāi)始添加內(nèi)容；如果是負(fù)值谱邪，則表示從數(shù)組末位開(kāi)始的第幾位（從1計(jì)數(shù)）炮捧。deleteCount(可選)，從start位置開(kāi)始要?jiǎng)h除的元素個(gè)數(shù)惦银。如果deleteCount是 0咆课，則不移除元素。這種情況下扯俱，至少應(yīng)添加一個(gè)新元素书蚪。如果deleteCount大于start之后的元素的總數(shù)，則從start后面的元素都將被刪除（含第start位）迅栅。item1, item2, …(可選)殊校，要添加進(jìn)數(shù)組的元素,從start位置開(kāi)始。如果不指定读存，則splice()將只刪除數(shù)組元素箩艺。
const array = [1, 2, 3, 4, 5];
const deleted = array.splice(2, 0, 6); // 在索引為2的位置插入6
// array 變?yōu)?[1, 2, 6, 3, 4, 5]; deleted為[]
（五）數(shù)組與字符串的相互轉(zhuǎn)化[5]
- 數(shù)組轉(zhuǎn)字符串
array.join(separator=',')將數(shù)組中的元素通過(guò)separator連接成字符串窜醉，并返回該字符串，separator默認(rèn)為","艺谆。
const array = [1, 2, 3];
let str = array.join(',');
// str: "1,2,3"
toLocaleString()、toString()拜英、valueOf()：所有對(duì)象都具有這三個(gè)方法静汤，數(shù)組繼承的這個(gè)三個(gè)方法，可以看作是join()的特殊用法居凶，不常用虫给。
var colors = ["red", "blue", "green"];
// 調(diào)用數(shù)組的 toString()方法會(huì)返回由數(shù)組中每個(gè)值的字符串形式拼接而成的一個(gè)以逗號(hào)分隔的字符串
console.log(colors.toString()); // red,blue,green
// 調(diào)用 valueOf()返回的還是數(shù)組
console.log(colors.valueOf()); // ["red", "blue", "green"]
console.log(colors.toLocaleString()); // red,blue,green
如果數(shù)組中的某一項(xiàng)的值是 null 或者 undefined，那么該值在join()侠碧、 toLocaleString()抹估、toString()和 valueOf()方法返回的結(jié)果中以空字符串表示。
- 字符串轉(zhuǎn)數(shù)組
string.split(separator,howmany)用于把一個(gè)字符串分割成字符串?dāng)?shù)組弄兜。
separator(必需)药蜻，字符串或正則表達(dá)式，從該參數(shù)指定的地方對(duì)字符串進(jìn)行分割替饿。
howmany(可選)语泽，該參數(shù)可指定返回的數(shù)組的最大長(zhǎng)度。
let str = "abc,abcd,aaa";
let array = str.split(",");// 在每個(gè)逗號(hào)(,)處進(jìn)行分解视卢。
// array: [abc,abcd,aaa]
const array1 = "helloworld";
let str1 = array1.split('');
//["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]
（六）數(shù)組的截取和合并[6]
- 數(shù)組的截取 -
array.slice(start, end)方法
slice()通過(guò)索引位置踱卵，從數(shù)組中返回start下標(biāo)開(kāi)始，直到end下標(biāo)結(jié)束（不包括）的新數(shù)組据过，該方法不會(huì)修改原數(shù)組惋砂，只是返回一個(gè)新的子數(shù)組。
start(必填)绳锅，設(shè)定新數(shù)組的起始位置（下標(biāo)從0開(kāi)始算起）西饵；如果是負(fù)數(shù)，則表示從數(shù)組尾部開(kāi)始算起（-1 指最后一個(gè)元素榨呆，-2 指倒數(shù)第二個(gè)元素罗标，以此類(lèi)推）。end(可選)积蜻，設(shè)定新數(shù)組的結(jié)束位置闯割；如果不填寫(xiě)該參數(shù)，默認(rèn)到數(shù)組結(jié)尾竿拆；如果是負(fù)數(shù)宙拉，則表示從數(shù)組尾部開(kāi)始算起（-1 指最后一個(gè)元素，-2
指倒數(shù)第二個(gè)元素丙笋，以此類(lèi)推）谢澈。
// 獲取僅包含最后一個(gè)元素的子數(shù)組
let array = [1,2,3,4,5];
array.slice(-1); // [5]
// 獲取不包含最后一個(gè)元素的子數(shù)組
let array2 = [1,2,3,4,5];
array2.slice(0, -1); // [1,2,3,4]
該方法并不會(huì)修改數(shù)組煌贴，而是返回一個(gè)子數(shù)組。如果想刪除數(shù)組中的一段元素锥忿，應(yīng)該使用方法 array.splice()牛郑。
- 數(shù)組的合并 -
array.concat([item1[, item2[, . . . [,itemN]]]])方法
conact()是將多個(gè)數(shù)組（也可以是字符串，或者是數(shù)組和字符串的混合）連接為一個(gè)數(shù)組敬鬓，返回連接好的新的數(shù)組淹朋。
const array = [1,2].concat(['a', 'b'], ['name']);
// [1, 2, "a", "b", "name"]
（七）數(shù)組元素的排序[7]
-
array.sort()方法
sort()方法用于對(duì)數(shù)組的元素進(jìn)行排序，并返回原數(shù)組钉答。如果不帶參數(shù)础芍，按照字符串UniCode碼的順序進(jìn)行排序。
const array = ['a', 'd', 'c', 'b'];
array.sort(); //['a', 'b', 'c', 'd']
為sort()中傳入排序規(guī)則函數(shù)可實(shí)現(xiàn)自定義排序数尿。
排序函數(shù)規(guī)則：(1)傳兩個(gè)形參仑性；(2)當(dāng)返回值為正數(shù)時(shí)，交換傳入兩形參在數(shù)組中位置右蹦。
按照數(shù)值大小進(jìn)行排序-升序
[1, 8, 5].sort((a, b) => {
return a-b; // 從小到大排序
});
// [1, 5, 8]
按照數(shù)值大小進(jìn)行排序-降序
[1, 8, 5].sort((a, b) => {
return b-a; // 從大到小排序
});
// [8, 5, 1]
-
array.reverse()方法
reverse()方法將數(shù)組中元素的位置顛倒诊杆，第一個(gè)數(shù)組元素成為最后一個(gè)數(shù)組元素，最后一個(gè)數(shù)組元素成為第一個(gè)嫩实。在原數(shù)組上操作刽辙，然后返回原數(shù)組。
let arr = [1,2,3,4,5]
console.log(arr.reverse()) // [5,4,3,2,1]
console.log(arr) // [5,4,3,2,1]
數(shù)組的sort()和reverse()方法都對(duì)原數(shù)組進(jìn)行了修改甲献，返回值是經(jīng)過(guò)排序之后的數(shù)組宰缤。
（八）元素在數(shù)組中的位置[8]
-
indexOf()與lastIndexOf()
indexOf(searchElement[, fromIndex = 0])方法返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。lastIndexOf(searchElement[, fromIndex = 0])方法返回一個(gè)指定的字符串值最后出現(xiàn)的位置晃洒，在一個(gè)字符串中的指定位置從后向前搜索慨灭。- 這兩個(gè)方法都接受兩個(gè)參數(shù)：
searchElement：要查找的元素；fromIndex：開(kāi)始查找的索引位置球及。- 這兩個(gè)方法都返回查找的項(xiàng)在數(shù)組中的位置氧骤，或者在沒(méi)找到的情況下返回-1。
[2, 9, 7, 8, 9].indexOf(9); // 1
[2, 9, 7, 8, 9].lastIndexOf(9); // 4
-
find()與findIndex()
(1) find(callback[, thisArg])方法吃引，用于找出第一個(gè)符合條件的數(shù)組元素筹陵。它的參數(shù)是一個(gè)回調(diào)函數(shù)，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)镊尺，直到找出第一個(gè)返回值為true的成員朦佩，然后返回該成員。如果沒(méi)有符合條件的成員庐氮，則返回undefined语稠。
[1, 4, -5, 10].find((n) => n < 0)
// -5
find()方法的回調(diào)函數(shù)可以接受三個(gè)參數(shù)，依次為當(dāng)前的值、當(dāng)前的位置和原數(shù)組仙畦。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
(2) findIndex(callback[, thisArg])返回第一個(gè)符合條件的數(shù)組成員的位置输涕，如果所有成員都不符合條件，則返回-1慨畸。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
這兩個(gè)方法都可以接受第二個(gè)參數(shù)莱坎，用來(lái)綁定回調(diào)函數(shù)的this對(duì)象。
function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26
-
includes(searchElement[, fromIndex = 0])方法返回一個(gè)布爾值寸士，表示某個(gè)數(shù)組是否包含給定的值型奥。
這個(gè)方法都接受兩個(gè)參數(shù)：searchElement：要查找的元素；fromIndex：開(kāi)始查找的索引位置碉京。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
（九）數(shù)組的遍歷與迭代[9]
-
array.filter(callback, thisArg)方法使用指定的函數(shù)測(cè)試所有元素,并創(chuàng)建一個(gè)包含所有通過(guò)測(cè)試的元素的新數(shù)組。
參數(shù)說(shuō)明：
callback用來(lái)測(cè)試數(shù)組的每個(gè)元素的函數(shù)螟深，返回true表示保留該元素（通過(guò)測(cè)試）谐宙，false則不保留。thisArg可選界弧。執(zhí)行callback時(shí)的用于this的值凡蜻。
// callback定義如下，三個(gè)參數(shù)： element:當(dāng)前元素值垢箕；index：當(dāng)前元素下標(biāo)划栓； array:當(dāng)前數(shù)組
function callback(element, index, array) {
// callback函數(shù)必須返回true或者false，返回true保留該元素条获，false則不保留忠荞。
return true || false;
}
const filtered = [1, 2, 3].filter(element => element > 1);
// filtered: [2, 3];
-
array.every(callback[, thisArg])方法檢測(cè)數(shù)組中的每一個(gè)元素是否都通過(guò)了callback測(cè)試，全部通過(guò)返回true帅掘，否則返回false委煤。
// callback定義如下： element:當(dāng)前元素值；index：當(dāng)前元素下標(biāo)修档； array:當(dāng)前數(shù)組
function callback(element, index, array) {
// callback函數(shù)必須返回true或者false告知every是否通過(guò)測(cè)試
return true || false;
}
let a = [1, 2, 3, 4, 5];
let b = a.every((item) => {
return item > 0;
});
let c = a.every((item) => {
return item > 1;
});
console.log(b); // true
console.log(c); // false
-
array.some(callback[, thisArg])判斷數(shù)組中是否包含可以通過(guò)callback測(cè)試的元素碧绞，與every不同的是，這里只要某一個(gè)元素通過(guò)測(cè)試吱窝，即返回true讥邻。callback定義同上。
[2, 5, 8, 1, 4].some(item => item > 6);
// true
-
array.map(callback[, thisArg])方法返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用callback函數(shù)后的返回值組成的新數(shù)組院峡。
let a = [1, 2, 3, 4, 5];
let b = a.filter((item) => {
return item > 3;
});
console.log(b); // [4 ,5]
let bb = [];
a.map((item) => {
if (item > 3) {
bb.push(item);
}
});
console.log(bb); // [4, 5]
let bbb = a.map((item) => {
return item + 1;
});
console.log(bbb); // [2, 3, 4, 5, 6]
-
array.forEach(callbak)為數(shù)組的每個(gè)元素執(zhí)行對(duì)應(yīng)的方法兴使。
// callback定義如下： element:當(dāng)前元素值；index：當(dāng)前元素下標(biāo)撕予； array:當(dāng)前數(shù)組
let a = [1, 2, 3, 4, 5];
let b = [];
a.forEach((item) => {
b.push(item + 1);
});
console.log(b); // [2,3,4,5,6]
- 遍歷數(shù)組的方法：
entries()鲫惶、values()、keys()
這三個(gè)方法都是返回一個(gè)遍歷器對(duì)象实抡，可用for...of循環(huán)遍歷欠母，唯一區(qū)別：keys()是對(duì)鍵名的遍歷欢策、values()對(duì)鍵值的遍歷、entries()是對(duì)鍵值對(duì)的遍歷赏淌。
for(let item of ['a','b'].keys()){
consloe.log(item);
//0
//1
}
for(let item of ['a','b'].values()){
consloe.log(item);
//'a'
//'b'
}
let arr4 = [0,1];
for(let item of arr4.entries()){
console.log(item);
// [0, 0]
// [1, 1]
}
for(let [index,item] of arr4.entries()){
console.log(index+':'+item);
//0:0
//1:1
}
-
array.reduce(callback[, initialValue])方法返回針對(duì)數(shù)組每項(xiàng)調(diào)用callback函數(shù)后產(chǎn)生的累積值踩寇。
const total = [0, 1, 2, 3].reduce((sum, value) => {
return sum + value;
}, 0);
// total is 6
const flattened = [[0, 1], [2, 3], [4, 5]].reduce((a, b) => {
return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]
參數(shù)說(shuō)明：initialValue：累加器初始值， callback函數(shù)定義如下：
function callback(accumulator, currentValue, currentIndex, array) {
}
以上callback的參數(shù)中accumulator代表累加器的值六水，初始化時(shí)俺孙，如果initialValue有值，則accumulator初始化的值為initialValue掷贾，整個(gè)循環(huán)從第一個(gè)元素開(kāi)始睛榄；initialValue無(wú)值，則accumulator初始化的值為數(shù)組第一個(gè)元素的值想帅，currentValue為數(shù)組第二個(gè)元素的值场靴，整個(gè)循環(huán)從第二個(gè)元素開(kāi)始。initialValue的數(shù)據(jù)類(lèi)型可以是任意類(lèi)型港准，不需要跟原數(shù)組內(nèi)的元素值類(lèi)型一致旨剥。
const newArray = [{ name: 'aa', age: 1 }, { name: 'bb', age: 2 }, { name: 'cc', age: 3 }].reduce((arr, element) => {
if (element.age >= 2) {
arr.push(element.name);
}
return arr;
// 必須有return，因?yàn)閞eturn的返回值會(huì)被賦給新的累加器浅缸，否則累加器的值會(huì)為undefined轨帜。
}, []);
// newArray is ["bb", "cc"];
// 上面代碼的同等寫(xiě)法：
const newArray = [{ name: 'aa', age: 1 }, { name: 'bb', age: 2 }, { name: 'cc', age: 3 }].filter(element => element.age >= 2).map(item => item.name);
// newArray is ["bb", "cc"];
（十）其他方法[10]
-
Array.from()方法
Array.from()方法是用于將類(lèi)似數(shù)組的對(duì)象（即有l(wèi)ength屬性的對(duì)象）和可遍歷對(duì)象轉(zhuǎn)為真正的數(shù)組。
比如衩椒，使用·Array.from()·方法蚌父，可以輕松將·JSON·數(shù)組格式轉(zhuǎn)為數(shù)組。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
-
Array.of()方法
Array.of()方法是將一組值轉(zhuǎn)變?yōu)閿?shù)組烟具。
let arr0 = Array.of(1,2,33,5);
console.log(arr0);//[1,2,33,5]
let arr1 = Array.of('你好','hello');
console.log(arr1);//["你好", "hello"]
（十一）擴(kuò)展運(yùn)算符[11]
擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（...）梢什。它好比rest參數(shù)的逆運(yùn)算，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列朝聋。
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
該運(yùn)算符主要用于函數(shù)調(diào)用嗡午。
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
注意，擴(kuò)展運(yùn)算符如果放在括號(hào)中冀痕，JavaScript引擎就會(huì)認(rèn)為這是函數(shù)調(diào)用荔睹，就會(huì)報(bào)錯(cuò)。
(...[1,2])
// Uncaught SyntaxError: Unexpected number
console.log((...[1,2]))
// Uncaught SyntaxError: Unexpected number
console.log(...[1, 2])
// 1,2
