JavaScript 數(shù)組方法整理大全

一、常用的數(shù)組方法
★ 直接操作影響原數(shù)組的方法:

Array.push()    // 向數(shù)組的末尾添加一個(gè)或多個(gè)元素省撑,并返回新的數(shù)組長(zhǎng)度。原數(shù)組改變。
Array.pop()     // 刪除并返回?cái)?shù)組的最后一個(gè)元素,若該數(shù)組為空本刽,則返回 undefined 。原數(shù)組改變赠涮。
Array.unshift()     // 向數(shù)組的開(kāi)頭添加一個(gè)或多個(gè)元素,并返回新的數(shù)組長(zhǎng)度暗挑。原數(shù)組改變笋除。
Array.shift()       // 刪除數(shù)組的第一項(xiàng),并返回第一個(gè)元素的值炸裆。若該數(shù)組為空垃它,則返回 undefined 。原數(shù)組改變烹看。
Array.reverse()     // 將數(shù)組倒序国拇。原數(shù)組改變。
Array.sort(func)        // 對(duì)數(shù)組元素進(jìn)行排序惯殊。按照字符串 UniCode 碼排序酱吝,原數(shù)組改變。
Array.splice(index,howmany,arr1,arr2...)      // 刪除元素并添加元素土思,從 index 位置開(kāi)始刪除 howmany 個(gè)元素务热,并將 arr1、arr2...數(shù)據(jù)從 index 位置依次插入己儒。howmany 為 0 時(shí)崎岂,則不刪除元素。原數(shù)組改變闪湾。
Array.fill()        // 使用給定值冲甘,填充一個(gè)數(shù)組。原數(shù)組改變。

★ 直接操作不影響原數(shù)組的方法:

Array.concat(arr1,arr2...)  // 合并兩個(gè)或多個(gè)數(shù)組江醇,生成一個(gè)新的數(shù)組省艳。原數(shù)組不變。
Array.join()        // 將數(shù)組的每一項(xiàng)用指定字符連接形成一個(gè)字符串嫁审。默認(rèn)連接字符為 “,” 逗號(hào)跋炕。原數(shù)組不變。
Array.slice(start,end)  // 從 start 開(kāi)始律适, end 之前結(jié)束辐烂,不到 end ;如果不給 end 值捂贿,從 start 開(kāi)始到數(shù)組結(jié)束纠修。 start 可以給負(fù)值, -1 表示數(shù)組最后位置厂僧,-2 表示倒數(shù)第二個(gè)扣草,以此類推,顧前不顧后颜屠。原數(shù)組不變辰妙。
Array.find(func)      // find 返回?cái)?shù)組中第一個(gè)滿足條件的元素(如果有的話), 如果沒(méi)有甫窟,則返回 undefined 密浑。原數(shù)組不變。
Array.findIndex(func)      // findIndex 方法的用法與 find 粗井。原數(shù)組不變尔破。 方法很類似,返回第一個(gè)符合條件的數(shù)組成員的位置浇衬,如果所有成員都不符合條件懒构,則返回 -1≡爬蓿可識(shí)別 NaN 胆剧。原數(shù)組不變。
Array.filter(func)      // 過(guò)濾數(shù)組梳星,返回一個(gè)滿足要求的數(shù)組 赞赖。原數(shù)組不變。
Array.every(func)       // 對(duì)數(shù)組中的每一項(xiàng)進(jìn)行判斷冤灾,若都符合則返回 true 前域,否則返回 false 。原數(shù)組不變韵吨。
Array.some(func)        // 對(duì)數(shù)組中的每一項(xiàng)進(jìn)行判斷匿垄,若都不符合則返回 false ,否則返回 true 。原數(shù)組不變椿疗。
Array.reduce(func)  // reduce 方法接收一個(gè)函數(shù)作為累加器漏峰,數(shù)組中的每個(gè)值(從左到右)開(kāi)始縮減,最終計(jì)算為一個(gè)值届榄。原數(shù)組不變浅乔。
Array.from()        // 快速便捷把一個(gè)類似數(shù)組的可迭代對(duì)象創(chuàng)建成一個(gè)新的數(shù)組實(shí)例。只要一個(gè)對(duì)象有 length 铝条, Array.from 就能把它變成一個(gè)數(shù)組靖苇,返回新的數(shù)組,而不改變?cè)瓕?duì)象班缰。原數(shù)組不變贤壁。
Array.includes()    // 方法返回一個(gè)布爾值,表示某個(gè)數(shù)組是否包含給定的值埠忘,與字符串的 includes 方法類似脾拆。可識(shí)別 NaN 莹妒。原數(shù)組不變名船。

★ 直接操作有可能影響到原數(shù)組的方法:

Array.forEach(func)     //用于調(diào)用數(shù)組的每個(gè)元素,并將元素傳遞給回調(diào)函數(shù)动羽。原數(shù)組不變包帚。(注意該方法和 map 的區(qū)別,若直接打印 Array.forEach 运吓,結(jié)果為 undefined )。
Array.map(func)     //原數(shù)組的每一項(xiàng)執(zhí)行函數(shù)后疯趟,返回一個(gè)新的數(shù)組拘哨。原數(shù)組不變。(原數(shù)組里為對(duì)象信峻,直接操作數(shù)組本身倦青,是會(huì)改變數(shù)組的)

二、新舊方法對(duì)比
★ sort 排序 reverse 數(shù)組倒序:

var arr = [1, 3, 5, 4, 1, 2, 3, 6, 7]
//從小到大
arr.sort((a,b) => a-b);
console.log(arr)     //[1, 1, 2, 3, 3, 4, 5, 6, 7]
//從大到小
arr.sort((a,b) => b-a);
console.log(arr)     //[7, 6, 5, 4, 3, 3, 2, 1, 1]
//倒序
var arr = [1, 3, 5, 4, 1, 2, 3, 6, 7]
arr.reverse();
console.log(arr)     //[7, 6, 3, 2, 1, 4, 5, 3, 1]

★ forEach 和 map
forEach 和 map 的作用類似盹舞,都是循環(huán)數(shù)組去做一些事情产镐,區(qū)別在于 map 會(huì)返回一個(gè)新數(shù)組,而 forEach 不會(huì)返回
例如一個(gè)班級(jí)中每個(gè)人年齡都加 1

var arr = [
    { id: 1, age: 18 },
    { id: 2, age: 24 },
    { id: 3, age: 26 },
    { id: 4, age: 19 },
]
// 舊寫(xiě)法
for (let i = 0; i < arr.length; i++) {
    arr[i].age++;
}
console.log(arr);  //[...]

// forEach
var newArr = arr.forEach( it => {
    it.age++;
    return it
})
console.log(arr,newArr);   //[...] undefined

// map
var newArr = arr.map(it => {
    it.age++;
    return it;
})
console.log(arr,newArr);  //[...] [...]

★ every和some
在沒(méi)有every和some之前踢步,做一些數(shù)組的判斷癣亚,都是用for循環(huán)來(lái)做的,現(xiàn)在可以簡(jiǎn)潔一下代碼了

例如說(shuō)檢查一組年齡获印,是否有大于 25 歲的

var age = [17, 24, 26, 25, 24];
// 舊寫(xiě)法
var flag = false;
for (let i = 0; i < age.length; i++) {
    if(age[i] > 25){
        flag = true;
    }
}
console.log(flag);

// every 全滿足返回 true 否則為 false 
// 是否全部小于等于 25
var flag = age.every(it => it<=25)
console.log(flag);      // false  表明有大于 25 的

// some 滿足其一即返 回true 否則為 false 可  
// 是否有大于 25
var flag = age.some(it => it>25)
console.log(flag);      // true  表明有大于 25 的

★ filter方法的使用
filter過(guò)濾, 和map一樣述雾,也會(huì)返回新數(shù)組,保留哪些返回true的元素 例如篩選出年齡大于 25 歲的學(xué)生

var arr = [
    { id: 1, age: 18 },
    { id: 2, age: 24 },
    { id: 3, age: 26 },
    { id: 4, age: 19 },
]
// 舊寫(xiě)法
var newArr = [];
for (let i = 0; i < arr.length; i++) {
    if (arr[i].age > 25) {
        newArr.push(arr[i]);
    }
}
console.log(newArr);    // [{id: 3, age: 26}]

// filter
var newArr = arr.filter(it => it.age > 25);
console.log(newArr);    //[{id: 3, age: 26}]

★ find和findIndex includes和indexOf
find返回?cái)?shù)組中第一個(gè)滿足條件的元素(如果有的話), 如果沒(méi)有玻孟,則返回undefined唆缴。

findIndex的話則是返回下標(biāo),如果所有成員都不符合條件黍翎,則返回 -1面徽。可識(shí)別 NaN

// 查找數(shù)組中第一個(gè) 20 歲的值
var arr = [
    { id: 1, age: 18 },
    { id: 2, age: 24 },
    { id: 3, age: 20 },
    { id: 4, age: 26 },
    { id: 5, age: 20 },
    { id: 6, age: 19 },
]
// 舊寫(xiě)法
var obj = {};
for (let i = 0; i < arr.length; i++) {
    if (arr[i].age == 20) {
        obj = arr[i];
        break;
    }
}
console.log(obj);    // {id: 3, age: 20}

// find
var obj = arr.find(it => it.age == 20);
console.log(obj);    // {id: 3, age: 20}
// 需要注意的是 find 只會(huì)返回第一個(gè)符合條件的那一項(xiàng)匣掸,filter 則是返回所有符合的項(xiàng)組成的新數(shù)組

// findIndex
var index = arr.findIndex(it => it.age == 20);
var obj = arr[index];
console.log(obj);    // {id: 3, age: 20}

與findIndex類似趟紊,indexOf也是返回的數(shù)組下標(biāo),通常用于判斷數(shù)組里是否存在指定值旺聚,一般用于簡(jiǎn)單數(shù)組织阳,如果返回的不是 -1 則說(shuō)明數(shù)組中有這一項(xiàng) includes則直接返回Boolean值,true則表示有砰粹,而且includes可以判斷NaN唧躲,indexOf不行

// 判斷數(shù)組中是否有 20
var arr = [11, 24, 26, 20, 10, 20]
console.log(arr.indexOf(20) != -1)      // true
console.log(arr.includes(20))           // true
arr.push(NaN)
console.log(arr.indexOf(NaN) != -1)     // false
console.log(arr.includes(NaN))          // true

在檢查對(duì)象數(shù)組中是否存在某個(gè)值的時(shí)候一般來(lái)說(shuō)不使用indexOf和include,一般都是用find 或者fitter實(shí)現(xiàn)
★ Array.from()
Array.from()可以用于把有l(wèi)ength屬性的對(duì)象生成一個(gè)新數(shù)組碱璃,所以可以用他來(lái)新建數(shù)組弄痹,也可以結(jié)合Set來(lái)做數(shù)組的去重

var arr = [1, 2, 3, 3, 4, 1, 5];
// 舊方法去重
var newArr = [];
for (let i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) == -1) {
        newArr.push(arr[i]);
    }
}
console.log(newArr)     // [1, 2, 3, 4, 5]

// Set+from  Set 和 Map 類似,也是一組 key 的集合嵌器,但不存儲(chǔ) value 肛真。由于 key 不能重復(fù),所以爽航,在 Set 中蚓让,沒(méi)有重復(fù)的 key。
var newArr = Array.from(new Set(arr));
console.log(newArr)     // [1, 2, 3, 4, 5]
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末讥珍,一起剝皮案震驚了整個(gè)濱河市历极,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌衷佃,老刑警劉巖趟卸,帶你破解...
    沈念sama閱讀 218,640評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異氏义,居然都是意外死亡锄列,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)惯悠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)邻邮,“玉大人,你說(shuō)我怎么就攤上這事吮螺∪那簦” “怎么了帕翻?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,011評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)萝风。 經(jīng)常有香客問(wèn)我嘀掸,道長(zhǎng),這世上最難降的妖魔是什么规惰? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,755評(píng)論 1 294
  • 正文 為了忘掉前任睬塌,我火速辦了婚禮,結(jié)果婚禮上歇万,老公的妹妹穿的比我還像新娘揩晴。我一直安慰自己,他們只是感情好贪磺,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,774評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布硫兰。 她就那樣靜靜地躺著,像睡著了一般寒锚。 火紅的嫁衣襯著肌膚如雪劫映。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,610評(píng)論 1 305
  • 那天刹前,我揣著相機(jī)與錄音泳赋,去河邊找鬼。 笑死喇喉,一個(gè)胖子當(dāng)著我的面吹牛祖今,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播拣技,決...
    沈念sama閱讀 40,352評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼千诬,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了膏斤?” 一聲冷哼從身側(cè)響起大渤,我...
    開(kāi)封第一講書(shū)人閱讀 39,257評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎掸绞,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體耕捞,經(jīng)...
    沈念sama閱讀 45,717評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡衔掸,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,894評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了俺抽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片敞映。...
    茶點(diǎn)故事閱讀 40,021評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖磷斧,靈堂內(nèi)的尸體忽然破棺而出振愿,到底是詐尸還是另有隱情捷犹,我是刑警寧澤,帶...
    沈念sama閱讀 35,735評(píng)論 5 346
  • 正文 年R本政府宣布冕末,位于F島的核電站萍歉,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏档桃。R本人自食惡果不足惜枪孩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,354評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望藻肄。 院中可真熱鬧蔑舞,春花似錦、人聲如沸嘹屯。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,936評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)州弟。三九已至钧栖,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間呆馁,已是汗流浹背桐经。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,054評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留浙滤,地道東北人阴挣。 一個(gè)月前我還...
    沈念sama閱讀 48,224評(píng)論 3 371
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像纺腊,于是被迫代替她去往敵國(guó)和親畔咧。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,974評(píng)論 2 355