js數(shù)組常用的方法

從事前端已經(jīng)兩年的時間蝌诡,發(fā)現(xiàn)我們在原生開發(fā)就是在玩數(shù)組的操作,今天在這個我把數(shù)組常用的方法進(jìn)行終結(jié)枫吧,希望對從事前端的小伙伴有一些幫助

Array.map()

此方法是將數(shù)組中的每個元素調(diào)用一個提供的函數(shù)浦旱,結(jié)果作為一個新的數(shù)組返回,并沒有改變原來的數(shù)組

1

2

3

4

let?arr = [1, 2, 3, 4, 5]

????let?newArr = arr.map(x => x*2)

????//arr= [1, 2, 3, 4, 5]?? 原數(shù)組保持不變

????//newArr = [2, 4, 6, 8, 10] 返回新數(shù)組

Array.forEach()

此方法是將數(shù)組中的每個元素執(zhí)行傳進(jìn)提供的函數(shù)九杂,沒有返回值颁湖,注意和map方法區(qū)分

1

2

3

let?arr = [1, 2, 3, 4, 5]

???num.forEach(x => x*2)

???// arr = [1, 2, 3, 4, 5]? 數(shù)組改變,注意和map區(qū)分

Array.filter()

此方法是將所有元素進(jìn)行判斷,將滿足條件的元素作為一個新的數(shù)組返回

1

2

3

4

let?arr = [1, 2, 3, 4, 5]

????const isBigEnough = value = value >= 3

????let?newArr = arr.filter(isBigEnough )

????//newNum = [3, 4, 5] 滿足條件的元素返回為一個新的數(shù)組

Array.every()

此方法是將所有元素進(jìn)行判斷返回一個布爾值例隆,如果所有元素都滿足判斷條件甥捺,則返回true,否則為false:

let?arr = [1, 2, 3, 4, 5]

????const isLessThan4 = value => value < 4

????const isLessThan6 => value => value < 6

????arr.every(isLessThan4 )?//false

????arr.every(isLessThan6 )?//true

Array.some()

此方法是將所有元素進(jìn)行判斷返回一個布爾值裳擎,如果存在元素都滿足判斷條件涎永,則返回true,若所有元素都不滿足判斷條件鹿响,則返回false:

let?arr= [1, 2, 3, 4, 5]

????const isLessThan4 = value => value < 4

????const isLessThan6 = value => value > 6

????arr.some(isLessThan4 )?//true

????arr.some(isLessThan6 )?//false

Array.reduce()

此方法是所有元素調(diào)用返回函數(shù)羡微,返回值為最后結(jié)果,傳入的值必須是函數(shù)類型:


let?arr = [1, 2, 3, 4, 5]

???const add = (a, b) => a + b

???let?sum = arr.reduce(add)

???//sum = 15? 相當(dāng)于累加的效果

???與之相對應(yīng)的還有一個 Array.reduceRight() 方法,區(qū)別是這個是從右向左操作的

Array.push()

此方法是在數(shù)組的后面添加新加元素惶我,此方法改變了數(shù)組的長度:


Array.pop()

此方法在數(shù)組后面刪除最后一個元素妈倔,并返回數(shù)組,此方法改變了數(shù)組的長度:

let?arr = [1, 2, 3, 4, 5]

????arr.pop()

????console.log(arr)?//[1, 2, 3, 4]

????console.log(arr.length)?//4

Array.shift()

此方法在數(shù)組后面刪除第一個元素绸贡,并返回數(shù)組盯蝴,此方法改變了數(shù)組的長度:

let?arr = [1, 2, 3, 4, 5]

????arr.shift()

????console.log(arr)?//[2, 3, 4, 5]

????console.log(arr.length)?//4?

Array.unshift()

此方法是將一個或多個元素添加到數(shù)組的開頭毅哗,并返回新數(shù)組的長度:


let?arr = [1, 2, 3, 4, 5]

????arr.unshift(6, 7)

????console.log(arr)?//[6, 7, 1, 2, 3, 4, 5]

????console.log(arr.length)?//7?

Array.isArray()

判斷一個對象是不是數(shù)組,返回的是布爾值

Array.concat()

此方法是一個可以將多個數(shù)組拼接成一個數(shù)組:

let?arr1 = [1, 2, 3]

??????arr2 = [4, 5]

??let?arr = arr1.concat(arr2)

??console.log(arr)//[1, 2, 3, 4, 5]

Array.toString()

此方法將數(shù)組轉(zhuǎn)化為字符串:

let?arr = [1, 2, 3, 4, 5];

???let?str = arr.toString()

???console.log(str)// 1,2,3,4,5

Array.join()

? 此方法也是將數(shù)組轉(zhuǎn)化為字符串:

let?arr = [1, 2, 3, 4, 5];

???let?str1 = arr.toString()

???let?str2 = arr.toString(',')

???let?str3 = arr.toString('##')

???console.log(str1)// 12345

???console.log(str2)// 1,2,3,4,5

???console.log(str3)// 1##2##3##4##5

通過例子可以看出和toString的區(qū)別捧挺,可以設(shè)置元素之間的間隔~

  15.Array.splice(開始位置虑绵, 刪除的個數(shù),元素)

萬能方法闽烙,可以實(shí)現(xiàn)增刪改:

let?arr = [1, 2, 3, 4, 5];

?????let?arr1 = arr.splice(2, 0?'haha')

?????let?arr2 = arr.splice(2, 3)

?????let?arr1 = arr.splice(2, 1?'haha')

?????console.log(arr1)?//[1, 2, 'haha', 3, 4, 5]新增一個元素

?????console.log(arr2)?//[1, 2] 刪除三個元素

?????console.log(arr3)?//[1, 2, 'haha', 4, 5] 替換一個元素

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末翅睛,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子黑竞,更是在濱河造成了極大的恐慌捕发,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件很魂,死亡現(xiàn)場離奇詭異扎酷,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)遏匆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進(jìn)店門法挨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人拉岁,你說我怎么就攤上這事坷剧《枧溃” “怎么了喊暖?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長撕瞧。 經(jīng)常有香客問我陵叽,道長,這世上最難降的妖魔是什么丛版? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任巩掺,我火速辦了婚禮,結(jié)果婚禮上页畦,老公的妹妹穿的比我還像新娘胖替。我一直安慰自己,他們只是感情好豫缨,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布独令。 她就那樣靜靜地躺著,像睡著了一般好芭。 火紅的嫁衣襯著肌膚如雪燃箭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天舍败,我揣著相機(jī)與錄音招狸,去河邊找鬼敬拓。 笑死,一個胖子當(dāng)著我的面吹牛裙戏,可吹牛的內(nèi)容都是我干的乘凸。 我是一名探鬼主播,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼累榜,長吁一口氣:“原來是場噩夢啊……” “哼翰意!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起信柿,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤冀偶,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后渔嚷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體进鸠,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年形病,在試婚紗的時候發(fā)現(xiàn)自己被綠了客年。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡漠吻,死狀恐怖量瓜,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情途乃,我是刑警寧澤绍傲,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站耍共,受9級特大地震影響烫饼,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜试读,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一杠纵、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧钩骇,春花似錦比藻、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至唐瀑,卻和暖如春群凶,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背哄辣。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工请梢, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留赠尾,地道東北人。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓毅弧,卻偏偏與公主長得像气嫁,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 一、不改變原數(shù)組:concat()患久、join()、slice()梯影、toString()、valueOf()庶香、sub...
    Jc_wo閱讀 535評論 0 2
  • 數(shù)組方法 下面開始介紹數(shù)組的方法甲棍,數(shù)組的方法有數(shù)組原型方法,也有從object對象繼承來的方法赶掖,這里我們只介紹數(shù)組...
    祈求者閱讀 371評論 0 2
  • 1.join() (數(shù)組轉(zhuǎn)字符串) 數(shù)組轉(zhuǎn)字符串感猛,方法只接收一個參數(shù):即默認(rèn)為逗號分隔符()。 var arr...
    沉迷魚閱讀 290評論 0 0
  • 一、concat() concat() 方法用于連接兩個或多個數(shù)組膳灶。該方法不會改變現(xiàn)有的數(shù)組咱士,僅會返回被連接數(shù)組的...
    小蝦米前端閱讀 257評論 0 0
  • 1、口訣:改弦更張制度變袖瞻,評頭品足挑毛菜局隆拆吆;敬謝不敏婉推辭聋迎,聳人聽聞多夸大 2、解釋: 改弦更張:更:改換枣耀;張:給樂...
    余子燁閱讀 362評論 0 7