JS數組方法大全

 

1、在使用數組的方法以前，須要先建立數組，建立數組有如下方式：

• 字面量方式（json方式）

var arr1 = []; //建立一個空數組 var arr2 = [5]; //建立一個具備單個元素的數組 var arr3 = [5,6,7]; //建立一個具備多個元素的數組 

• 構造函數方式

var arr1 = new Array(); //建立一個空數組 var arr2 = new Array(5); //建立一個長度爲5，值爲空的數組 var arr3 = new Array(5,6,7); //建立一個具備多個元素的數組 

2、數組方法歸納

方法名	對應版本	功能	原數組是否改變
concat()	ES5-	合併數組，並返回合併以後的數據	n
join()	ES5-	使用分隔符，將數組轉爲字符串並返回	n
pop()	ES5-	刪除最後一位，並返回刪除的數據	y
shift()	ES5-	刪除第一位，並返回刪除的數據	y
unshift()	ES5-	在第一位新增一或多個數據，返回長度	y
push()	ES5-	在最後一位新增一或多個數據，返回長度	y
reverse()	ES5-	反轉數組，返回結果	y
slice()	ES5-	截取指定位置的數組，並返回	n
sort()	ES5-	排序（字符規則），返回結果	y
splice()	ES5-	刪除指定位置，並替換，返回刪除的數據	y
toString()	ES5-	直接轉爲字符串，並返回	n
valueOf()	ES5-	返回數組對象的原始值	n
indexOf()	ES5	查詢並返回數據的索引	n
lastIndexOf()	ES5	反向查詢並返回數據的索引	n
forEach()	ES5	參數爲回調函數，會遍歷數組全部的項，回調函數接受三個參數，分別爲value，index，self；forEach沒有返回值	n
map()	ES5	同forEach，同時回調函數返回數據，組成新數組由map返回	n
filter()	ES5	同forEach，同時回調函數返回布爾值，爲true的數據組成新數組由filter返回	n
every()	ES5	同forEach，同時回調函數返回布爾值，所有爲true，由every返回true	n
some()	ES5	同forEach，同時回調函數返回布爾值，只要由一個爲true，由some返回true	n
reduce()	ES5	歸併，同forEach，迭代數組的全部項，並構建一個最終值，由reduce返回	n
reduceRight()	ES5	反向歸併，同forEach，迭代數組的全部項，並構建一個最終值，由reduceRight返回	n

3、方法詳解

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(arr1 === arr2); //false console.log(arr2); //[1,2,3]---原數組的副本 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"}] console.log(arr1); //[1,2,3]---原數組未改變 

2.join()

功能：根據指定分隔符將數組中的全部元素放入一個字符串，並返回這個字符串。
參數：join(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]---原數組未改變 

3.pop()

功能：方法用於刪除並返回數組的最後一個元素。
參數：無

var arr = [1,2,3]; console.log(arr.pop()); //3 console.log(arr); //[1,2]---原數組改變 

4.shift()

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

var arr = [1,2,3] console.log(arr.shift()); //1 console.log(arr); //[2,3]---原數組改變 

5.unshift()

功能：向數組的開頭添加一個或更多元素，並返回新的長度。
參數：unshift(newData1, newData2, ......)

var arr = [1,2,3]; console.log(arr.unshift("hello")); //4 console.log(arr); //["hello",1,2,3]---原數組改變 console.log(arr.unshift("a","b")); //6 console.log(arr); //["a","b","hello",1,2,3]---原數組改變 

6.push()

功能：向數組的末尾添加一個或更多元素，並返回新的長度。
參數：push(newData1, newData2, ......)

var arr = [1,2,3]; console.log(arr.push("hello")); //4 console.log(arr); //[1,2,3,"hello"]---原數組改變 console.log(arr.push("a","b")); //6 console.log(arr); //[1,2,3,"hello","a","b"]---原數組改變 

7.reverse()

功能：顛倒數組中元素的順序。
參數：無

var arr = [1,2,3]; console.log(arr.reverse()); //[3,2,1] console.log(arr); //[3,2,1]---原數組改變 

8.slice()

功能：可從已有的數組中返回選定的元素。該方法接收兩個參數slice(start,end)，strat爲必選，表示從第幾位開始；end爲可選，表示到第幾位結束(不包含end位)，省略表示到最後一位；start和end均可覺得負數，負數時表示從最後一位開始算起，如-1表示最後一位。
參數：slice(startIndex, endIndex)

var arr = ["Tom","Jack","Lucy","Lily","May"]; console.log(arr.slice(1,3)); //["Jack","Lucy"] console.log(arr.slice(1)); //["Jack","Lucy","Lily","May"] 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"]---原數組未改變 

9.sort()

功能：對數組中的元素進行排序，默認是升序。

var arr = [6,1,5,2,3]; console.log(arr.sort()); //[1, 2, 3, 5, 6] console.log(arr); //[1, 2, 3, 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 的值。

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

10.splice()

功能：向數組中添加，或從數組刪除，或替換數組中的元素，而後返回被刪除/替換的元素。
參數：splice(start,num,data1,data2,...); 全部參數所有可選。
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"] console.log(arr); //["Tom", "Jack"]---原數組改變 

3>傳入start和num：表示從索引爲start的數據開始刪除，刪除num個

var arr = ["Tom","Jack","Lucy","Lily","May"]; console.log(arr.splice(2,2)); //["Lucy", "Lily"] console.log(arr); //["Tom", "Jack", "May"]---原數組改變 

4>傳入更多：表示從索引爲start的數據開始刪除，刪除num個，並將第三個參數及後面全部參數，插入到start的位置

var arr = ["Tom","Jack","Lucy","Lily","May"]; console.log(arr.splice(2,2,"a","b")); //["Lucy", "Lily"] console.log(arr); //["Tom", "Jack", "a", "b", "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"]---原數組改變 

11.toString()

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

var arr = [1,2,3]; console.log(arr.toString()); //1,2,3 console.log(arr); //[1,2,3]---原數組未改變 

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

13.indexOf()

功能：根據指定的數據，從左向右，查詢在數組中出現的位置，若是不存在指定的數據，返回-1。該方法是查詢方法，不會對數組產生改變。
參數：indexOf(value, start);value爲要查詢的數據；start爲可選，表示開始查詢的位置，當start爲負數時，從數組的尾部向前數；若是查詢不到value的存在，則方法返回-1

var arr = ["h","e","l","l","o"]; console.log(arr.indexOf("l")); //2 console.log(arr.indexOf("l",3)); //3 console.log(arr.indexOf("l",4)); //-1 console.log(arr.indexOf("l",-1)); //-1 console.log(arr.indexOf("l",-3)); //2 

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

15.forEach()

功能：ES5新增方法，用來遍歷數組，該方法沒有返回值。forEach接收的回調函數會根據數組的每一項執行，該回調函數默認有三個參數，分別爲：遍歷到的數組的數據，對應的索引，數組自身。
參數：forEach(callback);callback默認有三個參數，分別爲value，index，self。

var arr = ["Tom","Jack","Lucy","Lily","May"]; var a = arr.forEach(function(value,index,self){ console.log(value + "--" + index + "--" + (arr === self)); }) // 打印結果爲： // Tom--0--true // Jack--1--true // Lucy--2--true // Lily--3--true // May--4--true console.log(a); //undefined---forEach沒有返回值 //該方法爲遍歷方法，不會修改原數組 

16.map()

功能：1.同forEach功能；2.map的回調函數會將執行結果返回，最後map將全部回調函數的返回值組成新數組返回。
參數：map(callback);callback默認有三個參數，分別爲value，index，self。

//功能1：同forEach var arr = ["Tom","Jack","Lucy","Lily","May"]; var a = arr.map(function(value,index,self){ console.log(value + "--" + index + "--" + (arr === self)) }) // 打印結果爲： // Tom--0--true // Jack--1--true // Lucy--2--true // Lily--3--true // May--4--true //功能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"]---原數組未改變 

17.filter()

功能：1.同forEach功能；2.filter的回調函數須要返回布爾值，當爲true時，將本次數組的數據返回給filter，最後filter將全部回調函數的返回值組成新數組返回（此功能可理解爲「過濾」）。
參數：filter(callback);callback默認有三個參數，分別爲value，index，self。

//功能1：同forEach var arr = ["Tom","Jack","Lucy","Lily","May"]; var a = arr.filter(function(value,index,self){ console.log(value + "--" + index + "--" + (arr === self)) }) // 打印結果爲： // Tom--0--true // Jack--1--true // Lucy--2--true // Lily--3--true // May--4--true //功能2：當回調函數的返回值爲true時，本次的數組值返回給filter，被filter組成新數組返回 var arr = ["Tom","Jack","Lucy","Lily","May"]; var a = arr.filter(function(value,index,self){ return value.length > 3; }) console.log(a); //["Jack", "Lucy", "Lily"] console.log(arr); //["Tom", "Jack", "Lucy", "Lily", "May"]---原數組未改變 

18.every()

功能：判斷數組中每一項是否都知足條件，只有全部項都知足條件，纔會返回true。
參數：every()接收一個回調函數做爲參數，這個回調函數須要有返回值，every(callback);callback默認有三個參數，分別爲value，index，self。

功能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)) }) // 打印結果爲： // 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：當每一個回調函數的返回值都爲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 //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 

19.some()

功能：判斷數組中是否存在知足條件的項，只要有一項知足條件，就會返回true。
參數：some()接收一個回調函數做爲參數，這個回調函數須要有返回值，some(callback);callback默認有三個參數，分別爲value，index，self。

功能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：與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 

19.reduce()

功能：從數組的第一項開始，逐個遍歷到最後，迭代數組的全部項，而後構建一個最終返回的值。

參數：reduce()接收一個或兩個參數：第一個是回調函數，表示在數組的每一項上調用的函數；第二個參數（可選的）做爲歸併的初始值，被回調函數第一次執行時的第一個參數接收。
reduce(callback,initial);callback默認有四個參數，分別爲prev，now，index，self。
callback返回的任何值都會做爲下一次執行的第一個參數。
若是initial參數被省略，那麼第一次迭代發生在數組的第二項上，所以callback的第一個參數是數組的第一項，第二個參數就是數組的第二項。

//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 

20.reduceRight()

功能：（與reduce相似）從數組的最後一項開始，向前逐個遍歷到第一位，迭代數組的全部項，而後構建一個最終返回的值。
參數：同reduce。
demo：同reduce