摘要：函數(shù)的因?yàn)橐矒碛袑傩?，所以其被稱為類數(shù)組對(duì)象。方法數(shù)組的拼接，，指被拼接的對(duì)象數(shù)組，為數(shù)組。如果為負(fù)，則將其視為，其中為數(shù)組的長度。而提供了數(shù)組反轉(zhuǎn)和排序來對(duì)數(shù)組進(jìn)行重排序。用好原生，你的代碼將顯得干凈，有趣。

最近工作做數(shù)據(jù)交互展示，常和數(shù)據(jù)打交道，而隨之而來的就是遇見后端傳來的各種各樣的數(shù)組，我需要用各式各樣的方法來變換這些數(shù)據(jù)，來最好的展示這些數(shù)據(jù)；很多東西久了沒用就容易忘，自己也是邊查邊用，這篇文章算是自己這一周學(xué)習(xí)的知識(shí)的總結(jié)。當(dāng)然你也可以打看MSDN查看更標(biāo)準(zhǔn)的敘述

那些需要知道的特性：
1：數(shù)組在JS中是對(duì)象的一種，所以數(shù)組也是引用類型，所以操作時(shí)要小心，時(shí)刻記住你操作的不是一個(gè)普通類型；
2：每個(gè)數(shù)組都自帶一個(gè)length屬性，這個(gè)屬性很特別，可讀也可寫。JS函數(shù)的arguments因?yàn)橐矒碛衛(wèi)ength屬性，所以其被稱為類數(shù)組對(duì)象。
這里不會(huì)提到所有的API，因?yàn)檎娴奶嗔恕Ｎ抑惶嵛易罱Ｓ玫?，還有被人們常說的增刪查改。

我以前聽說增刪查改（CRUD），是sql語言。但有一次參加面試，面試官問：說說你知道的JS數(shù)組增刪查改，那數(shù)組的增刪查改是那些呢？說真的，當(dāng)時(shí)我一臉懵逼，我還以為數(shù)組還能用sql語句操作
增加：push，unshift,還有通常我們常用的arr[arr.length] = newChild;
首先我們有一個(gè)數(shù)組arr= [1,2,3,4,5,6]
push被稱為棧操作，即棧頂入，棧頂出，所以當(dāng)我們采用arr.push(7)，得到的結(jié)果是arr= [1,2,3,4,5,6,7],其相對(duì)于arr[arr.length] = 7;
unshift和push相反，即棧底入，所以當(dāng)我們做和上面相似的操作，即arr.push（7）,得到的結(jié)果是arr= [7,1,2,3,4,5,6]
至于arr.push(3.5)和arr.unshift(3,5)答案是多少，你可以自己親自嘗試一下；
刪除：pop（對(duì)應(yīng)push）,arr.pop()操作后,arr是arr= [1,2,3,4,5];shift(對(duì)應(yīng)unshift)，arr.shift()操作后，arr= [2,3,4,5,6];操作length，當(dāng)我們arr.length = 4操作后，得到 arr =[1,2,3,4]；
這里提一句，使用delete arr[arr.length-1]，并不能刪除最后一個(gè)元素，而只是將最后一個(gè)元素的賦值去除，值為undefined,且其length未變.
查：很多時(shí)候我們都采用for循環(huán)遍歷加比較，來查找某個(gè)元素在數(shù)組中的索引，但其實(shí)js是支持indexOf方法的，當(dāng)我們進(jìn)行arr.indexOf(3),其會(huì)返回結(jié)果2,進(jìn)行arr.indexOf(9)，其返回的結(jié)果就是-1，和字符串的indexOf方法何其相似,所以也有相對(duì)應(yīng)的lastIndexOf()方法；
改：改在數(shù)組操作中很常用，也很直接，這個(gè)就不長述了。
這里說三個(gè)重要的方法concat,slice和splice，concat主要做數(shù)組拼接（我經(jīng)常用它做數(shù)組的深拷貝）；slice主要做數(shù)組截取，而splice幾乎能完成上述所有的CUD操作，之所以要把他們分開提，是因?yàn)檫@兩個(gè)方法操作較復(fù)雜，其cancat與slice并不是對(duì)數(shù)組本身的操作，而是會(huì)產(chǎn)生一個(gè)新的Array數(shù)組，被操作的數(shù)組并沒有改變；而splice方法，是直接對(duì)數(shù)組進(jìn)行操作，僅當(dāng)參數(shù)刪除或替換元素操作時(shí)，會(huì)返回一個(gè)新的數(shù)組，其包含的元素就是返回的元素。
concat方法：數(shù)組的拼接，array.concat([item1[, item2[, . . . [, itemN]]]]) ，array指被拼接的對(duì)象數(shù)組，item為數(shù)組。但我用的最多的就是數(shù)組的深拷貝，看實(shí)例：

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
console.log(children)  //打印["Cecilie", "Lone"，"Emil", "Tobias", "Linus"，"Robin"]
var deepArr = stale.concat([]);//數(shù)組深拷貝；
deepArr.push("Denzel"); 
console.log(deepArr); //打印["Emil","Tobias", "Linus","Denzel"]
console.log(stale); //打印["Emil", "Tobias", "Linus"];

slice方法：arrayObj.slice(start, [end])，從方法的描述可知，其可接受兩個(gè)參數(shù)，start即截取開始的位置，end截取結(jié)束的位置，參數(shù)可選，如果沒有，截取的位置是直到數(shù)組末尾，但需要注意的是，start位置的元素是被截取的，而end位置的元素是不包含的，只截取該元素前一個(gè)元素。

var arr= [1,2,3,4,5,6]
var newArr = arr.slice(0,arr.length);
console.log(newArr)  //打印 [1,2,3,4,5,6]
newArr = arr.slice(3,5);
console.log(newArr)  //打印 [4,5]

其實(shí)前面都不復(fù)雜，復(fù)雜的是參數(shù)為負(fù)的時(shí)候，規(guī)則是這樣的（來源于MSDN）：如果 start 為負(fù)，則將其視為 length + start，其中 length 為數(shù)組的長度。如果 end 為負(fù)，則將其視為 length + end，其中 length 為數(shù)組的長度。如果省略 end，則將一直提取到 arrayObj 的結(jié)尾。如果 end 出現(xiàn)在 start 之前，則不會(huì)將任何元素復(fù)制到新數(shù)組中。

var arr= [1,2,3,4,5,6]
var newArr = arr.slice(0,-1);
console.log(newArr)  //打印 [1,2,3,4,5]
newArr = arr.slice(-3,-1);
console.log(newArr)  //打印 [4,5]

splice方法：arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]]),相比slice，其復(fù)雜太多，所以幾乎能完成所有的cud操作，但與其不同的是，上面的方法都只能在數(shù)組的頭和尾上進(jìn)行操作，splice能完成任意位置的cud操作；其arrayObj參數(shù)為必需，且必須是一個(gè) Array 對(duì)象；start參數(shù)必需，指數(shù)組中移除元素操作的起點(diǎn)，從 0 開始，deleteCount參數(shù)必需，指要移除的元素的個(gè)數(shù)，上面提到的返回?cái)?shù)組，其數(shù)組元素的個(gè)數(shù)與deleteCount相等，當(dāng)deleteCount=0時(shí)，其返回一個(gè)空數(shù)組；item1, item2,. . ., itemN可選，指插入數(shù)組中代替已移除元素的元素。直接看實(shí)例吧：

let arr =[1,2,3,4,5,6]  //以下三步是獨(dú)立操作，非連續(xù)操作。偷了個(gè)小懶
arr.splice(2, 2, "11","12"); //這個(gè)操作刪除了3,4,并在其位置上添加了11,12,相當(dāng)于改，其結(jié)果[1, 2, "11", "12", 5, 6]

arr.splice(2,0, "11","12");//這個(gè)操作刪除了0個(gè)元素,添加了11,12,相當(dāng)于增，其結(jié)果[1, 2, "11", "12",3,4,5,6]；

arr.splice(2,2, );//這個(gè)操作刪除了2個(gè)元素,添加了0個(gè)元素,相當(dāng)于刪，其結(jié)果[1, 2, "11", "12",3,4,5,6],相當(dāng)于增加；  

splice方法的start參數(shù)也支持負(fù)數(shù)，其會(huì)自動(dòng)類加length，直到為正。

說道數(shù)據(jù)處理，也許你利馬會(huì)想到排序，什么冒泡，差值，希爾，快速排序算法。而JS提供了reverse()數(shù)組反轉(zhuǎn)和sort()排序來對(duì)數(shù)組進(jìn)行重排序。
數(shù)組反轉(zhuǎn)reverse():和其名字描述的一致，用于數(shù)組反轉(zhuǎn)，需要注意的是，其是對(duì)數(shù)組本省的操作，并不會(huì)產(chǎn)生新數(shù)組；很簡單，看個(gè)示例就明白了：

var color =["a","b","e","d","c","f"];
color.reverse();
console.log(color);//打印[f,c,d,e,b,a]

數(shù)組排序sort()：這里所說的排序，并不是狹義的有序排列，你可以利用這個(gè)方法把有序的數(shù)組進(jìn)行無序排列，為啥？應(yīng)為sort（）方法支持你自己寫比較函數(shù)。另外，在沒有比較函數(shù)的情況下，sort（）方法是根據(jù)每個(gè)數(shù)組項(xiàng)的toString()后根據(jù)字典順序進(jìn)行排序的；

var color =["a","b","e","d","c","f"];
color.sort();
console.log(color);//打印[a,b,c,d,e,f]   
var num =[1,3,2,12,24,5,7,19];
num.sort(); //這將證明上面提到的根據(jù)每個(gè)數(shù)組項(xiàng)的toString()后根據(jù)字典順序進(jìn)行排序
console.log(num);//打印[1, 12, 19, 2, 24, 3, 5, 7]

如果你想讓上面的數(shù)據(jù)進(jìn)行升序或者降序進(jìn)行排序，你需要自己寫一個(gè)比較函數(shù)，即這樣：

var num =[1,3,2,12,24,5,7,19];
num.sort(function(a,b){
    return a-b;
});   
console.log(num);//打印[1, 2, 3, 5, 7, 12, 19, 24]
num.sort(function ()  //讓有序變成亂序
{
    return Math.random()<0.5?1:-1;
});
console.log(num);//打印[3, 5, 2, 1, 7, 19, 12, 24]    

也許你已習(xí)慣了for循環(huán)，或者你對(duì)jquery的each方法已經(jīng)產(chǎn)生了依賴，或許你應(yīng)該接觸點(diǎn)新知識(shí)了，畢竟ES6已經(jīng)不算新了；ES7已經(jīng)開始被支持了；而你還不知道用ES5的map,some,every,filter來循環(huán)遍歷你的數(shù)組，甚至是forEach。
every():對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對(duì)每一項(xiàng)都返回true，則返回true；
some():對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)任一項(xiàng)都返回true，則返回true；
所以，縱向看，其實(shí)every是所有項(xiàng)的&&操作，而some是||操作；
filter():對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回該函數(shù)該返回true的項(xiàng)組成新的數(shù)組；
map():對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回該函數(shù)該返回true的項(xiàng)組成新的數(shù)組；
forEach():功能類似于for循環(huán)；
對(duì)于上面5個(gè)方法，都有類似的回調(diào)參數(shù)（item,index,array）,試著從一個(gè)例子來了解他們，一個(gè)簡單的例子顯得有些蒼白。假如現(xiàn)在我們有這樣一個(gè)需求，已知某個(gè)四川省某個(gè)景區(qū)今日接待旅客總?cè)藬?shù)10000人，然后從購票信息獲取到前十名的省份和人數(shù)，我們想計(jì)算這些省份每個(gè)所占比例，并把他們的人數(shù)用一個(gè)數(shù)組多帶帶保存下來，用來找最大值，最小值，我們?cè)囍挥胒or循環(huán)來解決這個(gè)問題；

var totle = 10000;
var data = [{name:"四川省",num:3000},
    {name:"重慶市",num:500},
    {name:"江西省",num:900},
    {name:"湖南省",num:600},
    {name:"陜西省",num:800},
    {name:"河北省",num:300},
    {name:"湖北省",num:400},
    {name:"北京市",num:600},
    {name:"云南省",num:400},
    {name:"湖南省",num:300}];
var tempArr = [];
data = data.map(function (item) {
    tempArr.push(item.num);
    item.percent = item.num/totle;
    return item;
})
console.log(tempArr); //[3000, 500, 900, 600, 800, 300, 400, 600, 400, 300]
console.log(data); //0:{name: "四川省", num: 3000, percent: 0.3} 1:{name: "重慶市", num: 500, percent: 0.05}......

短短四行代碼就完成了這兩個(gè)需求，如果我們只想要第2名到第9名的數(shù)據(jù)（即去掉一個(gè)最高分，去掉一個(gè)最低分）拿來做分析，所以根絕前面抽離出來的數(shù)組，我們?cè)俳柚鷖ort（）和filter（）來完成這個(gè)需求：

tempArr.sort(function (v1,v2) { // 降序排列
    return v2-v1;
});
var max = tempArr.shift(),min = tempArr.pop();
data=data.filter(function (item) {  //這個(gè)方法并沒有完全達(dá)到需求，這里只是演示filter的用法，你可以試著優(yōu)化這個(gè)函數(shù)，來完成這個(gè)需求
    return (item.num!==max)&&(item.num!==min)
})
console.log(tempArr);  //體會(huì)一下shift和pop[900, 800, 600, 600, 500, 400, 400, 300]
console.log(data);   //0:{name: "重慶市", num: 500, percent: 0.05} 1:{name: "江西省", num: 900, percent: 0.09}打印出來，結(jié)果只剩下7個(gè)了，因?yàn)樽钚≈党霈F(xiàn)了兩次。

通過上面兩個(gè)例子，也許你應(yīng)該已經(jīng)體會(huì)到了這些原生數(shù)組API的作用了，他們?cè)跀?shù)據(jù)處理中，優(yōu)勢非常大，但也不能說，以后就可以完全不依賴ofr循環(huán)了，還是很難，上面五個(gè)方法有一個(gè)通病，就是無法中止遍歷，即在循環(huán)中break，break一些遍歷查找中，還是相當(dāng)省時(shí)，這也是為啥有時(shí)我們還是需要for循環(huán)來做一些操作. 至于some,every，foreach，你可以自己動(dòng)手感受一下。
別總是沉溺于已會(huì)的那點(diǎn)知識(shí)，別總依賴框架，插件。用好原生API，你的代碼將顯得干凈，有趣。