JavaScript陣列方法詳解

JavaScript中陣列的方法種類眾多，在ES3-ES7不同版本時期都有新方法；並且陣列的方法還有原型方法和從object繼承的方法，這裡我們只介紹陣列在每個版本中原型上的方法，本文舉例介紹了從ES3到ES7幾乎所有的陣列方法。這大概是最全的陣列方法詳解了。希望讀者能從中有所收穫。

一、各版本陣列方法一覽表

二、方法詳解

在講解陣列方法前，我們先簡單將陣列方法按上方表格內容分為下面兩大類

（1）使用後會改變原陣列
（2）使用後不會改變原陣列

第一類、使用後原陣列改變，失去原陣列，得到改變後的新陣列

1.pop()

功能：用於刪除並返回陣列的最後一個元素。
引數：無

var arr = [1,2,3];
console.log(arr.pop());     //3---刪除並返回3
console.log(arr);           //[1,2]---原陣列改變

2.push()

功能：向陣列的末尾新增一個或更多元素，並返回陣列新的長度。
引數：push(newData1, newData2, ......)

var arr = [1,2,3];
console.log(arr.push("a"));         //4---返回陣列現在的長度
console.log(arr);                   //[1,2,3,"a"]---原陣列改變
console.log(arr.push("hello","world"));  //6---一次可新增多個數組，返回新的陣列長度
console.log(arr);                   //[1,2,3,"a","hello",world]---原陣列改變

3.shift()

功能：方法用於刪除並返回陣列的第一個元素。
引數：無

var arr = [1,2,3]
console.log(arr.shift());       //1---返回被刪除的元素
console.log(arr);               //[2,3]---原陣列改變
console.log(arr.shift());       //2---返回被刪除的元素
console.log(arr);               //[3]---原陣列改變

4.unshift()

功能：向陣列的開頭新增一個或更多元素，並返回新的長度。
引數：unshift(newData1, newData2, ......)

var arr = [1,2,3];
console.log(arr.unshift("world"));  //4---返回當前的陣列長度
console.log(arr);                   //["world",1,2,3]---原陣列改變
console.log(arr.unshift("a","b","hello"));  //7---返回當前的陣列長度，可一次性新增多個元素
console.log(arr);                   //["a","b","hello","world",1,2,3]---原陣列改變

5.reverse()

功能：顛倒陣列中元素的順序，並返回更改後的陣列
引數：無

var arr = [1,2,3];
console.log(arr.reverse());     //[3,2,1]---返回顛倒後的陣列
console.log(arr);               //[3,2,1]---原陣列改變

6.sort()

功能：對陣列中的元素進行排序，預設是升序，返回新陣列
引數：無

var arr = [6,1,5,2,3,4];
console.log(arr.sort());    //[1, 2, 3, 4, 5, 6]---返回排序後的新陣列，預設升序排列
console.log(arr);           //[1, 2, 3, 4, 5, 6]---原陣列改變

注意：但是在排序前，會先呼叫陣列的toString方法，將每個元素都轉成字元之後，再進行排序，此時會按照字串的排序，逐位比較，進行排序。

var arr = [6,1024,52,256,369];
console.log(arr.sort());    //[1024, 256, 369, 52, 6]---按照第一個字元的大小排序，多位數值的排序會出錯
console.log(arr);           //[1024, 256, 369, 52, 6]---原陣列改變

解決方法：通過回撥函式實現
引數：sort(callback)
如果需要按照數值排序，需要傳參。sort(callback)，callback為回撥函式，該函式應該具有兩個引數，比較這兩個引數，然後返回一個用於說明這兩個值的相對順序的數字（a-b）。其返回值如下：
若 a 小於 b，返回一個小於 0 的值。
若 a 等於 b，則返回 0。
若 a 大於 b，則返回一個大於 0 的值。

1)從小到大排序

var arr = [6,1024,52,256,369];
console.log(arr.sort(fn));  //[6, 52, 256, 369, 1024]---排序正常升序
console.log(arr);           //[6, 52, 256, 369, 1024]---原陣列改變
function fn(a,b){
    return a-b;
}

2)從大到小排序

var arr = [6,1024,52,256,369];
console.log(arr.sort(fn));  //[1024, 369, 256, 52, 6]---排序正常降序
console.log(arr);           //[1024, 369, 256, 52, 6]---原陣列改變
function fn(a,b){
    return b-a;
}

7.splice()

功能：向陣列中新增，或從陣列刪除，或替換陣列中的元素，然後返回被刪除/替換的元素。
引數：splice(start,num,data1,data2,...); 所有引數全部可選；分為多種情況

start：整數，規定新增/刪除專案位置的索引，使用負數可從陣列結尾處規定刪除的位置
num：整數，規定要刪除元素的數量，若為0則不會刪除
data1，data2，data3.....:可選，規定需要新增的元素

（1）不傳參時：無操作

var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.splice());      //[]---不傳參，不操作，沒有沒刪除替換的元素，返回空陣列
console.log(arr);               //["Tom","Jack","Lucy","Lily","May"]---無操作，原陣列未變，返回原陣列

（2）只傳入start：表示從索引為start的資料開始刪除，直到陣列結束

var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(2));     //["Lucy", "Lily", "May"]--從索引為2開始刪除，直到結束，返回被刪除的陣列
console.log(arr);               //["Tom", "Jack"]---原陣列改變，返回改變後的陣列
var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(0));     //["Tom","Jack","Lucy","Lily","May"]--從索引為0開始刪除，直到結束
console.log(arr);               //[]---原陣列資料被全部刪除，返回空陣列

（3）傳入start和num：表示從索引為start的資料開始刪除，刪除num個

var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(1,3));   //["Jack", "Lucy", "Lily",]---從索引為2開始刪除，刪除3個元素
console.log(arr);               //["Tom", "May"]---原陣列改變，按順序返回剩下的元素

（4）傳入更多：表示從索引為start的資料開始刪除，刪除num個，並將第三個引數及後面所有引數，插入到start的位置

1）刪除的資料，等於，新增的資料，數量相同。相當於把某幾個資料替換了

var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(2,2,"a","b"));  //["Lucy", "Lily"]--從索引為2開始刪除2個，再把"a""b"插入刪除的空隙
console.log(arr);                      //["Tom", "Jack", "a", "b", "May"]---原陣列改變，相當於被替換了

2）刪除的資料，多於，新增的資料。多的空位由後面的資料向前移補上

var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(2,2,"a"));//["Lucy", "Lily"]--從索引為2開始刪除2個，再把"a"插入刪除的空隙，多的空隙，後面資料補上來。
console.log(arr);                //["Tom", "Jack", "a", "May"]---原陣列改變

3)刪除的資料，少於，新增的資料。多的資料擠進去，後面的元素都相應後退。

var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(2,1,"a","b"));  //["Lucy"]--從索引為2開始刪除2個，再把"a""b"插入刪除的空隙
console.log(arr);                  //["Tom", "Jack", "a", "b", "Lily", "May"]---原陣列改變

（5）傳入更多：表示從索引為start的資料開始刪除，刪除num個，並將第三個引數及後面所有引數，插入到start的位置

var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(2,0,"a","b"));  //[]
console.log(arr);    //["Tom", "Jack", "a", "b", "Lucy", "Lily", "May"]---原陣列改變

8.ES6新增：copyWithin()

功能：在當前陣列內部，將指定位置的成員複製到其他位置頂替掉原來位置的元素，並返回新陣列
引數：copyWithin(target,start=0,end=this.length)

target：從該索引位置開始替換元素，如果為負值，則表示從右往左
start：從該索引位置開始讀取元素（包括該索引對應的元素）。預設為0，如果為負值，則表示從右往左
end：到該索引位置前停止讀取元素（不包括該索引對應的元素）。預設等於陣列長度，使用負數可從陣列結尾處規定位置開始

Tip：陣列的長度前後不會改變

var arr=["Tom","Jack","Lucy","Lily","May"，"Alice","Ben","Rouse","Peter"]
console.log(arr.copyWithin(1,3,6));
//["Tom", "Lily", "May", "Alice", "May", "Alice", "Ben", "Rouse", "Peter"]
//從索引為1的元素開始被替換,從索引為3的元素開始讀取要替換的 索引為6的元素前面停止替換
//簡單來說就是將索引為3,4,5位置的元素複製到索引為1,2,3的位置上.後面的元素不變。

var arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(0, -2, -1));//負數表示從右到左數索引。-2相當於索引2的位置，-1相當索引為3的位置
//[4, 2, 3, 4, 5]
//表示將索引為-2的元素複製到索引為0的位置上

9.ES6新增：fill()

功能：使用給定的值，填充到陣列中，類似於替換
引數：fill(data,start,end)

data：要填充陣列的值
start：填充開始的位置，預設值是0
end：填充結束的位置，預設值是this.length(陣列長度)

var arr = ["a","b","c"];
console.log(arr.fill(7));//[7, 7, 7]---start和end都為0，預設填充所有元素
console.log(arr);//[7, 7, 7]---原陣列改變
var arr = ["a","b","c","d","e","f"];
console.log(arr.fill(7, 1, 4));//["a", 7, 7, 7, "e", "f"]---將索引1到4的元素填充為7
console.log(arr);//["a", 7, 7, 7, "e", "f"]---原陣列改變

第二類、使用後原陣列不變，返回新陣列後，仍然可以得到原陣列

1.concat()

功能：用於將兩個或多個數組連線到一起
引數：concat(data1,data2,...);

data：為陣列時，將data合併到原陣列；data為具體資料時直接新增到原陣列尾部；省略時建立原陣列的副本

var arr1 = [1,2,3];
var arr2 = arr1.concat();
console.log(arr1);           //[1,2,3]---原陣列
console.log(arr2);           //[1,2,3]---原陣列的副本;看起來和原陣列一樣，但他們是兩個東西，不相等。
console.log(arr1 === arr2);  //false---陣列也是物件的一種，所有物件都不相等，除非是物件本身等於自己
console.log(arr1.concat("hello","world"));//[1,2,3,"hello","world"]---將字元拼接到陣列後
console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}]));//[1,2,3,"a","b",[3,4],{"name":"admin"}]
var arr3 = [4,5,6];
console.log(arr1.concat(arr3));//[1, 2, 3, 4, 5, 6]---將兩個陣列拼接
console.log(arr1);           //[1,2,3]---原陣列未改變

2.join()

功能：根據指定分隔符將陣列中的所有元素放入一個字串，並返回這個字串
引數：join(str);

str：預設為","號，以傳入的字元作為分隔符

var arr = [1,2,3];
console.log(arr.join());         //1,2,3---將陣列每個元素用","連線成字串並返回
console.log(arr.join("-"));      //1-2-3---將陣列每個元素用"-"連線成字串並返回
console.log(arr);                //[1,2,3]---原陣列未改變

//當數組裡的元素也是陣列或物件時
var a= [['OBKoro1','23'],'test'];
console.log(a.join("*"));//OBKoro1,23*test---陣列內的還是用","連線（join只對一維陣列連線，多維陣列時，裡面的陣列不連線，只是轉成字串），陣列外的用"*"連線
var b= [{name:'OBKoro1',age:'23'},'test'];
console.log(b.join("*"));//[object Object]*test---陣列內是物件時。會出問題，先轉成陣列，物件內容顯示"Object",再連線。不能顯示具體值
// 物件轉字串推薦JSON.stringify(obj);

3.slice()

功能：可從已有的陣列中返回選定的元素。
引數：slice(start, end)

start：為必填，表示從第幾位索引開始。若為負數，則表示從後往前計算索引
end：為可填，表示到第幾位結束(不包含end位)，省略表示到最後一位；若為負數，則表示從後往前計算索引

var arr = ["Tom","Jack","Lucy","Lily","May"];
console.log(arr.slice(1,3));        //["Jack","Lucy"]---返回索引為1,2的元素組成的陣列
console.log(arr.slice(1));          //["Jack","Lucy","Lily","May"]---返回索引為1,2,3,4的元素組成的陣列
console.log(arr.slice(-4,-1));      //["Jack","Lucy","Lily"]
console.log(arr.slice(-2));         //["Lily","May"]
console.log(arr.slice(1,-2));       //["Jack","Lucy"]
console.log(arr);                   //["Tom","Jack","Lucy","Lily","May"]---原陣列未改變

4.toString()

功能：轉換成字串，類似於沒有引數的join()。該方法會在資料發生隱式型別轉換時被自動呼叫，如果手動呼叫，就是直接轉為字串。
引數：無

var arr = [1,2,3];
var a= [{name:'OBKoro1',age:'23'},'test'];
console.log(arr.toString());     //1,2,3---轉為字元
console.log(a.toString());      //[object Object],test--物件沒辦法直接轉
console.log(arr);                //[1,2,3]---原陣列未改變

5.valueOf()

功能：返回陣列的原始值（一般情況下其實就是陣列自身），一般由js在後臺呼叫，並不顯式的出現在程式碼中
引數：無

var arr = [1,2,3];
console.log(arr.valueOf());         //[1,2,3]---返回的是陣列本身
console.log(arr);                   //[1,2,3]---原陣列未變
//為了證明返回的是陣列自身
console.log(arr.valueOf() == arr);  //true

6.indexOf()

功能：根據指定的資料，從左向右，查詢某元素在陣列中出現的位置，如果不存在指定的元素，返回-1。該方法是查詢方法，不會對陣列產生改變。
引數：indexOf(value, start);

value：必填，要查詢的資料；
start：選填，表示開始查詢的位置，當start為負數時，從陣列的尾部向前數；如果查詢不到value的存在，則方法返回-1

var arr = ["h","e","l","l","o"];
console.log(arr.indexOf("l"));        //2---字母"l"在陣列中的索引，返回第一個索引
console.log(arr.indexOf("l",3));      //3
console.log(arr.indexOf("l",4));      //-1---從索引為4的位置開始查詢，未找到返回-1
console.log(arr.indexOf("l",-1));     //-1
console.log(arr.indexOf("l",-3));     //2
console.log(arr);                   // ["h","e","l","l","o"]---原陣列未改變

7.lastIndexOf()

功能：根據指定的資料，從右向左，查詢在陣列中出現的位置，如果不存在指定的資料，返回-1。該方法是查詢方法，不會對陣列產生改變。
引數：lastIndexOf(value, start);

value：必填，要查詢的資料；
start：選填，表示開始查詢的位置，當start為負數時，從陣列的頭部向尾部數；如果查詢不到value的存在，則方法返回-1

var arr = ["h","e","l","l","o"];
console.log(arr.lastIndexOf("l"));        //3
console.log(arr.lastIndexOf("l",3));      //3
console.log(arr.lastIndexOf("l",1));      //-1
console.log(arr.lastIndexOf("l",-3));     //2
console.log(arr.lastIndexOf("l",-4));     //-1
console.log(arr);                       // ["h","e","l","l","o"]---原陣列未改變

8.forEach()

功能：用來遍歷陣列，該方法沒有返回值。forEach接收的回撥函式會根據陣列的每一項執行，該回調函式預設有三個引數，分別為：遍歷到的陣列的資料，對應的索引，陣列自身。
引數：forEach(callback);callback預設有三個引數，分別為value，index，self。

value：遍歷到的陣列元素
index：元素對應的索引
self：陣列自身

var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.forEach(function(value,index,self){
    console.log(index + "--" + value + "--" + self);
})
// 列印結果為：---第一列為遍歷到的陣列元素，第二列為對應的索引，第三列為陣列自身
// 0--Tom--Tom,Jack,Lucy,Lily,May
// 1--Jack--Tom,Jack,Lucy,Lily,May
// 2--Lucy--Tom,Jack,Lucy,Lily,May
// 3--Lily--Tom,Jack,Lucy,Lily,May
// 4--May--Tom,Jack,Lucy,Lily,May
console.log(arr);   //["Tom","Jack","Lucy","Lily","May"]---原陣列未改變
console.log(a);     //undefined---forEach沒有返回值
//該方法為遍歷方法，不會修改原陣列

9.map()

功能：1.同forEach功能；2.map的回撥函式會將執行結果返回，最後map將所有回撥函式的返回值組成新陣列返回。
引數：map()接收一個回撥函式作為引數，這個回撥函式需要有返回值；map(callback);callback預設有三個引數，分別為value，index，self。

value：遍歷到的陣列元素
index：元素對應的索引
self：陣列自身

（1）功能1：同forEach

var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.map(function(value,index,self){
    console.log(index + "--" + value + "--" + self);
})
// 列印結果為：---第一列為遍歷到的陣列元素，第二列為對應的索引，第三列為陣列自身
// 0--Tom--Tom,Jack,Lucy,Lily,May
// 1--Jack--Tom,Jack,Lucy,Lily,May
// 2--Lucy--Tom,Jack,Lucy,Lily,May
// 3--Lily--Tom,Jack,Lucy,Lily,May
// 4--May--Tom,Jack,Lucy,Lily,May

（2）功能2：每次回撥函式的返回值被map組成新陣列返回

var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.map(function(value,index,self){
    return "hi:"+value;
})
console.log(a);     //["hi:Tom", "hi:Jack", "hi:Lucy", "hi:Lily", "hi:May"]
//可通過此方法批量修改陣列，返回新陣列。
console.log(arr);   //["Tom", "Jack", "Lucy", "Lily", "May"]---原陣列未改變

10.filter()

功能：1.同forEach功能；2.filter的回撥函式需要返回布林值，當為true時，將本次陣列的資料返回給filter，最後filter將所有回撥函式的返回值組成新陣列返回（此功能可理解為“過濾”）。
引數：filter()接收一個回撥函式作為引數，這個回撥函式需要有返回值；filter(callback);callback預設有三個引數，分別為value，index，self

value：遍歷到的陣列元素
index：元素對應的索引
self：陣列自身

（1）功能1：同forEach

var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.filter(function(value,index,self){
    console.log(index + "--" + value + "--" + self);
})
// 列印結果為：---第一列為遍歷到的陣列元素，第二列為對應的索引，第三列為陣列自身
// 0--Tom--Tom,Jack,Lucy,Lily,May
// 1--Jack--Tom,Jack,Lucy,Lily,May
// 2--Lucy--Tom,Jack,Lucy,Lily,May
// 3--Lily--Tom,Jack,Lucy,Lily,May
// 4--May--Tom,Jack,Lucy,Lily,May

（2）功能2：當回撥函式的返回值為true時，本次的陣列值返回給filter，被filter組成新陣列返回

var arr = ["Tom","Jack","Lucy","Lily","May"];
var a = arr.filter(function(value,index,self){
    return value.length > 3;//返回元素長度大於3的元素。若有符合條件的元素，返回元素
})
console.log(a);         //["Jack", "Lucy", "Lily"]
//相當於一個篩選器（過濾器），可以在陣列中查詢需要的內容並返回
console.log(arr);       //["Tom", "Jack", "Lucy", "Lily", "May"]---原陣列未改變

11.every()

功能：判斷陣列中每一項是否都滿足條件，只有所有項都滿足條件，才會返回true。
引數：every()接收一個回撥函式作為引數，這個回撥函式需要有返回值；every(callback);callback預設有三個引數，分別為value，index，self

value：遍歷到的陣列元素
index：元素對應的索引
self：陣列自身

（1）功能1：當回撥函式的返回值為true時，類似於forEach的功能，遍歷所有；如果為false，那麼停止執行，後面的資料不再遍歷，停在第一個返回false的位置。

//demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self))
})
// 列印結果為：沒有返回值，列印了第一個，預設為false，後面的就不再遍歷
// Tom--0--true
//因為回撥函式中沒有return true，預設返回undefined，等同於返回false

//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self))
    return value.length < 4;
})
// 列印結果為：
// Tom--0--true
// abc--1--true
// Jack--2--true
//因為當遍歷到Jack時，回撥函式到return返回false，此時Jack已經遍歷，但是後面資料就不再被遍歷了

//demo3:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self))
    return true;
})
// 列印結果為：
// Tom--0--true
// abc--1--true
// Jack--2--true
// Lucy--3--true
// Lily--4--true
// May--5--true
//因為每個回撥函式的返回值都是true，那麼會遍歷陣列所有資料，等同於forEach功能

（2）功能2：當每個回撥函式的返回值都為true時，every的返回值為true，只要有一個回撥函式的返回值為false，every的返回值都為false

//demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
    return value.length > 3;
})
console.log(a);           //false---只要出現一個false，返回值就為false

//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
    return value.length > 2;
})
console.log(a);           //true---遍歷陣列全部為true，才能返回true

12.some()

功能：判斷陣列中是否存在滿足條件的項，只要有一項滿足條件，就會返回true。
引數：some()接收一個回撥函式作為引數，這個回撥函式需要有返回值，some(callback);callback預設有三個引數，分別為value，index，self

value：遍歷到的陣列元素
index：元素對應的索引
self：陣列自身

（1）功能1

因為要判斷陣列中的每一項，只要有一個回撥函式返回true，some都會返回true，所以與every正好相反，當遇到一個回撥函式的返回值為true時，可以確定結果，那麼停止執行，後面都資料不再遍歷，停在第一個返回true的位置；當回撥函式的返回值為false時，需要繼續向後執行，到最後才能確定結果，所以會遍歷所有資料，實現類似於forEach的功能，遍歷所有。

//demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self))
    return value.length > 3;
})
// 列印結果為：
// Tom--0--true
// abc--1--true
// Jack--2--true

//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self))
    return true;
})
// 列印結果為：
// Tom--0--true

//demo3:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
    console.log(value + "--" + index + "--" + (arr == self))
    return false;
})
// 列印結果為：
// Tom--0--true
// abc--1--true
// Jack--2--true
// Lucy--3--true
// Lily--4--true
// May--5--true

（2）功能2

與every相反，只要有一個回撥函式的返回值都為true，some的返回值為true，所有回撥函式的返回值為false，some的返回值才為false

//demo1:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
    return value.length > 3;
})
console.log(a);             //true

//demo2:
var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
    return value.length > 4;
})
console.log(a);             //false

13.reduce()

功能：從陣列的第一項開始，逐個遍歷到最後，迭代陣列的所有項，然後構建一個最終返回的值。
引數：reduce()接收一個或兩個引數：第一個是回撥函式，表示在陣列的每一項上呼叫的函式；第二個引數（可選的）作為歸併的初始值，被回撥函式第一次執行時的第一個引數接收。
reduce(callback,initial);callback預設有四個引數，分別為prev，now，index，self
callback返回的任何值都會作為下一次執行的第一個引數。
如果initial引數被省略，那麼第一次迭代發生在陣列的第二項上，因此callback的第一個引數是陣列的第一項，第二個引數就是陣列的第二項。

prev：初始值, 或者計算結束後的返回值
now：當前元素值
index：當前元素的索引
self：陣列自身

//demo1:不省略initial引數，回撥函式沒有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
}, 2019)
// 列印結果為：
// 2019--10--0--true
// undefined--20--1--true
// undefined--30--2--true
// undefined--40--3--true
// undefined--50--4--true
// 此時回撥函式沒有return，所以從第二次開始，prev拿到的是undefined

//demo2:省略initial引數，回撥函式沒有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
})
// 列印結果為：第一次，回撥函式的第一個引數是陣列的第一項。第二個引數就是陣列的第二項
// 10--20--1--true
// undefined--30--2--true
// undefined--40--3--true
// undefined--50--4--true
// 此時回撥函式沒有return，所以從第二次開始，prev拿到的是undefined

//demo3:不省略initial引數，回撥函式有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
    return "hello";
}, 2019)
// 列印結果為：
// 2019--10--0--true
// hello--20--1--true
// hello--30--2--true
// hello--40--3--true
// hello--50--4--true
// 此時回撥函式有return，所以從第二次開始，prev拿到的是回撥函式return的值

//demo4:省略initial引數，回撥函式有返回值
var arr = [10,20,30,40,50];
arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
    return "hello";
})
// 列印結果為：第一次，回撥函式的第一個引數是陣列的第一項。第二個引數就是陣列的第二項
// 10--20--1--true
// hello--30--2--true
// hello--40--3--true
// hello--50--4--true
// 此時回撥函式有return，所以從第二次開始，prev拿到的是回撥函式return的值

//demo5：使用reduce計算陣列中所有資料的和
var arr = [10,20,30,40,50];
var sum = arr.reduce(function(prev,now,index,self){
    return prev + now;
})
console.log(sum);      //150
// 回撥函式的最後一次return的結果被返回到reduce方法的身上

//demo6：使用reduce計算陣列中所有資料的和
var arr = [10,20,30,40,50];
var sum = arr.reduce(function(prev,now,index,self){
    return prev + now;
}, 8)
console.log(sum);      //158
// 回撥函式的最後一次return的結果被返回到reduce方法的身上
// 因為reduce有第二個引數initial，在第一次執行時被計算，所以最終結果被加上8

14.reduceRight()

功能：從陣列的第一項開始，逐個遍歷到最後，迭代陣列的所有項，然後構建一個最終返回的值。
引數：reduce()接收一個或兩個引數：第一個是回撥函式，表示在陣列的每一項上呼叫的函式；第二個引數（可選的）作為歸併的初始值，被回撥函式第一次執行時的第一個引數接收。
reduce(callback,initial);callback預設有四個引數，分別為prev，now，index，self
callback返回的任何值都會作為下一次執行的第一個引數。
如果initial引數被省略，那麼第一次迭代發生在陣列的第二項上，因此callback的第一個引數是陣列的第一項，第二個引數就是陣列的第二項。

prev：初始值, 或者計算結束後的返回值
now：當前元素值
index：當前元素的索引
self：陣列自身

//demo1:不省略initial引數，回撥函式沒有返回值
var arr = [10,20,30,40,50];
arr.reduceRight(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
}, 2019)
// 列印結果為：
//2019--50--4--true
//undefined--40--3--true
//undefined--30--2--true
//undefined--20--1--true
//undefined--10--0--true
// 此時回撥函式沒有return，所以從第二次開始，prev拿到的是undefined

//demo2:省略initial引數，回撥函式沒有返回值
var arr = [10,20,30,40,50];
arr.reduceRight(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
})
// 列印結果為：第一次，回撥函式的第一個引數是陣列的第一項。第二個引數就是陣列的第二項
//50--40--3--true
//undefined--30--2--true
//undefined--20--1--true
//undefined--10--0--true
// 此時回撥函式沒有return，所以從第二次開始，prev拿到的是undefined

//demo3:不省略initial引數，回撥函式有返回值
var arr = [10,20,30,40,50];
arr.reduceRight(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
    return "hello";
}, 2019)
// 列印結果為：
//2019--50--4--true
//hello--40--3--true
//hello--30--2--true
//hello--20--1--true
//hello--10--0--true
// 此時回撥函式有return，所以從第二次開始，prev拿到的是回撥函式reduceRight的值

//demo4:省略initial引數，回撥函式有返回值
var arr = [10,20,30,40,50];
arr.reduceRight(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
    return "hello";
})
// 列印結果為：第一次，回撥函式的第一個引數是陣列的第一項。第二個引數就是陣列的第二項
//50--40--3--true
//hello--30--2--true
//hello--20--1--true
//hello--10--0--true
// 此時回撥函式有return，所以從第二次開始，prev拿到的是回撥函式reduceRight的值

//demo5：使用reduce計算陣列中所有資料的和
var arr = [10,20,30,40,50];
var sum = arr.reduceRight(function(prev,now,index,self){
    return prev + now;
})
console.log(sum);      //150
// 回撥函式的最後一次return的結果被返回到reduceRight方法的身上

//demo6：使用reduce計算陣列中所有資料的和
var arr = [10,20,30,40,50];
var sum = arr.reduceRight(function(prev,now,index,self){
    return prev + now;
}, 8)
console.log(sum);      //158
// 回撥函式的最後一次return的結果被返回到reduceRight方法的身上
// 因為reduceRight有第二個引數initial，在第一次執行時被計算，所以最終結果被加上8

15.ES6新增：from()

功能：將類陣列物件和可遍歷物件轉化為陣列
引數：from(object, mapFunction, thisValue)

object：必需，要轉換為陣列的物件
mapFunction：可選，陣列中每個元素要呼叫的函式
thisValue：可選，對映函式(mapFunction)中的 this 物件

var arr = "foo";
console.log(Array.from(arr));//["f", "o", "o"]---將類陣列物件轉換為陣列
console.log(arr);//"foo"---不改變原物件

16.ES6新增：of()

功能：將一組值轉化為陣列
引數：of(element0[, element1[, ...[, elementN]]])

elementN：任意個引數，將按順序成為返回陣列中的元素

console.log(Array.of(1));         // [1]
console.log(Array.of(1, 2, 3));   // [1, 2, 3]
console.log(Array.of(undefined)); // [undefined]

17.ES6新增：find()

功能：在陣列內部, 找到第一個符合條件的陣列成員
引數：find(callback[, thisArg])；callback回撥函式接受三個引數（element，index，self）

element：可選；當前遍歷到的元素
index：可選：當前遍歷到的索引
self：可選：陣列本身
thisArg：執行回撥時用作this 的物件

var array = [5, 12, 8, 130, 44];
var found = array.find(function(element) {
  return element > 10;
});
console.log(found);//12
console.log(array)//[5, 12, 8, 130, 44]---原陣列不便

18.ES6新增陣列findIndex()

功能：在陣列內部, 找到第一個符合條件的陣列成員 ，返回索引，若找不到返回-1
引數：arr.findIndex(callback[, thisArg])；callback回撥函式接受三個引數（element，index，self）

element：可選；當前遍歷到的元素
index：可選：當前遍歷到的索引
self：可選：陣列本身
thisArg：執行回撥時用作this 的物件

var array = [5, 12, 8, 130, 44];
function isLargeNumber(element) {
  return element > 13;
}
console.log(array.findIndex(isLargeNumber));//3
console.log(array);//[5, 12, 8, 130, 44]---陣列未改變

19.ES7新增：includes()

功能：用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回false
引數： arr.includes(valueToFind[, fromIndex])

fromIndex：從fromIndex 索引處開始查詢 valueToFind。如果為負值，則按升序從 array.length + fromIndex 的索引開始搜 （即使從末尾開始往前跳 fromIndex 的絕對值個索引，然後往後搜尋）。預設為 0。
valueToFind：需要查詢的元素值

var array = [1, 2, 3];
console.log(array1.includes(2));//true
console.log(array);//[1, 2, 3]---原陣列未改變
var pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));//true
console.log(pets.includes('at'));//false
console.log(pets);//['cat', 'dog', 'bat']---原陣列未改變 
 

            
  
           

              
              
            
            
相關推薦
			   
            
            
            
 

    

    
    
JavaScript陣列方法詳解
     
 JavaScript陣列方法詳解
JavaScript中陣列的方法種類眾多，在ES3-ES7不同版本時期都有新方法；並且陣列的方法還有原型方法和從object繼承的方法，這裡我們只介紹陣列在每個版本中原型上的方法，本文舉例介紹了從ES3到ES7幾乎所有的陣列方法。這大概是最全的陣列方法詳解了。希望讀者能從中有 

  
 

    

    
    
JS中陣列方法詳解
     
  
 
  
  
  
  JS中陣列的方法有很多，但是自己一直沒有抽時間進行整理分類，故單獨寫一篇博文，對目前我所掌握的JS中陣列相關的方法進行整理，夯實一下自己的基礎。 
  
 我將陣列相關的方法分為兩類 
 1.方法會改變原陣列 
 相應的方法有：shift、unshift、pop、push、rev 

  
 

    

    
    
Javascript 陣列語法詳解
     
  
 
  
  
  
  JavaScript 中的陣列相當於 Java 中的 Map ，陣列本身是一個物件，屬於引用資料型別 
  
 更多精彩 
  
  更多技術部落格，請移步 asing1elife’s blog 
  
 定義 
  
  既然陣列是一個物件，當進行 alert(arr) 時 
 

  
 

    

    
    
JavaScript apply 方法 詳解(轉)
     
 
							
							
							主要我是要解決一下幾個問題:

1.        apply和call的區別在哪裡
2.        什麼情況下用apply,什麼情況下用call
3.        apply的其他巧妙用法（一般在什麼情況下可以使用apply）

我首先從網上查到關於ap 

  
 

    

    
    
JavaScript中陣列的基本方法詳解
     
 說明：①在比較第一個引數與陣列中的每一項時，將使用===操作符，即要求查詢的項必須嚴格相等;
②相容性問題，支援的瀏覽器有：IE9 +，FireFox2 +，Chrome，Safari3。
ECMAScript 6為陣列增添的新方法：map()，reduce()，filter()
①map()
語法：arr. 

  
 

    

    
    
JavaScript系列--JavaScript陣列高階函式reduce()方法詳解及奇淫技巧
     
 一、前言
reduce() 方法接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值。
reduce() 可以作為一個高階函式，用於函式的 compose。
reduce()方法可以搞定的東西，for迴圈，或者forEach方法有時候也可以搞定，那為啥要用reduce()？這個問 

  
 

    

    
    
JavaScript中getBoundingClientRect()方法詳解
     
 script   otto   java   chrome   頁面   支持   urn   client   fire   getBoundingClientRect()
    這個方法返回一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。
 

  
 

    

    
    
HTML中javascript的<script>標簽使用方法詳解
     
 mime類型   jsp   source   方式   clas   處理   網頁   鏈接   屬性。   原文地址：HTML中javascript的<script>標簽使用方法詳解
只要一提到把JavaScript放到網頁中，就不得不涉及Web的核心語言——HTML。在當初開發javasc 

  
 

    

    
    
JavaScript | 創建對象的9種方法詳解
     
 arr   常見   安全   圖解   margin   cor   ***   解析   刪除   ————————————————————————————————————————————————————————— 
創建對象 
標準對象模式

"use strict";
// ************* 

  
 

    

    
    
Javascript字符串常用方法詳解
     
 cti   cas   substr   ace   spa   sea   clas   ron   earch   字符串
字符串就是一個或多個排列在一起的字符，放在單引號或雙引號之中。
‘abc‘"abc"
length屬性
js裏的字符串類似於數組，都是一個一個字符拼湊在一起組成的，因此可以用leng 

  
 

    

    
    
javascript監聽頁面重新整理和頁面關閉事件方法詳解
     
  
 
 在我們的日常生活中，時常遇到這麼一種情況，當我們在點選一個連結、關閉頁面、表單提交時等情況，會提示我們是否確認該操作等資訊。 
 這裡就給大家講講javascript的onbeforeunload()和onunload()兩個事件。 
 相同點: 
 兩者都是在對頁面的關閉或重新整理事件作個操作。  

  
 

    

    
    
javascript的offset、client、scroll使用方法詳解
     
  
  
  
  offsetTop 指元素距離上方或上層控制元件的位置，整型，單位畫素。 offsetLeft 指元素距離左方或上層控制元件的位置，整型，單位畫素。 offsetWidth 指元素控制元件自身的寬度，整型，單位畫素。 offsetHeight 指元素控制元件自身的高度，整型，單位畫素。 網 

  
 

    

    
    
Java實現陣列去除重複資料的方法詳解
     
 一.用List集合實現 
 
 int[] str = {5, 6, 6, 6, 8, 8, 7,4};
List<Integer> list = new ArrayList<Integer>();
for (int i=0; i<str.length; i++) {
  if( 

  
 

    

    
    
Java實現陣列去除重複資料的方法詳解(轉)
     
 
                

本文例項講述了Java實現陣列去除重複資料的方法。分享給大家供大家參考，具體如下：

前一段時間被面試問到：如果一個數組中有重複元素，用什麼方法可以去重？一時間會想到用一種方法，但是後來查閱資料後發現，有好多方法可以實現，現在就總結一下，比較簡單的幾種。

一.用List 

  
 

    

    
    
JS進階篇--JS陣列reduce()方法詳解及高階技巧
     
 
                去除巢狀的思路：

用遞迴、reduce()、concat()來實現。

遞迴解決多層巢狀，reduce()解決每層陣列的迭代拼接，concat()來拼接陣列即拆除一層巢狀。

let sum = [0, 1, 2, 3].reduce(function(acc, val)  

  
 

    

    
    
陣列的棧方法和佇列方法詳解
     
 
								
								            
						
                
概念：棧方法是遵循後進先出原則。介紹兩個方法實現棧方法，即push()和pop()。
push是向陣列末尾新增一項或多項，返回值是陣列的最終長度。
pop方法是隻能刪除陣列末尾最後一項，返回值是刪除的 

  
 

    

    
    
java：陣列操作工具類 java.util.Arrays包 主要方法詳解
     
  
 
 轉載自：https://www.cnblogs.com/dengyungao/p/7525067.html 
 java：陣列操作工具類 java.util.Arrays包 主要方法詳解 
 Arrays類位於Java.util包下，是一個對陣列操作的工具類，現將Arrays類中的方法做一個總結（J 

  
 

    

    
    
【演算法之陣列（一）】求子陣列最大和的解決方法詳解
     
 
                
題目：

輸入一個整形陣列，數組裡有正數也有負數。
陣列中連續的一個或多個整陣列成一個子陣列，每個子陣列都有一個和。

求所有子陣列的和的最大值。
例如輸入的陣列為1, -2, 3, 10, -4, 7, 2, -5，和最大的子陣列為3, 10, -4, 7, 2，

因此 

  
 

    

    
    
PHP迴圈二維陣列 。php中__autoload()方法詳解
     
  
 
 PHP迴圈二維陣列   
 PHP程式碼: <?php $arr1=array(100,200,300,400); $arr2=array("num"=>100,"name"=>"Liuxy","score"=>98); print_r($arr1); e 

  
 

    

    
    
Javascript中判斷一個值是否為undefined的方法詳解
     
 
                相信大家都知道當宣告一個變數，並且沒有給賦值的情況下，它的初始值是undefined。但是在javascript中，怎麼檢查一個值是否為undefined呢？簡單來說，在現代瀏覽器中，你可以安全的比較變數是否為undefined?1if (name === undefined