根據(jù)個(gè)人在實(shí)際開(kāi)發(fā)過(guò)程中，對(duì)于Array對(duì)象的方法使用比較多的，以及出現(xiàn)過(guò)的問(wèn)題在這里做個(gè)簡(jiǎn)單介紹梳庆。（屬于個(gè)人筆記，許多方法已經(jīng)熟練的就只是列出來(lái)沒(méi)有詳細(xì)介紹）
一、ES5
- 不會(huì)改變?cè)瓟?shù)組的方法靠益。
1.1 contact
參數(shù)：arrayX
說(shuō)明：返回一個(gè)新的數(shù)組丧肴。
1.2 join
參數(shù)：separator(分隔符)
說(shuō)明：返回一個(gè)字符串。
1.3 slice
參數(shù)：start胧后，end(可選)
說(shuō)明：返回一個(gè)新的數(shù)組芋浮。參數(shù)可以為負(fù)數(shù)。開(kāi)發(fā)過(guò)程中經(jīng)常用slice()復(fù)制數(shù)組壳快。
let A = [1,2,3];
let B = A.slice(1)
- 會(huì)改變?cè)瓟?shù)組的方法纸巷。
2.1 pop
參數(shù)：none
說(shuō)明：刪除數(shù)組最后一個(gè)元素，數(shù)組長(zhǎng)度減一眶痰，并返回被刪除的元素瘤旨，如果原數(shù)組為空，返回undefined竖伯。
2.2 push
參數(shù)：newElemmentX
說(shuō)明：按照參數(shù)的先后順序添加到數(shù)組末尾存哲，返回新數(shù)組的長(zhǎng)度。
2.3 reverse
參數(shù)：none
說(shuō)明：顛倒數(shù)組的元素七婴。無(wú)返回值祟偷。
2.4 shift
參數(shù)：none
說(shuō)明：刪除原數(shù)組第一個(gè)元素，并返回被刪除的元素打厘。
2.5 sort
參數(shù)：sortby(可選)
說(shuō)明：調(diào)用sort()前修肠，數(shù)字每個(gè)元素會(huì)調(diào)用toString()方法。如果沒(méi)有參數(shù)户盯，將按照字符編碼的順序進(jìn)行排序嵌施。
var a=[1,2,3,'j','A',10,5,3];
a.sort() // [1, 10, 2, 3, 3, 5, "A", "j"]
如果有參數(shù)，參數(shù)必須是一個(gè)比較函數(shù)莽鸭。
var a=[1,2,3,'j','A',10,5,3];
//降序函數(shù)
var desc = function(x,y)
{
if (x > y)
return -1; //返回一個(gè)小于0 的數(shù)即可
else
return 1; //返回一個(gè)大于0 的數(shù)即可
}
//升序函數(shù)
var asc = function(x,y)
{
if (x > y)
return 1; //返回一個(gè)大于0 的數(shù)即可
else
return -1; //返回一個(gè)小于0 的數(shù)即可
}
a.sort(desc);//[10, 5, 3, "j", "A", 3, 2, 1]
a.sort(asc);//[3, 5, 10, "A", "j", 1, 2, 3]
2.6 splice
參數(shù)：index吗伤，howmany，newElemmentX(可選)
說(shuō)明：返回被刪除的元素組成的數(shù)組蒋川，如果沒(méi)有進(jìn)行刪除操作牲芋，返回一個(gè)空數(shù)組。
2.7 unshift
參數(shù)：newElemmentX
說(shuō)明：返回添加完后數(shù)組的長(zhǎng)度捺球。
二、 ES6
注：這部分是我參考阮一峰老師的[ECMAScript 6 入門(mén)]文章夕冲，自己記錄的筆記氮兵，詳細(xì)的內(nèi)容請(qǐng)移步阮一峰老師的文章。
- 擴(kuò)展運(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
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
該運(yùn)算符主要用于函數(shù)調(diào)用。
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42
替代apply()方法
//es5
function arr(x,y,z){
return x+y+z
}
var array=[1,2,3];
arr.apply(null,array);
//es6
arr(...array)
替代push()方法
var arr1=[1,2,3];
var arr2=[4,5,6];
arr1.push(...arr2)
- 擴(kuò)展運(yùn)算符的應(yīng)用
(1) 合并數(shù)組
var arr1=[1,2];
var arr2=[3,4];
var arr3=[5,6];
//es5
arr1.concat(arr2,arr3)
//es6
[...arr1,...arr2,...arr3]
(2) 與解構(gòu)賦值結(jié)合
const [a,...b]=[1,2,3,4,5];
//a=1 b=[2,3,4,5]
const [a,...b]=[]
//a=undefined b=[]
const [a,...b]=[1]
//a=1 b=[]
(3) 字符串
[...'v1ta']
// ['v',1,'t','a']
(4) 實(shí)現(xiàn)了 Iterator 接口的對(duì)象
(5) Map 和 Set 結(jié)構(gòu)，Generator 函數(shù)
- Array.form()
Array.from方法用于將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組：類似數(shù)組的對(duì)象（array-like object）和可遍歷（iterable）的對(duì)象（包括ES6新增的數(shù)據(jù)結(jié)構(gòu)Set和Map）
下面是一個(gè)類似數(shù)組的對(duì)象南片，Array.from將它轉(zhuǎn)為真正的數(shù)組掺涛。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的寫(xiě)法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
//or Array.prototype.slice.call(arrayLike)
// ES6的寫(xiě)法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
實(shí)際應(yīng)用中，常見(jiàn)的類似數(shù)組的對(duì)象是DOM操作返回的NodeList集合疼进，以及函數(shù)內(nèi)部的arguments對(duì)象薪缆。Array.from都可以將它們轉(zhuǎn)為真正的數(shù)組。
// NodeList對(duì)象
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
console.log(p);
});
// arguments對(duì)象
function foo() {
var args = Array.from(arguments);
// ...
}
上面代碼中伞广，querySelectorAll()方法返回的是一個(gè)類似數(shù)組的對(duì)象拣帽，可以將這個(gè)對(duì)象轉(zhuǎn)為真正的數(shù)組，再使用forEach方法嚼锄。
只要是部署了Iterator接口的數(shù)據(jù)結(jié)構(gòu)减拭，Array.from都能將其轉(zhuǎn)為數(shù)組。
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
上面代碼中区丑，字符串和Set結(jié)構(gòu)都具有Iterator接口拧粪，因此可以被Array.from轉(zhuǎn)為真正的數(shù)組。
值得提醒的是沧侥，擴(kuò)展運(yùn)算符（...）也可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組可霎。
// arguments對(duì)象
function foo() {
var args = [...arguments];
}
// NodeList對(duì)象
[...document.querySelectorAll('div')]
擴(kuò)展運(yùn)算符背后調(diào)用的是遍歷器接口（Symbol.iterator），如果一個(gè)對(duì)象沒(méi)有部署這個(gè)接口正什，就無(wú)法轉(zhuǎn)換啥纸。Array.from方法還支持類似數(shù)組的對(duì)象。所謂類似數(shù)組的對(duì)象婴氮，本質(zhì)特征只有一點(diǎn)斯棒，即必須有l(wèi)ength屬性。因此主经，任何有l(wèi)ength屬性的對(duì)象荣暮，都可以通過(guò)Array.from方法轉(zhuǎn)為數(shù)組，而此時(shí)擴(kuò)展運(yùn)算符就無(wú)法轉(zhuǎn)換罩驻。
Array.from({ length: 3 });
// [ undefined, undefined, undefined ]
Array.from還可以接受第二個(gè)參數(shù)穗酥，作用類似于數(shù)組的map()方法，用來(lái)對(duì)每個(gè)元素進(jìn)行處理惠遏，將處理后的值放入返回的數(shù)組砾跃。
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
下面的例子是取出一組DOM節(jié)點(diǎn)的文本內(nèi)容。
let spans = document.querySelectorAll('span.name');
// map()
let names1 = Array.prototype.map.call(spans, s => s.textContent);
// Array.from()
let names2 = Array.from(spans, s => s.textContent)
Array.from()可以將各種值轉(zhuǎn)為真正的數(shù)組节吮，并且還提供map功能抽高。這實(shí)際上意味著，只要有一個(gè)原始的數(shù)據(jù)結(jié)構(gòu)透绩，你就可以先對(duì)它的值進(jìn)行處理翘骂，然后轉(zhuǎn)成規(guī)范的數(shù)組結(jié)構(gòu)壁熄，進(jìn)而就可以使用數(shù)量眾多的數(shù)組方法。
Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']
上面代碼中碳竟，Array.from的第一個(gè)參數(shù)指定了第二個(gè)參數(shù)運(yùn)行的次數(shù)草丧。這種特性可以讓該方法的用法變得非常靈活。
- Array.of()
Array.of方法用于將一組值莹桅，轉(zhuǎn)換為數(shù)組昌执。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
- copyWithin()
數(shù)組實(shí)例的copyWithin方法，在當(dāng)前數(shù)組內(nèi)部统翩，將指定位置的成員復(fù)制到其他位置（會(huì)覆蓋原有成員）仙蚜，然后返回當(dāng)前數(shù)組。也就是說(shuō)厂汗，使用這個(gè)方法委粉，會(huì)修改當(dāng)前數(shù)組。
它接受三個(gè)參數(shù)娶桦。
target（必需）：從該位置開(kāi)始替換數(shù)據(jù)贾节。
start（可選）：從該位置開(kāi)始讀取數(shù)據(jù)，默認(rèn)為0衷畦。如果為負(fù)值栗涂，表示倒數(shù)。
end（可選）：到該位置前停止讀取數(shù)據(jù)祈争，默認(rèn)等于數(shù)組長(zhǎng)度斤程。如果為負(fù)值，表示倒數(shù)菩混。
這三個(gè)參數(shù)都應(yīng)該是數(shù)值忿墅，如果不是，會(huì)自動(dòng)轉(zhuǎn)為數(shù)值沮峡。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
上面代碼表示將從3號(hào)位直到數(shù)組結(jié)束的成員（4和5）疚脐，復(fù)制到從0號(hào)位開(kāi)始的位置，結(jié)果覆蓋了原來(lái)的1和2邢疙。
- find() 和 findIndex()
數(shù)組實(shí)例的find()方法棍弄，用于找出第一個(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
上面代碼找出數(shù)組中第一個(gè)小于0的成員聪廉。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
上面代碼中瞬痘，find方法的回調(diào)函數(shù)可以接受三個(gè)參數(shù)，依次為當(dāng)前的值板熊、當(dāng)前的位置和原數(shù)組框全。
數(shù)組實(shí)例的findIndex()方法的用法與find()方法非常類似，返回第一個(gè)符合條件的數(shù)組成員的位置干签，如果所有成員都不符合條件津辩，則返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
- fill()
fill()方法使用給定值容劳，填充一個(gè)數(shù)組喘沿。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
