摘要：函數的因為也擁有屬性，所以其被稱為類數組對象。方法數組的拼接，，指被拼接的對象數組，為數組。如果為負，則將其視為，其中為數組的長度。而提供了數組反轉和排序來對數組進行重排序。用好原生，你的代碼將顯得干凈，有趣。

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

那些需要知道的特性：
1：數組在JS中是對象的一種，所以數組也是引用類型，所以操作時要小心，時刻記住你操作的不是一個普通類型；
2：每個數組都自帶一個length屬性，這個屬性很特別，可讀也可寫。JS函數的arguments因為也擁有length屬性，所以其被稱為類數組對象。
這里不會提到所有的API，因為真的太多了。我只提我最近常用的，還有被人們常說的增刪查改。

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

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([]);//數組深拷貝；
deepArr.push("Denzel"); 
console.log(deepArr); //打印["Emil","Tobias", "Linus","Denzel"]
console.log(stale); //打印["Emil", "Tobias", "Linus"];

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

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]

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

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，其復雜太多，所以幾乎能完成所有的cud操作，但與其不同的是，上面的方法都只能在數組的頭和尾上進行操作，splice能完成任意位置的cud操作；其arrayObj參數為必需，且必須是一個 Array 對象；start參數必需，指數組中移除元素操作的起點，從 0 開始，deleteCount參數必需，指要移除的元素的個數，上面提到的返回數組，其數組元素的個數與deleteCount相等，當deleteCount=0時，其返回一個空數組；item1, item2,. . ., itemN可選，指插入數組中代替已移除元素的元素。直接看實例吧：

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

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

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

splice方法的start參數也支持負數，其會自動類加length，直到為正。

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

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

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

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(); //這將證明上面提到的根據每個數組項的toString()后根據字典順序進行排序
console.log(num);//打印[1, 12, 19, 2, 24, 3, 5, 7]

如果你想讓上面的數據進行升序或者降序進行排序，你需要自己寫一個比較函數，即這樣：

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]    

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

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}......

短短四行代碼就完成了這兩個需求，如果我們只想要第2名到第9名的數據（即去掉一個最高分，去掉一個最低分）拿來做分析，所以根絕前面抽離出來的數組，我們再借助sort（）和filter（）來完成這個需求：

tempArr.sort(function (v1,v2) { // 降序排列
    return v2-v1;
});
var max = tempArr.shift(),min = tempArr.pop();
data=data.filter(function (item) {  //這個方法并沒有完全達到需求，這里只是演示filter的用法，你可以試著優化這個函數，來完成這個需求
    return (item.num!==max)&&(item.num!==min)
})
console.log(tempArr);  //體會一下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}打印出來，結果只剩下7個了，因為最小值出現了兩次。

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