js中數組的方法非常的多，功能也很強大。今天來總結一下js中數組的方法：

首先創建一個數組，數組中可以包含各種類型的數據：

var arr = [2,3,5,"hello",true,"world",[5,6,7],{"name":"lily","age":18},function(){console.log(1)}];
    console.log(typeof arr); // object
    console.log(arr.length); // 9
    console.log(arr);// [2, 3, 5, "hello", true, "world", Array[3], Object, function]

一. 以下的7種方法會改變原數組：

1.unshift 在第一位添加一位或者多位數據，返回新數組的長度，會改變原數組

    var arr1 = arr.unshift(9,10);
    console.log(arr);// [9,10, 2, 3, 5, "hello", true, "world", Array[3], Object, function]
    console.log(arr1); // 11

2.shift 刪除第一位，返回刪除的數據，會改變原數組

var arr2 = arr.shift();
console.log(arr);// [3, 5, "hello", true, "world", Array[3], Object, function]
console.log(arr2); // 2

3.push 在最后一位添加一位或者多位數據，返回新數組的長度，會改變原數組

var arr3 = arr.push(9,10,11);
console.log(arr);// [2, 3, 5, "hello", true, "world", Array[3], Object, function,9,10,11]
console.log(arr3); // 12

4.pop 刪除最后一位，返回刪除的數據，會改變原數組

var arr4 = arr.pop();
console.log(arr);// [2,3, 5, "hello", true, "world", Array[3], Object]
console.log(arr4); // function(){console.log(1)}

5.splice 在索引為n的開始（包括n）的往后將m個值替換為（k1,k2,k3...kk）刪除指定位置，并替換，返回刪除的數據，會改變原數組

var arr5 = arr.splice(1,3,"a","b");
console.log(arr);// [2, "a", "b", true, "world", Array[3], Object, function]
console.log(arr5); // [3, 5, "hello"]

6.sort 排序（字符規則），返回結果，會改變原數組

(1)數值排序（升序）

var arr = [1,2,5,3,6];
var arr6 = arr.sort(function(a,b){return a-b});
console.log(arr);// [1, 2, 3, 5, 6]
console.log(arr6); // [1, 2, 3, 5, 6]

(2)字符排序

var arr = ["a","hello","world","zoom","lily","boy"];
var arr6 = arr.sort();
console.log(arr);// ["a", "boy", "hello", "lily", "world", "zoom"]
console.log(arr6); // ["a", "boy", "hello", "lily", "world", "zoom"]

7.reverse 反轉數組，返回結果,會改變原數組

var arr7 = arr.reverse();
console.log(arr);// [function, Object, Array[3], "world", true, "hello", 5, 3, 2]
console.log(arr7); // [function, Object, Array[3], "world", true, "hello", 5, 3, 2]

二. 以下的14種方法不會改變原數組:

var arr = [2,3,5,"hello",true,"world",[5,6,7],{"name":"lily","age":18},function(){console.log(1)}];

1.slice(n,m)

功能：截取指定位置[n,m)的數組，并返回

參數：n表式開始的索引位置，m表式結束的索引位置(不包括)

返回值：截取后的新數組

demo:

var arr1 = arr.slice(2,5); 
console.log(arr);// [2,3,5,"hello",true,"world",[5,6,7],{"name":"lily","age":18},function(){console.log(1)}];
console.log(arr1); // [5,"hello",true] 

2.concat(data1,data2,....)

功能：合并數組，并返回合并之后的數據

參數：所有參數可選，要合并的數據；data為數組時，將數組中的數據合并到原數組；data為具體數據時直接添加到原數組尾部；參數省略時創建原數組的副本

返回值：合并的新數組

demo:

var arr2 = arr.concat();
console.log(arr); // 原數組
console.log(arr2); // [2,3,5,"hello",true,"world",[5,6,7],{"name":"lily","age":18},function(){console.log(1)}];
console.log(arr == arr2); //  false
console.log(arr.concat(12,34)); // [2,3,5,"hello",true,"world",[5,6,7],{"name":"lily","age":18},function(){console.log(1)},12,34];
console.log(arr.concat([1,2],[[56,"he"],"and",{"gender":0,"major":"electric"}])); // [2,3,5,"hello",true,"world",[5,6,7],{"name":"lily","age":18},function(){console.log(1)},1,2,[56,"he"],"and",{"gender":0,"major":"electric"}];

3.join(str)

功能：根據指定分隔符將數組中的所有元素放入一個字符串，并返回這個字符串

參數：參數可選，默認不寫將數組直接去掉括號成為字符串返回，否則以傳入的字符作為分隔符

返回值：拼接的字符串

demo:

var str31 = arr.join();
var str32 = arr.join("*");
console.log(arr); // 原數組
console.log(str31); // 2,3,5,"hello",true,"world",[5,6,7],{"name":"lily","age":18},function(){console.log(1)}
console.log(str32); // 2*3*5*hello*true*world*5,6,7*[object Object]*function(){console.log(1)}

4.toString()

功能：轉換成字符串，類似于沒有參數的join()。該方法會在數據發生隱式類型轉換時被自動調用，如果手動調用，就是直接轉為字符串

參數：無

返回值：字符串

demo：

var str4 = arr.toString();
console.log(arr);// 原數組
console.log(str4); // 2,3,5,"hello",true,"world",[5,6,7],{"name":"lily","age":18},function(){console.log(1)}

5.valueOf()

功能：返回數組的原始值（一般情況下其實就是數組自身），一般由js在后臺調用，并不顯式的出現在代碼中

參數：無

返回值：原數組

demo：

var arr5 = arr.valueOf();
console.log(arr); // 原數組
console.log(arr5); // 原數組
console.log(arr === arr5); // true

6.indexOf(value, start)

功能：根據指定的數據，從左向右，查詢在數組中出現的位置，如果不存在指定的數據，返回-1。該方法是查詢方法，不會對數組產生改變

參數：value為要查詢的數據；start為可選，表示開始查詢的位置，從前往后查詢；當start為負數時，還是從前往后查，返回的是正數索引；如果查詢不到value的存在，則方法返回-1

返回值：查詢到的索引位置，查詢不到返回-1

demo：

var index61 = arr.indexOf("hello");
var index62 = arr.indexOf("hello",3);
var index63 = arr.indexOf("hello",4);
var index64 = arr.indexOf("hello",-1);
var index65 = arr.indexOf("hello",-3);
var index66 = arr.indexOf("hello",-9);
console.log(arr);// 原數組
console.log(index61); // 3
console.log(index62); // 3
console.log(index63);  // -1
console.log(index64); // -1
console.log(index65); // -1
console.log(index66); // 3

7.lastIndexOf(value, start)

功能：根據指定的數據，從后往前查詢，查詢在數組中出現的位置，如果不存在指定的數據，返回-1。

參數：value為要查詢的數據；start為可選，表示開始查詢的位置，從索引位置往前查詢；start可以為負數，從數組負數索引位置往前查詢，返回的是正數索引；如果查詢不到value的存在，則方法返回-1

demo：

var lastind71 = arr.lastIndexOf("hello");
var lastind72 = arr.lastIndexOf("hello",3);
var lastind73 = arr.lastIndexOf("hello",2);
var lastind74 = arr.lastIndexOf("hello",-1);
var lastind75 = arr.lastIndexOf("hello",-3);
var lastind76 = arr.lastIndexOf("hello",-9);
console.log(arr);// 原數組
console.log(lastind71); // 3
console.log(lastind72); // 3
console.log(lastind73);  // -1
console.log(lastind74); // 3
console.log(lastind75); // 3
console.log(lastind76); // -1

8.forEach(function(value,index,self){})--forEach(callback)

功能：ES5新增方法，用來遍歷數組，該方法沒有返回值。forEach接收的回調函數會根據數組的每一項執行，該回調函數默認有三個參數

參數：value為遍歷到的數組的數據,index為對應的索引,self為數組自身

返回值：無(undefined,因為回調函數沒有return)

demo：

var a8 = arr.forEach(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self));
    // 2--0--true
    // 3--1--true
    // 5--2--true
    // hello--3--true
    // true--4--true
    // world--5--true
    // 5,6,7--6--true
    // [object Object]--7--true
    // function(){console.log(1)}--8--true
});
console.log(arr);// 原數組
console.log(a8); // undefined

9.map(callback)

功能：1.同forEach功能；2.map的回調函數會將執行結果返回，最后map將所有回調函數的返回值組成新數組返回

參數：callback默認有三個參數，分別為value，index，self

返回值：新數組

demo(功能2)：

var arr9 = arr.map(function(value,index,slef){
    return "hello" + value;
}) ;
console.log(arr);// 原數組
console.log(arr9);// ["hello2", "hello3", "hello5", "hellohello", "hellotrue", "helloworld", "hello5,6,7", "hello[object Object]", "hellofunction(){console.log(1)}"]

10.filter

功能：1.同forEach功能；2.filter的回調函數需要返回布爾值，當為true時，將本次數組的數據返回給filter，最后filter將所有回調函數的返回值組成新數組返回（此功能可理解為“過濾”）。

參數：callback默認有三個參數，分別為value，index，self

返回值：過濾的符合條件的數據組成的數組

demo(功能2)：

var arr10 = arr.filter(function(value,index,self){
    return typeof value == "string"; // 注意string要小寫
});
console.log(arr);// 原數組
console.log(arr10); // ["hello","world"]

11.some(callback)

功能：判斷數組中是否存在滿足條件的項，只要有一項滿足條件，就會返回true

參數：some()接收一個回調函數作為參數，這個回調函數需要有返回值，some(callback);callback默認有三個參數，分別為value，index，self

返回值：true/false

功能1：因為要判斷數組中的每一項，只要有一個回調函數返回true，some都會返回true，所以與every正好相反，當遇到一個回調函數的返回值為true時，可以確定結果，那么停止執行，后面都數據不再遍歷，停在第一個返回true的位置；當回調函數的返回值為false時，需要繼續向后執行，到最后才能確定結果，所以會遍歷所有數據，實現類似于forEach的功能，遍歷所有

功能2：與every相反，只要有一個回調函數的返回值都為true，some的返回值為true，所有回調函數的返回值為false，some的返回值才為false

demo1：

var bool111 = arr.some(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self));
    // 2--0--true
    // 3--1--true
    // 5--2--true
    // hello--3--true
    return value.length > 3; 
});
console.log(arr);// 原數組
console.log(bol111); // true

demo2：

var bool112 = arr.some(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self));
    // 2--0--true
    return true; 
});
console.log(arr);// 原數組
console.log(bool112); // true

demo3：

var bool113 = arr.some(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self));
    // 2--0--true
    // 3--1--true
    // 5--2--true      
    // hello--3--true
    // true--4--true
    // world--5--true
    // 5,6,7--6--true
    // [object Object]--7--true
    // function(){console.log(1)}--8--true
    return false; 
});
console.log(arr);// 原數組
console.log(bool113); // false

12.every(callback)

功能：判斷數組中每一項是否都滿足條件，只有所有項都滿足條件，才會返回true

參數：every()接收一個回調函數作為參數，這個回調函數需要有返回值，every(callback);callback默認有三個參數，分別為value，index，self

功能1：當回調函數的返回值為true時，類似于forEach的功能，遍歷所有；如果為false，那么停止執行，后面的數據不再遍歷，停在第一個返回false的位置

功能2：當每個回調函數的返回值都為true時，every的返回值為true，只要有一個回調函數的返回值為false，every的返回值都為false

demo1：

var bool121 = arr.every(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self));
    // 2--0--true
});
console.log(arr);// 原數組
console.log(bool121); // false 

解釋：因為回調函數中沒有return true，默認返回undefined，等同于返回false

demo2：

var bool122 = arr.every(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self));
    // 2--0--true
    // 3--1--tr
    // 5--2--true      
    // hello--3--true
    // true--4--true
    // world--5--true
    // 5,6,7--6--true
    // [object Object]--7--true
    // function(){console.log(1)}--8--true
    return true;
});
console.log(arr);// 原數組
console.log(bool122); // true

13.reduce(callback,initial)

功能：從數組的第一項開始，逐個遍歷到最后，迭代數組的所有項，然后構建一個最終返回的值。

參數1：callback是回調函數，表示在數組的每一項上調用的函數。callback默認有四個參數，分別為prev，now，index，self。callback返回的任何值都會作為下一次執行的第一個參數prev。如果initial參數被省略，那么第一次迭代發生在數組的第二項上，因此callback的第一個參數是數組的第一項，第二個參數就是數組的第二項。

參數2：initial，可選。作為歸并的初始值，被回調函數第一次執行時的第一個參數prev接收

返回值：callback的return返回值

demo1(有initial，無return)：

var a131 = arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
}, 2019);
    // 2019--2--0--true
    // undefined--3--1--true
    // undefined--5--2--true
    // undefined--hello--3--true
    // undefined--true--4--true
    // undefined--world--5--true
    // undefined--5,6,7--6--true
    // undefined--[object Object]--7--true
    // undefined--function(){console.log(1)}--8--true
console.log(arr);// 原數組
console.log(a131); // undefined

解釋：回調函數沒有返回值，所以從第二次遞歸開始，prev值為undefined

demo2(無initial，無return)：

 var a132 = arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
});
// 2--3--1--true
// undefined--5--2--true
// undefined--hello--3--true
// undefined--true--4--true
// undefined--world--5--true
// undefined--5,6,7--6--true
// undefined--[object Object]--7--true
// undefined--function(){console.log(1)}--8--true
console.log(arr);// 原數組
console.log(a132); // undefined

解釋：沒有initial，第一次的prev值是數組的第一個值，數組的第二個值作為now值；回調函數沒有返回值，所以從第二次遞歸開始，prev值為undefined

demo3(無initial，有return)：

var a133 = arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
    return "hello";
});
// 2--3--1--true
// hello--5--2--true
// hello--hello--3--true
// hello--true--4--true
// hello--world--5--true
// hello--5,6,7--6--true
// hello--[object Object]--7--true
// hello--function(){console.log(1)}--8--true
console.log(arr);// 原數組
console.log(a133); // hello

解釋：沒有initial，第一次的prev值是數組的第一個值，數組的第二個值作為now值；回調函數有返回值，所以從第二次遞歸開始，prev值為hello

demo4(有initial，有return)：

var a134 = arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
    return "hello";
}, 2019);
    // 2019--2--0--true
    // hello--3--1--true
    // hello--5--2--true
    // hello--hello--3--true
    // hello--true--4--true
    // hello--world--5--true
    // hello--5,6,7--6--true
    // hello--[object Object]--7--true
    // hello--function(){console.log(1)}--8--true
console.log(arr);// 原數組
console.log(a134); // hello

demo5(無initial，利用reduce計算數組的和)

var arra = [2,3,4,5,6];
var sum1 = arra.reduce(function(prev,now,index,self){
    return prev + now;
});
console.log(arra);// 原數組
console.log(sum1); // 20

demo6(有initial，利用reduce計算數組的和-- sum = 數組中各數組的和 + initial)

var arra = [2,3,4,5,6];
var sum2 = arra.reduce(function(prev,now,index,self){
    return prev + now;
},5);
console.log(arra);// 原數組
console.log(sum2); // 25

14.reduceRight

功能：（與reduce類似）從數組的最后一項開始，向前逐個遍歷到第一位，迭代數組的所有項，然后構建一個最終返回的值

文中部分內容借鑒了前人的成果，也補充了自己的想法，如有不正確的內容，歡迎大家指正...