JS數(shù)組方法大全

由于最近都在freecodecamp上刷代碼,運用了很多JavaScript數(shù)組的方法,因此做了一份關于JavaScript教程的整理,具體內(nèi)容如下:

一、普通方法

1、join() 將數(shù)組元素連接在一起,并以字符串形式返回

參數(shù):可選,指定元素之間的分隔符,沒有參數(shù)則默認為逗號

返回值:字符串

對原數(shù)組的影響:無

2、reverse()將數(shù)組的元素順序變成倒序返回

參數(shù):無

返回值:數(shù)組

對原數(shù)組的影響:原數(shù)組被修改為倒序排列之后的數(shù)組

3、sort()對數(shù)組元素進行排序并返回

參數(shù):可選,排序的方法函數(shù),沒有參數(shù)則默認按照字典順序排序

返回值:排序后的數(shù)組

對原數(shù)組的影響:原數(shù)組被修改為排序之后的數(shù)組

4、concat()連接若干個數(shù)組

參數(shù):若干個,可以是數(shù)組或者是元素,

返回值:連接后的新數(shù)組

對原數(shù)組的影響:無

5、slice()從數(shù)組中截下若干個元素,組成新的數(shù)組并返回

參數(shù):兩個數(shù)字,其中第二個可選,第一個參數(shù)表示開始截取的第一個元素的index值(截取時包含這個元素),如果第一個參數(shù)是負數(shù),則指截取的元素從元素結(jié)尾開始算起(如:-1表示最后一個元素);第二個參數(shù)的意義則是停止截取的元素的index值(截取時不包含這個字符),負值情況同第一個參數(shù)

返回值:截取的新數(shù)組

對原數(shù)組的影響:無

6、splice()從數(shù)組中替換、刪除或插入元素并返回新數(shù)組

參數(shù):若干個參數(shù),其中第一個參數(shù)必需,其他為可選,第一個參數(shù)為操作的第一個index值,此時無第二個參數(shù)時,將刪除第一個參數(shù)(包含第一個參數(shù))的index值之后所有的元素,含有第二個參數(shù)時,第二個參數(shù)刪除元素的個數(shù),并返回這些元素組成的新數(shù)組;當?shù)诙€參數(shù)為0時,后面的參數(shù)會作為新的元素插入原數(shù)組,并返回一個空數(shù)組;當?shù)诙€參數(shù)不為0,且含有其他參數(shù)時,則進行替換操作,并返回替換之前那些原來元素組成的新數(shù)組

返回值:刪除元素組成的新數(shù)組

對原數(shù)組的影響:會對原數(shù)組進行替換、刪除、插入等操作

7、push()向數(shù)組的尾部添加元素并返回數(shù)組長度

參數(shù):若干個,向數(shù)組尾部添加的元素

返回值:添加元素之后的數(shù)組的長度

對原數(shù)組的影響:原數(shù)組尾部被添加元素

8、pop()從數(shù)組尾部刪除一個元素

參數(shù):無

返回值:刪除的元素

對原數(shù)組的影響:原數(shù)組尾部被刪除一個元素

9、unshift()向數(shù)組的頭部添加元素并返回數(shù)組長度

參數(shù):若干個,向數(shù)組頭部添加的元素

返回值:添加元素之后的數(shù)組的長度

對原數(shù)組的影響:原數(shù)頭部被添加元素

10、shift()從數(shù)組頭部刪除一個元素

參數(shù):無

返回值:刪除的元素

對原數(shù)組的影響:原數(shù)組頭部被刪除一個元素

11、toString()將數(shù)組轉(zhuǎn)化為字符串,每個元素之間以逗號相隔

參數(shù):無

返回值:形成的字符串(二維數(shù)組中也只是連接二維數(shù)組的元素)

對原數(shù)組的影響:無

12、toLocaleString()是toString()方法的本地化版本

split() 方法用于把一個字符串分割成字符串數(shù)組。

"2:3:4:5".split(":") //將返回["2", "3", "4", "5"]

"|a|b|c".split("|") //將返回["", "a", "b", "c"]

"hello".split("") //可返回 ["h", "e", "l", "l", "o"]

"hello".split("", 3) //可返回 ["h", "e", "l"]

--------------------------------------------------------------------------------

二、迭代器方法

1、foreach()對數(shù)組每個元素調(diào)用方法

參數(shù):一個函數(shù)

返回值:無

對原數(shù)組的影響:無

2、every()接受一個返回值為布爾類型的函數(shù),數(shù)組中所有的元素,該函數(shù)均返回true,則返回true,否則返回false

參數(shù):一個返回值為布爾類型的函數(shù)

返回值:true或者false

對原數(shù)組的影響:無

3、some()接受一個返回值為布爾類型的函數(shù),數(shù)組中只要有元素,該函數(shù)返回true,則返回true,否則返回false

參數(shù):一個返回值為布爾類型的函數(shù)

返回值:true或者false

對原數(shù)組的影響:無

4、map()接受一個函數(shù)作為參數(shù),返回一個新數(shù)組,新數(shù)組的元素是原數(shù)組元素使用該函數(shù)的結(jié)果

參數(shù):一個函數(shù)

返回值:每個元素使用函數(shù)的結(jié)果值組成的數(shù)組

對原數(shù)組的影響:無

5、filter()接收一個返回值為布爾值的函數(shù)作為參數(shù),對所有元素應該該函數(shù),并返回返回值為true的元素組成的新數(shù)組

參數(shù):一個函數(shù)

返回值:每個元素使用函數(shù)為true的元素組成的數(shù)組

對原數(shù)組的影響:無

--------------------------------------------------------------------------------

三、歸并方法

1、reduce()接受一個函數(shù)作為參數(shù),返回一個值。從一個累加值開始, 不斷對累加值和數(shù)組中的后續(xù)元素調(diào)用該函數(shù)。

參數(shù):一個函數(shù)

返回值:最后的累加值

對原數(shù)組的影響:無

2、reduceRight()方法

說明:和reduce一樣,只是執(zhí)行順序是從右到左

如果需要判斷一個對象是不是數(shù)組對象,在ECMAScript 5之前,我們可以通過 instanceof Array去判斷,但是instanceof 操作符的問題在于,它假定只有一個全局執(zhí)行環(huán)境。如果網(wǎng)頁中包含多個框架,那實際上就存在兩個以上不同的全局執(zhí)行環(huán)境,從而存在兩個以上不同版本的 Array 構(gòu)造函數(shù)。如果你從一個框架向另一個框架傳入一個數(shù)組,那么傳入的數(shù)組與在第二個框架中原生創(chuàng)建的數(shù)組分別具有各自不同的構(gòu)造函數(shù)。

ECMAScript 5 新增了 Array.isArray()方法。這個方法的目的是最終確定某個值到底是不是數(shù)組,而不管它是在哪個全局執(zhí)行環(huán)境中創(chuàng)建的。

數(shù)組方法

下面開始介紹數(shù)組的方法,數(shù)組的方法有數(shù)組原型方法,也有從object對象繼承來的方法,這里我們只介紹數(shù)組的原型方法,數(shù)組原型方法主要有以下這些:

join()
push()和pop()
shift() 和 unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf()和 lastIndexOf() (ES5新增)
forEach() (ES5新增)
map() (ES5新增)
filter() (ES5新增)
every() (ES5新增)
some() (ES5新增)
reduce()和 reduceRight() (ES5新增)
針對ES5新增的方法瀏覽器支持情況:
Opera 11+
Firefox 3.6+
Safari 5+
Chrome 8+
Internet Explorer 9+
對于支持的瀏覽器版本,可以通過Array原型擴展來實現(xiàn)。下面詳細介紹一下各個方法的基本功能。

1、join()

join(separator): 將數(shù)組的元素組起一個字符串,以separator為分隔符,省略的話則用默認用逗號為分隔符,該方法只接收一個參數(shù):即分隔符。

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](原數(shù)組不變)

通過join()方法可以實現(xiàn)重復字符串,只需傳入字符串以及重復的次數(shù),就能返回重復后的字符串,函數(shù)如下:

function repeatString(str, n) {

? ? ?return new Array(n + 1).join(str);

}

console.log(repeatString("abc", 3)); // abcabcabc

console.log(repeatString("Hi", 5)); // HiHiHiHiHi

2、push()和pop()

push(): 可以接收任意數(shù)量的參數(shù),把它們逐個添加到數(shù)組末尾,并返回修改后數(shù)組的長度。

pop():數(shù)組末尾移除最后一項,減少數(shù)組的 length 值,然后返回移除的項。

vararr = ["Lily","lucy","Tom"];

varcount = arr.push("Jack","Sean");

console.log(count);// 5

console.log(arr);// ["Lily", "lucy", "Tom", "Jack", "Sean"]

varitem = arr.pop();

console.log(item);// Sean

console.log(arr);// ["Lily", "lucy", "Tom", "Jack"]

3、shift() 和 unshift()

shift():刪除原數(shù)組第一項,并返回刪除元素的值;如果數(shù)組為空則返回undefined 。

unshift:將參數(shù)添加到原數(shù)組開頭,并返回數(shù)組的長度 。

這組方法和上面的push()和pop()方法正好對應,一個是操作數(shù)組的開頭,一個是操作數(shù)組的結(jié)尾。

vararr = ["Lily","lucy","Tom"];

varcount = arr.unshift("Jack","Sean");

console.log(count);// 5

console.log(arr);//["Jack", "Sean", "Lily", "lucy", "Tom"]

varitem = arr.shift();

console.log(item);// Jack

console.log(arr);// ["Sean", "Lily", "lucy", "Tom"]

4、sort()

sort():按升序排列數(shù)組項——即最小的值位于最前面,最大的值排在最后面。

在排序時,sort()方法會調(diào)用每個數(shù)組項的 toString()轉(zhuǎn)型方法,然后比較得到的字符串,以確定如何排序。即使數(shù)組中的每一項都是數(shù)值, sort()方法比較的也是字符串,因此會出現(xiàn)以下的這種情況:

vararr1 = ["a","d","c","b"];

console.log(arr1.sort());// ["a", "b", "c", "d"]

arr2 = [13, 24, 51, 3];

console.log(arr2.sort());// [13, 24, 3, 51]

console.log(arr2);// [13, 24, 3, 51](元數(shù)組被改變)

為了解決上述問題,sort()方法可以接收一個比較函數(shù)作為參數(shù),以便我們指定哪個值位于哪個值的前面。比較函數(shù)接收兩個參數(shù),如果第一個參數(shù)應該位于第二個之前則返回一個負數(shù),如果兩個參數(shù)相等則返回 0,如果第一個參數(shù)應該位于第二個之后則返回一個正數(shù)。以下就是一個簡單的比較函數(shù):

functioncompare(value1, value2) {

if(value1 < value2) {

return-1;

}elseif(value1 > value2) {

return1;

}else{

return0;

}

}

arr2 = [13, 24, 51, 3];

console.log(arr2.sort(compare));// [3, 13, 24, 51]

如果需要通過比較函數(shù)產(chǎn)生降序排序的結(jié)果,只要交換比較函數(shù)返回的值即可:

functioncompare(value1, value2) {

if(value1 < value2) {

return1;

}elseif(value1 > value2) {

return-1;

}else{

return0;

}

}

arr2 = [13, 24, 51, 3];

console.log(arr2.sort(compare));// [51, 24, 13, 3]

5、reverse()

reverse():反轉(zhuǎn)數(shù)組項的順序。

vararr = [13, 24, 51, 3];

console.log(arr.reverse());//[3, 51, 24, 13]

console.log(arr);//[3, 51, 24, 13](原數(shù)組改變)

6、concat()

concat() :將參數(shù)添加到原數(shù)組中。這個方法會先創(chuàng)建當前數(shù)組一個副本,然后將接收到的參數(shù)添加到這個副本的末尾,最后返回新構(gòu)建的數(shù)組。在沒有給 concat()方法傳遞參數(shù)的情況下,它只是復制當前數(shù)組并返回副本。

vararr = [1,3,5,7];

vararrCopy = arr.concat(9,[11,13]);

console.log(arrCopy);//[1, 3, 5, 7, 9, 11, 13]

console.log(arr);// [1, 3, 5, 7](原數(shù)組未被修改)

從上面測試結(jié)果可以發(fā)現(xiàn):傳入的不是數(shù)組,則直接把參數(shù)添加到數(shù)組后面,如果傳入的是數(shù)組,則將數(shù)組中的各個項添加到數(shù)組中。但是如果傳入的是一個二維數(shù)組呢?

vararrCopy2 = arr.concat([9,[11,13]]);

console.log(arrCopy2);//[1, 3, 5, 7, 9, Array[2]]

console.log(arrCopy2[5]);//[11, 13]

上述代碼中,arrCopy2數(shù)組的第五項是一個包含兩項的數(shù)組,也就是說concat方法只能將傳入數(shù)組中的每一項添加到數(shù)組中,如果傳入數(shù)組中有些項是數(shù)組,那么也會把這一數(shù)組項當作一項添加到arrCopy2中。

7、slice()

slice():返回從原數(shù)組中指定開始下標到結(jié)束下標之間的項組成的新數(shù)組。slice()方法可以接受一或兩個參數(shù),即要返回項的起始和結(jié)束位置。在只有一個參數(shù)的情況下, slice()方法返回從該參數(shù)指定位置開始到當前數(shù)組末尾的所有項。如果有兩個參數(shù),該方法返回起始和結(jié)束位置之間的項——但不包括結(jié)束位置的項。

vararr = [1,3,5,7,9,11];

vararrCopy = arr.slice(1);

vararrCopy2 = arr.slice(1,4);

vararrCopy3 = arr.slice(1,-2);

vararrCopy4 = arr.slice(-4,-1);

console.log(arr);//[1, 3, 5, 7, 9, 11](原數(shù)組沒變)

console.log(arrCopy);//[3, 5, 7, 9, 11]

console.log(arrCopy2);//[3, 5, 7]

console.log(arrCopy3);//[3, 5, 7]

console.log(arrCopy4);//[5, 7, 9]

arrCopy只設置了一個參數(shù),也就是起始下標為1,所以返回的數(shù)組為下標1(包括下標1)開始到數(shù)組最后。

arrCopy2設置了兩個參數(shù),返回起始下標(包括1)開始到終止下標(不包括4)的子數(shù)組。

arrCopy3設置了兩個參數(shù),終止下標為負數(shù),當出現(xiàn)負數(shù)時,將負數(shù)加上數(shù)組長度的值(6)來替換該位置的數(shù),因此就是從1開始到4(不包括)的子數(shù)組。

arrCopy4中兩個參數(shù)都是負數(shù),所以都加上數(shù)組長度6轉(zhuǎn)換成正數(shù),因此相當于slice(2,5)。

8、splice()

splice():很強大的數(shù)組方法,它有很多種用法,可以實現(xiàn)刪除、插入和替換。

刪除:可以刪除任意數(shù)量的項,只需指定 2 個參數(shù):要刪除的第一項的位置和要刪除的項數(shù)。例如, splice(0,2)會刪除數(shù)組中的前兩項。

插入:可以向指定位置插入任意數(shù)量的項,只需提供 3 個參數(shù):起始位置、 0(要刪除的項數(shù))和要插入的項。例如,splice(2,0,4,6)會從當前數(shù)組的位置 2 開始插入4和6。

替換:可以向指定位置插入任意數(shù)量的項,且同時刪除任意數(shù)量的項,只需指定 3 個參數(shù):起始位置、要刪除的項數(shù)和要插入的任意數(shù)量的項。插入的項數(shù)不必與刪除的項數(shù)相等。例如,splice (2,1,4,6)會刪除當前數(shù)組位置 2 的項,然后再從位置 2 開始插入4和6。

splice()方法始終都會返回一個數(shù)組,該數(shù)組中包含從原始數(shù)組中刪除的項,如果沒有刪除任何項,則返回一個空數(shù)組。

vararr = [1,3,5,7,9,11];

vararrRemoved = arr.splice(0,2);

console.log(arr);//[5, 7, 9, 11]

console.log(arrRemoved);//[1, 3]

vararrRemoved2 = arr.splice(2,0,4,6);

console.log(arr);// [5, 7, 4, 6, 9, 11]

console.log(arrRemoved2);// []

vararrRemoved3 = arr.splice(1,1,2,4);

console.log(arr);// [5, 2, 4, 4, 6, 9, 11]

console.log(arrRemoved3);//[7]

9、indexOf()和 lastIndexOf()

indexOf():接收兩個參數(shù):要查找的項和(可選的)表示查找起點位置的索引。其中, 從數(shù)組的開頭(位置 0)開始向后查找。

lastIndexOf:接收兩個參數(shù):要查找的項和(可選的)表示查找起點位置的索引。其中, 從數(shù)組的末尾開始向前查找。

這兩個方法都返回要查找的項在數(shù)組中的位置,或者在沒找到的情況下返回?1。在比較第一個參數(shù)與數(shù)組中的每一項時,會使用全等操作符。

vararr = [1,3,5,7,7,5,3,1];

console.log(arr.indexOf(5));//2

console.log(arr.lastIndexOf(5));//5

console.log(arr.indexOf(5,2));//2

console.log(arr.lastIndexOf(5,4));//2

console.log(arr.indexOf("5"));//-1

10、forEach()

forEach():對數(shù)組進行遍歷循環(huán),對數(shù)組中的每一項運行給定函數(shù)。這個方法沒有返回值。參數(shù)都是function類型,默認有傳參,參數(shù)分別為:遍歷的數(shù)組內(nèi)容;第對應的數(shù)組索引,數(shù)組本身。

vararr = [1, 2, 3, 4, 5];

arr.forEach(function(x, index, a){

console.log(x +'|'+ index +'|'+ (a === arr));

});

// 輸出為:

// 1|0|true

// 2|1|true

// 3|2|true

// 4|3|true

// 5|4|true

11、map()

map():指“映射”,對數(shù)組中的每一項運行給定函數(shù),返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。

下面代碼利用map方法實現(xiàn)數(shù)組中每個數(shù)求平方。

vararr = [1, 2, 3, 4, 5];

vararr2 = arr.map(function(item){

returnitem*item;

});

console.log(arr2);//[1, 4, 9, 16, 25]

12、filter()

filter():“過濾”功能,數(shù)組中的每一項運行給定函數(shù),返回滿足過濾條件組成的數(shù)組。

vararr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

vararr2 = arr.filter(function(x, index) {

returnindex % 3 === 0 || x >= 8;

});

console.log(arr2);//[1, 4, 7, 8, 9, 10]

13、every()

every():判斷數(shù)組中每一項都是否滿足條件,只有所有項都滿足條件,才會返回true。

vararr = [1, 2, 3, 4, 5];

vararr2 = arr.every(function(x) {

returnx < 10;

});

console.log(arr2);//true

vararr3 = arr.every(function(x) {

returnx < 3;

});

console.log(arr3);// false

14、some()

some():判斷數(shù)組中是否存在滿足條件的項,只要有一項滿足條件,就會返回true。

vararr = [1, 2, 3, 4, 5];

vararr2 = arr.some(function(x) {

returnx < 3;

});

console.log(arr2);//true

vararr3 = arr.some(function(x) {

returnx < 1;

});

console.log(arr3);// false

15、reduce()和 reduceRight()

這兩個方法都會實現(xiàn)迭代數(shù)組的所有項,然后構(gòu)建一個最終返回的值。reduce()方法從數(shù)組的第一項開始,逐個遍歷到最后。而 reduceRight()則從數(shù)組的最后一項開始,向前遍歷到第一項。

這兩個方法都接收兩個參數(shù):一個在每一項上調(diào)用的函數(shù)和(可選的)作為歸并基礎的初始值。

傳給 reduce()和 reduceRight()的函數(shù)接收 4 個參數(shù):前一個值、當前值、項的索引和數(shù)組對象。這個函數(shù)返回的任何值都會作為第一個參數(shù)自動傳給下一項。第一次迭代發(fā)生在數(shù)組的第二項上,因此第一個參數(shù)是數(shù)組的第一項,第二個參數(shù)就是數(shù)組的第二項。

下面代碼用reduce()實現(xiàn)數(shù)組求和,數(shù)組一開始加了一個初始值10。

varvalues = [1,2,3,4,5];

varsum = values.reduceRight(function(prev, cur, index, array){

returnprev + cur;

},10);

console.log(sum);//25

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 1、Array.concat(value, ...) *描述:拼接數(shù)組參數(shù):接受任意個;返回值:新數(shù)組,包含arr...
    linchwei閱讀 940評論 0 6
  • 數(shù)組是我們在js中常常要用到的,但是你真的熟悉數(shù)組的方法嗎?今天我就總結(jié)一下Array對象具有哪些方法。 聲明數(shù)組...
    hk_sky閱讀 1,931評論 0 2
  • js簡介 Js是一種基于事件和對象驅(qū)動的解釋性、松散性的語言。 一切皆對象 javascript 布蘭登艾奇 ...
    塔庫納瑪哈哈閱讀 1,365評論 0 2
  • Javascript有很多數(shù)組的方法,有的人有W3C的API,還可以去MDN上去找,但是我覺得API上說的不全,M...
    頑皮的雪狐七七閱讀 4,501評論 0 6
  • 想起我走以后讓她一個人待在家里,自己心里就不舒服!年邁之年,孤獨最難熬。 夕陽如平常一樣,從窗戶外的檐頂射進來...
    愛哭的流氓閱讀 218評論 0 0

友情鏈接更多精彩內(nèi)容