JS數(shù)組方法總結(jié)(一)

JavaScript中創(chuàng)建數(shù)組有兩種方式:
(一)使用 Array 構(gòu)造函數(shù):
var arr1 = new Array(); //創(chuàng)建一個(gè)空數(shù)組
var arr2 = new Array(20); // 創(chuàng)建一個(gè)包含20項(xiàng)的數(shù)組
var arr3 = new Array("lily","lucy","Tom"); // 創(chuàng)建一個(gè)包含3個(gè)字符串的數(shù)組

(二)使用數(shù)組字面量表示法:
var arr4 = []; //創(chuàng)建一個(gè)空數(shù)組
var arr5 = [20]; // 創(chuàng)建一個(gè)包含1項(xiàng)的數(shù)組
var arr6 = ["lily","lucy","Tom"]; // 創(chuàng)建一個(gè)包含3個(gè)字符串的數(shù)組

1.push()
push() 向數(shù)組末尾添加一個(gè)或者多個(gè)元素略号,返回新數(shù)組的長度垛膝。 ===》改變?cè)瓟?shù)組

var arr=[1,2];
arr.push(3,5);//4
console.log(arr) //[1,2,3,5]

2.pop()
pop() 刪除數(shù)組最后一項(xiàng)元素,返回刪除的元素梦裂。========》改變?cè)瓟?shù)組

var arr = [1,2,5];
arr.pop();  //5
console.log(arr) //[1,2]

3.unshift()
unshift()向數(shù)組頭部添加一個(gè)或者多個(gè)元素,返回新數(shù)組的長度瓶颠。===》改變?cè)瓟?shù)組

var arr = [1,2,5];
arr.unshift(4,3)//5:返回的值是新數(shù)組的長度
console.log(arr); //[4,3,1,2,5]

4.shift()
shift()刪除數(shù)組第一項(xiàng)元素程腹,返回刪除的元素 ===》改變?cè)瓟?shù)組

var arr = [2,3,5];
arr.shift(); //2
console.log(arr); //[3,5]

5.sort()
sort()對(duì)數(shù)組進(jìn)行排序嚼吞,====》改變?cè)瓟?shù)組

var arr=[1,2,12,3];
arr.sort();//[1,12,2,3]
console.log(arr) //[1,12,2,3]

6.reverse()
reverse()翻轉(zhuǎn)數(shù)組 ===》改變?cè)瓟?shù)組

var arr=[1,2,12,3];
arr.reverse();//[3,12,2,1]
console.log(arr) //[3,12,2,1]

7.splice()
splice() 很強(qiáng)大的數(shù)組方法锰瘸,它有很多種用法刽严,可以實(shí)現(xiàn)刪除、插入和替換避凝。===》改變?cè)瓟?shù)組

刪除:可以刪除任意數(shù)量的項(xiàng)舞萄,只需指定 2 個(gè)參數(shù):要?jiǎng)h除的第一項(xiàng)的位置和要?jiǎng)h除的項(xiàng)數(shù)眨补。例如, splice(0,2)會(huì)刪除數(shù)組中的前兩項(xiàng)倒脓。

插入:可以向指定位置插入任意數(shù)量的項(xiàng)撑螺,只需提供 3 個(gè)參數(shù):起始位置、 0(要?jiǎng)h除的項(xiàng)數(shù))和要插入的項(xiàng)崎弃。例如甘晤,splice(2,0,4,6)會(huì)從當(dāng)前數(shù)組的位置 2 開始插入4和6。

替換:可以向指定位置插入任意數(shù)量的項(xiàng)吊履,且同時(shí)刪除任意數(shù)量的項(xiàng)安皱,只需指定 3 個(gè)參數(shù):起始位置调鬓、要?jiǎng)h除的項(xiàng)數(shù)和要插入的任意數(shù)量的項(xiàng)艇炎。插入的項(xiàng)數(shù)不必與刪除的項(xiàng)數(shù)相等。例如腾窝,splice (2,1,4,6)會(huì)刪除當(dāng)前數(shù)組位置 2 的項(xiàng)缀踪,然后再從位置 2 開始插入4和6。

注:splice()方法始終都會(huì)返回一個(gè)數(shù)組虹脯,該數(shù)組中包含從原始數(shù)組中刪除的項(xiàng)驴娃,如果沒有刪除任何項(xiàng),則返回一個(gè)空數(shù)組循集。

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5,7,9,11]
console.log(arrRemoved); //[1,3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr);//[5,7,4,6,9,11]
console.log(arrRemoved2);//[]  從原始數(shù)組中刪除0項(xiàng)唇敞,所以返回[]
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); //[5,2,4,4,6,9,11]
console.log(arrRemoved3);//[7]

8.concat()
concat()將參數(shù)添加到原數(shù)組中,這個(gè)方法會(huì)先創(chuàng)建當(dāng)前數(shù)組的一個(gè)副本咒彤,然后將接收到的參數(shù)添加到這個(gè)副本的末尾疆柔,最后返回新構(gòu)建的數(shù)組。在沒有給concat()方法傳遞參數(shù)的情況下镶柱,它只是復(fù)制當(dāng)前數(shù)組并返回副本旷档。===》不改變?cè)瓟?shù)組

var arr=[1,2,3,5];
var arrCopy = arr.concat(8,[11,2]);
console.log(arrCopy);//[1,2,3,5,8,11,2]
console.log(arr) //[1,2,3,5]

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

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1,2, 3, 5, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]

上述代碼中厂庇,arrCopy2數(shù)組的第五項(xiàng)是一個(gè)包含兩項(xiàng)的數(shù)組,也就是說concat方法只能將傳入數(shù)組中的每一項(xiàng)添加到數(shù)組中输吏,如果傳入數(shù)組中有些項(xiàng)是數(shù)組权旷,那么也會(huì)把這一數(shù)組項(xiàng)當(dāng)作一項(xiàng)添加到arrCopy2中。

9.slice()
slice()返回從原數(shù)組中指定開始下標(biāo)到結(jié)束下標(biāo)之間的項(xiàng)組成的新數(shù)組评也。slice()方法可以接受一或兩個(gè)參數(shù)炼杖,即要返回項(xiàng)的起始和結(jié)束位置灭返。在只有一個(gè)參數(shù)的情況下,slice()方法返回從該參數(shù)指定位置開始到當(dāng)前數(shù)組末尾的所有項(xiàng)坤邪。如果有兩個(gè)參數(shù)熙含,該方法返回起始和結(jié)束位置之間的項(xiàng)——但不包括結(jié)束位置的項(xiàng)

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arrCopy); //[3,5,7,9,11]
console.log(arr); //[1,3,5,7,9,11]  原數(shù)組沒變
console.log(arrCopy2); //[3,5,7]
console.log(arrCopy3); //[3,5,7]
console.log(arrCopy4); //[5,7,9]

arrCopy只設(shè)置了一個(gè)參數(shù)艇纺,也就是起始下標(biāo)為1怎静,所以返回的數(shù)組為下標(biāo)1(包括下標(biāo)1)開始到數(shù)組最后。
arrCopy2設(shè)置了兩個(gè)參數(shù)黔衡,返回起始下標(biāo)(包括1)開始到終止下標(biāo)(不包括4)的子數(shù)組蚓聘。
arrCopy3設(shè)置了兩個(gè)參數(shù),終止下標(biāo)為負(fù)數(shù)盟劫,當(dāng)出現(xiàn)負(fù)數(shù)時(shí)夜牡,將負(fù)數(shù)加上數(shù)組長度的值(6)來替換該位置的數(shù),因此就是從1開始到4(不包括)的子數(shù)組侣签。
arrCopy4中兩個(gè)參數(shù)都是負(fù)數(shù)塘装,所以都加上數(shù)組長度6轉(zhuǎn)換成正數(shù),因此相當(dāng)于slice(2,5)影所。
10.indexOf()和 lastIndexOf()
indexOf():接收兩個(gè)參數(shù):要查找的項(xiàng)和(可選的)表示查找起點(diǎn)位置的索引蹦肴。其中, 從數(shù)組的開頭(位置 0)開始向后查找猴娩。
lastIndexOf:接收兩個(gè)參數(shù):要查找的項(xiàng)和(可選的)表示查找起點(diǎn)位置的索引阴幌。其中, 從數(shù)組的末尾開始向前查找卷中。

這兩個(gè)方法都返回要查找的項(xiàng)在數(shù)組中的位置矛双,或者在沒找到的情況下返回-1。在比較第一個(gè)參數(shù)與數(shù)組中的每一項(xiàng)時(shí)仓坞,會(huì)使用全等操作符背零。

var arr = [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

11.forEach()
forEach():對(duì)數(shù)組進(jìn)行遍歷循環(huán),對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)无埃。這個(gè)方法沒有返回值徙瓶。參數(shù)都是function類型,默認(rèn)有傳參嫉称,參數(shù)分別為:遍歷的數(shù)組內(nèi)容侦镇;對(duì)應(yīng)的數(shù)組索引,數(shù)組本身织阅。

var arr = [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

12.map()
map():指“映射”壳繁,對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。
下面代碼利用map方法實(shí)現(xiàn)數(shù)組中每個(gè)數(shù)求平方闹炉。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

13.filter()
filter():“過濾”功能蒿赢,數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù),返回滿足過濾條件組成的數(shù)組渣触。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

14.every()
every():判斷數(shù)組中每一項(xiàng)都是否滿足條件羡棵,只有所有項(xiàng)都滿足條件,才會(huì)返回true嗅钻。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

15.some()
some():判斷數(shù)組中是否存在滿足條件的項(xiàng)皂冰,只要有一項(xiàng)滿足條件,就會(huì)返回true养篓。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

16.reduce()和 reduceRight()
這兩個(gè)方法都會(huì)實(shí)現(xiàn)迭代數(shù)組的所有項(xiàng)秃流,然后構(gòu)建一個(gè)最終返回的值。reduce()方法從數(shù)組的第一項(xiàng)開始柳弄,逐個(gè)遍歷到最后舶胀。而 reduceRight()則從數(shù)組的最后一項(xiàng)開始,向前遍歷到第一項(xiàng)语御。

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

傳給 reduce()和 reduceRight()的函數(shù)接收 4 個(gè)參數(shù):前一個(gè)值、當(dāng)前值应闯、項(xiàng)的索引和數(shù)組對(duì)象。這個(gè)函數(shù)返回的任何值都會(huì)作為第一個(gè)參數(shù)自動(dòng)傳給下一項(xiàng)挂捻。第一次迭代發(fā)生在數(shù)組的第二項(xiàng)上碉纺,因此第一個(gè)參數(shù)是數(shù)組的第一項(xiàng),第二個(gè)參數(shù)就是數(shù)組的第二項(xiàng)刻撒。

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

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum); //25

17.join()
join(separator): 將數(shù)組的元素組起一個(gè)字符串声怔,以separator為分隔符态贤,省略的話則用默認(rèn)用逗號(hào)為分隔符,該方法只接收一個(gè)參數(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ù)組不變)

參考地址:https://www.cnblogs.com/obel/p/7016414.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末悠汽,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子芥驳,更是在濱河造成了極大的恐慌柿冲,老刑警劉巖,帶你破解...
    沈念sama閱讀 210,914評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件兆旬,死亡現(xiàn)場(chǎng)離奇詭異假抄,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評(píng)論 2 383
  • 文/潘曉璐 我一進(jìn)店門宿饱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來熏瞄,“玉大人,你說我怎么就攤上這事谬以“涂蹋” “怎么了?”我有些...
    開封第一講書人閱讀 156,531評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵蛉签,是天一觀的道長胡陪。 經(jīng)常有香客問我,道長碍舍,這世上最難降的妖魔是什么译打? 我笑而不...
    開封第一講書人閱讀 56,309評(píng)論 1 282
  • 正文 為了忘掉前任喜庞,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘汉矿。我一直安慰自己,他們只是感情好稼跳,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評(píng)論 5 384
  • 文/花漫 我一把揭開白布酪术。 她就那樣靜靜地躺著,像睡著了一般经瓷。 火紅的嫁衣襯著肌膚如雪爆哑。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,730評(píng)論 1 289
  • 那天舆吮,我揣著相機(jī)與錄音揭朝,去河邊找鬼。 笑死色冀,一個(gè)胖子當(dāng)著我的面吹牛潭袱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播锋恬,決...
    沈念sama閱讀 38,882評(píng)論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼屯换,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了与学?” 一聲冷哼從身側(cè)響起彤悔,我...
    開封第一講書人閱讀 37,643評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎癣防,沒想到半個(gè)月后蜗巧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,095評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蕾盯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評(píng)論 2 325
  • 正文 我和宋清朗相戀三年幕屹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蓝丙。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,566評(píng)論 1 339
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡望拖,死狀恐怖渺尘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情说敏,我是刑警寧澤鸥跟,帶...
    沈念sama閱讀 34,253評(píng)論 4 328
  • 正文 年R本政府宣布,位于F島的核電站盔沫,受9級(jí)特大地震影響医咨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜架诞,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評(píng)論 3 312
  • 文/蒙蒙 一拟淮、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧谴忧,春花似錦很泊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至均驶,卻和暖如春昏兆,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背辣恋。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評(píng)論 1 264
  • 我被黑心中介騙來泰國打工亮垫, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人伟骨。 一個(gè)月前我還...
    沈念sama閱讀 46,248評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像燃异,于是被迫代替她去往敵國和親携狭。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評(píng)論 2 348