JavaScript之?dāng)?shù)組方法

之前就想過整理數(shù)組方法的旦事，但是一直沒有時間，現(xiàn)在趁有時間整理下

  • 首先來說創(chuàng)建數(shù)組的方式青灼，目前好像是兩種，一種是構(gòu)造函數(shù)妓盲，一種是直接賦值空數(shù)組
// 構(gòu)造函數(shù)
var arr = new Array(); // 創(chuàng)建一個空數(shù)組

// 賦值空數(shù)組
var arr = []; // 創(chuàng)建空數(shù)組

數(shù)組方法也有很多杂拨，咱們一步一步來吧。首先數(shù)組方法分為原型方法(原生方法)和從Object對象繼承的方法悯衬。

  • 首先講isArray()弹沽，這個方法主要是為了判斷某變量是否為js數(shù)組，返回值是一個布爾類型筋粗，為true則是js數(shù)組策橘，為false則不是，咱們看看下面例子：
var arr = [1,2,3];
Array.isArray(arr);
// true
  • toString(),這個方法是把數(shù)組轉(zhuǎn)換為數(shù)組值（逗號分隔）的字符串娜亿。如：
var arr = [1,2,3];
arr.toString();
// "1,2,3"
  • join()這個方法也可將所有數(shù)組元素結(jié)合為一個字符串役纹。它的行為類似 toString()，但是我們還可以規(guī)定分隔符暇唾，如果我們不規(guī)定，它則默認的是逗號( 辰斋，)策州，如：
var arr = [1,2,3];
// 不規(guī)定分隔符
arr.join();
// "1,2,3"
// 規(guī)定分隔符
arr.jion('-');
// "1-2-3"
// 方法不改變原數(shù)組，比如繼續(xù)看arr
arr  // [1,2,3]
  • push()和pop()
    push() ：可以接收任意數(shù)量的參數(shù)宫仗，把它們逐個添加到數(shù)組末尾够挂，并返回修改后數(shù)組的長度。
    pop() ：數(shù)組末尾移除最后一項藕夫，減少數(shù)組的 length 值孽糖，然后返回移除的項。
    咱們先來看push() 
var arr = [1,2,3];
arr.push(4,5,6);      // 6      這個6就是返回的數(shù)組長度
console.log(arr)
// [1,2,3,4,5,6]        // 已改變了原數(shù)組

接著看pop()

// 這次我們不用數(shù)字來做操作,方便大家區(qū)分
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
arr.pop();  // 返回值' f ',這個' f '就是被刪除的值
console.log(arr); // 得出以下結(jié)果
['a', 'b', 'c', 'd', 'e']
  • shift() 和 unshift()
    shift() ：刪除原數(shù)組第一項毅贮，并返回刪除元素的值办悟；如果數(shù)組為空則返回undefined 。
    unshift() : 將參數(shù)添加到原數(shù)組開頭滩褥，并返回數(shù)組的長度 病蛉。
// 首先我們來看shift()
var arr = ['a','b','c'];
arr.shift(); // 'a'         // 返回刪除元素
console.log(arr)
['b','c']               // 已改變原數(shù)組
// 如果數(shù)組為空，返回undefined
var arr = [];
arr.shift();    //   undefined

接下來我們看看unshift()
var arr = ['a','b','c'];
arr.unshift('1');  //  4       // 返回添加后數(shù)組長度
console.log(arr)
['1','a','b','c']        // 已改變原數(shù)組
  • sort()
    sort() ：按升序排列數(shù)組項——即最小的值位于最前面瑰煎，最大的值排在最后面铺然。
    在排序時，sort()方法會調(diào)用每個數(shù)組項的 toString()轉(zhuǎn)型方法酒甸，然后比較得到的字符串魄健，以確定如何排序。即使數(shù)組中的每一項都是數(shù)值插勤， sort()方法比較的也是字符串沽瘦，因此會出現(xiàn)以下的這種情況：
var arr = ['d','a','c','b'];
arr.sort();
console.log(arr)
['a','b','c','d']      // 原數(shù)組被改變

// 接著看
var arr = [13, 24, 51, 3];
arr.sort();
console.log(arr);
[13, 24, 3, 51]      // 原數(shù)組被改變

// 所以遇到這樣的情況革骨，使用的時候最好是封裝成一個函數(shù)
// 升序排序函數(shù)
function sortNumber(a,b){
　　return a - b
}
var arr =  [13, 24, 51, 3];
arr.sort(sortNumber);
console.log(arr)
[3, 13, 24, 51]        // 升序

// 降序排序函數(shù)
function NumDescSort(a,b){  
     return b - a;  
} 
var arr =  [13, 24, 51, 3];
arr.sort(NumDescSort)
console.log(arr)
[51, 24, 13, 3]
  • reverse()
    reverse() ：反轉(zhuǎn)數(shù)組項的順序。
var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原數(shù)組改變)
  • concat()
    concat() ：將參數(shù)添加到原數(shù)組中其垄。這個方法會先創(chuàng)建當(dāng)前數(shù)組一個副本苛蒲，然后將接收到的參數(shù)添加到這個副本的末尾，最后返回新構(gòu)建的數(shù)組绿满。在沒有給 concat()方法傳遞參數(shù)的情況下臂外，它只是復(fù)制當(dāng)前數(shù)組并返回副本。
var arr = [1,3,5,7];
var arr1 = arr.concat(9,[11,13]);
console.log(arr1); 
[1, 3, 5, 7, 9, 11, 13]
console.log(arr); 　　　　
 [1, 3, 5, 7]            //  原數(shù)組未被修改
  • slice()
    slice() ：可從已有的數(shù)組中返回選定的元素喇颁。
    語法：arrayObject.slice(start,end)
參數(shù) 描述
start 必需漏健。規(guī)定從何處開始選取。如果是負數(shù)橘霎，那么它規(guī)定從數(shù)組尾部開始算起的位置蔫浆。也就是說，-1 指最后一個元素姐叁，-2 指倒數(shù)第二個元素瓦盛，以此類推。
end 可選外潜。規(guī)定從何處結(jié)束選取原环。該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)。如果沒有指定該參數(shù)处窥，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素嘱吗。如果這個參數(shù)是負數(shù)，那么它規(guī)定的是從數(shù)組尾部開始算起的元素滔驾。

返回值
返回一個新的數(shù)組谒麦，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。
如果 end 未被規(guī)定哆致，那么 slice() 方法會選取從 start 到數(shù)組結(jié)尾的所有元素绕德。

var arr = [1,3,5,7,9,11];
var arr1 = arr.slice(1);  // 默認從第0個開始，截取到下標(biāo)為1(不包括該元素)
console.log(arr1); 
[3, 5, 7, 9, 11]
var arr2 = arr.slice(1,4); // 從第1個開始摊阀，截取到下標(biāo)為4(不包括該元素)
console.log(arr2);
[3, 5, 7]
var arr3 = arr.slice(1,-2); // 從第1個開始迁匠，截取到下標(biāo)為-2，也就是下標(biāo)為4(不包括該元素)驹溃，
// 和slice(1,4)相同
console.log(arr3); 
[3, 5, 7]
var arr4 = arr.slice(-4,-1);
// 從第-4開始城丧，反過來從-1開始數(shù)，-4的位置在下標(biāo)2豌鹤，到-1亡哄，也就是下標(biāo)5，
// 可以理解為slice(2,5)布疙，第2截取到第5(不包括該元素)
console.log(arr4);
[5, 7, 9]
console.log(arr);
[1, 3, 5, 7, 9, 11]   //  原數(shù)組沒變

// 如果還不清楚截取位置蚊惯，還可以往下看
var arr = [1,3,5,7,9,11];
arr.slice(0,1)   // 返回[1]
arr.slice(0,2)     // 返回[1,3]
arr.slice(0,3)    // 返回[1,3,5]
arr.slice(0,-1)    // 返回[1,3,5,7,9]
arr.slice(0,-2)    // 返回[1,3,5,7]
  • splice()
    splice() 方法向/從數(shù)組中添加/刪除項目愿卸，然后返回被刪除的項目。
    注釋：該方法會改變原始數(shù)組截型。
    語法： arrayObject.splice(index,howmany,item1,.....,itemX)
參數(shù) 描述
index 必需趴荸。整數(shù)，規(guī)定添加/刪除項目的位置宦焦，使用負數(shù)可從數(shù)組結(jié)尾處規(guī)定位置发钝。
howmany 必需。要刪除的項目數(shù)量波闹。如果設(shè)置為 0酝豪，則不會刪除項目。
item1, ..., itemX 可選精堕。向數(shù)組添加的新項目孵淘。

返回值： 包含被刪除項目的新數(shù)組，如果有的話
splice() 方法可刪除從 index 處開始的零個或多個元素歹篓，并且用參數(shù)列表中聲明的一個或多個值來替換那些被刪除的元素瘫证。
如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數(shù)組庄撮。

var arr = [1,3,5,7,9,11];
// 從第0個元素開始痛悯，刪除2個元素
var arrRemoved = arr.splice(0,2);   // 返回值[1,3]
console.log(arr);
// [5, 7, 9, 11]
// 從第2個位置開始，刪除0個元素重窟，添加元素4，添加元素6
var arrRemoved2 = arr.splice(2,0,4,6);  // 刪除0個元素惧财，返回值[]
console.log(arr); 
// [5, 7, 4, 6, 9, 11]
// 從第1個元素開始巡扇，刪除1個元素，添加元素2垮衷，添加元素4
var arrRemoved3 = arr.splice(1,1,2,4); // 返回值[7]
console.log(arr); 
//  [5, 2, 4, 4, 6, 9, 11]
  • indexOf()和 lastIndexOf()
    indexOf() ：接收兩個參數(shù)：要查找的項和（可選的）表示查找起點位置的索引厅翔。其中， 從數(shù)組的開頭（位置 0）開始向后查找搀突。
    lastIndexOf：接收兩個參數(shù)：要查找的項和（可選的）表示查找起點位置的索引刀闷。其中， 從數(shù)組的末尾開始向前查找仰迁。
    這兩個方法都返回要查找的項在數(shù)組中的位置甸昏，或者在沒找到的情況下返回-1。在比較第一個參數(shù)與數(shù)組中的每一項時徐许，會使用全等操作符施蜜。
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
// indexOf方法就是，如果查找到有雌隅，那么返回該元素位置翻默，如果沒有缸沃，則返回-1，所以我們一般寫判斷都是
// if(arr.indexOf('5') != -1)  或者if(arr.indexOf('5') > -1)
  • map()
    map() ：指“映射”修械，對數(shù)組中的每一項運行給定函數(shù)趾牧，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。
    下面代碼利用map方法實現(xiàn)數(shù)組中每個數(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]

// 我們也可以拿來做接口映射翘单，比如
let r = res.map(item => {
    return {
        title: item.name,
        sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
        age: item.age,
        avatar: item.img
    }
})
  • forEach()
    forEach()：對數(shù)組進行遍歷循環(huán)，對數(shù)組中的每一項運行給定函數(shù)仇箱。這個方法沒有返回值县恕。參數(shù)都是function類型，默認有傳參剂桥，參數(shù)分別為：遍歷的數(shù)組內(nèi)容忠烛；第對應(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
  • filter()
    filter() ：“過濾”功能美尸，數(shù)組中的每一項運行給定函數(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]
  • every()
    every() ：判斷數(shù)組中每一項都是否滿足條件师坎，只有所有項都滿足條件，才會返回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
  • some()
    some()：判斷數(shù)組中是否存在滿足條件的項胯陋，只要有一項滿足條件，就會返回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
  • reduce()和 reduceRight()
    先說說reduce()
    reduce() 方法接收一個函數(shù)作為累加器遏乔，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值发笔。
    reduce() 可以作為一個高階函數(shù)盟萨，用于函數(shù)的 compose。
    注意: reduce() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的了讨。
    然后是reduceRight()
    reduceRight() 方法的功能和 reduce()功能是一樣的捻激，不同的是 reduceRight() 從數(shù)組的末尾向前將數(shù)組中的數(shù)組項做累加。
    注意: reduce() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的前计。
// es6中reduce()方法
// 從左往右開始
// 參數(shù)：
// prev：它是上一次調(diào)用回調(diào)時返回的結(jié)果胞谭，每次調(diào)用的結(jié)果都會給prev
// cur：當(dāng)前的元素
// index：當(dāng)前的索引
// arr：循環(huán)的數(shù)組
// 返回值：
// ----------函數(shù)累計處理的結(jié)果
var a = [1,2,3,4,5,6,7,8,9,10]
var str = a.reduce(function(prev,cur,index,arr){
    return prev + cur ;
})
str // 55;

// ------------將二維數(shù)組轉(zhuǎn)換成一維
str //  (10) [0,1, 2, 3, 4, 5, 6, 7, 8, 9]
// 數(shù)組去重
var arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
var str = arr.sort().reduce((prev, cur)=>{
    if(prev.length===0 || prev[prev.length-1]!==cur){
        prev.push(cur);
    }
    return prev;
}, []);
str // (5) [1, 2, 3, 4, 5]
// es6中reduceRight()方法
// 從右往左開始
// 方法是一樣的
// -------------函數(shù)累計處理的結(jié)果
var a = [1,2,3,4,5,6,7,8,9,10]
var str = a.reduceRight(function(prev,cur,index,arr){
    return prev + cur ;
})
str // 55;
// 方法是一樣的，只不過是方法名改變下男杈，但是結(jié)果是不會變的
  • 現(xiàn)在有些例子,類似于數(shù)組去重
    通過使用Set對象和...運算符能夠使用數(shù)組里的唯一值去創(chuàng)建一個新的數(shù)組
var arr = [1,2,2,3,4,4,3,5,6,5,6,7,7,8,8,9,9,10,10,1];
var arr1 = [...new Set(arr)];
console.log(arr1);
// [1,2,3,4,5,6,7,8,9,10]     // 打印結(jié)果

到這里了韭赘，如果對你有幫助，幫忙點個贊唄~~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末势就，一起剝皮案震驚了整個濱河市泉瞻，隨后出現(xiàn)的幾起案子脉漏，更是在濱河造成了極大的恐慌，老刑警劉巖袖牙，帶你破解...
    沈念sama閱讀 221,198評論 6贊 514
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件侧巨，死亡現(xiàn)場離奇詭異，居然都是意外死亡鞭达，警方通過查閱死者的電腦和手機司忱，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3贊 398
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來畴蹭，“玉大人坦仍，你說我怎么就攤上這事∵督螅” “怎么了繁扎？”我有些...
    開封第一講書人閱讀 167,643評論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長糊闽。 經(jīng)常有香客問我梳玫，道長，這世上最難降的妖魔是什么右犹？ 我笑而不...
    開封第一講書人閱讀 59,495評論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任提澎，我火速辦了婚禮，結(jié)果婚禮上念链，老公的妹妹穿的比我還像新娘盼忌。我一直安慰自己，他們只是感情好掂墓，可當(dāng)我...
    茶點故事閱讀 68,502評論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布谦纱。 她就那樣靜靜地躺著，像睡著了一般梆暮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上绍昂，一...
    開封第一講書人閱讀 52,156評論 1贊 308
  • 城市分裂傳說
    那天啦粹，我揣著相機與錄音，去河邊找鬼窘游。 笑死唠椭，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的忍饰。 我是一名探鬼主播贪嫂，決...
    沈念sama閱讀 40,743評論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼艾蓝！你這毒婦竟也來了力崇？” 一聲冷哼從身側(cè)響起斗塘，我...
    開封第一講書人閱讀 39,659評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎亮靴，沒想到半個月后馍盟，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 46,200評論 1贊 319
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡茧吊，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年贞岭，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片搓侄。...
    茶點故事閱讀 40,424評論 1贊 352
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡瞄桨，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出讶踪，到底是詐尸還是另有隱情芯侥，我是刑警寧澤，帶...
    沈念sama閱讀 36,107評論 5贊 349
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布俊柔，位于F島的核電站筹麸，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏雏婶。R本人自食惡果不足惜物赶，卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3贊 333
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望留晚。 院中可真熱鬧酵紫，春花似錦、人聲如沸错维。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0贊 23
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽赋焕。三九已至参歹，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間隆判，已是汗流浹背犬庇。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1贊 271
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留侨嘀，地道東北人臭挽。 一個月前我還...
    沈念sama閱讀 48,798評論 3贊 376
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像咬腕，于是被迫代替她去往敵國和親欢峰。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,435評論 2贊 359