javascript數(shù)組常用函數(shù)與實(shí)戰(zhàn)總結(jié)

前言

在node.js后端開發(fā)過程中,數(shù)組這種數(shù)據(jù)類型(Object類型)再常見不過块茁,本文主要介紹數(shù)組的一些常見函數(shù)唇兑,以及在實(shí)戰(zhàn)開發(fā)過程中能更好的操作數(shù)組的lodash包

函數(shù)介紹

向數(shù)組末尾添加值

push

說明:向數(shù)組的末尾添加一個(gè)或多個(gè)元素露该,并返回新的長度
代碼:

let array=[11,22];
let arrayChange=array.push("333");
console.log(arrayChange)
//返回的結(jié)果就是數(shù)組改變后的長度:3
console.log(arrayChange.length)//undefined

向數(shù)組頭部添加值

unshift

說明:將參數(shù)添加到原數(shù)組開頭,并返回?cái)?shù)組的長度
代碼:

let array=[11,22];
let arrayChange=array.unshift("333");
console.log(array) //[333,11,22]
console.log(arrayChange)
//返回的結(jié)果就是數(shù)組改變后的長度:3
console.log(arrayChange.length)//undefined

刪除數(shù)組元素

splice

說明:
當(dāng)splice傳遞兩個(gè)參數(shù)的時(shí)候琳疏,參數(shù)1:開始刪除的下標(biāo)位置,參數(shù)2:刪除數(shù)組元素的個(gè)數(shù)有决,返回新的數(shù)組。當(dāng)splice傳遞三個(gè)參數(shù)的時(shí)候空盼,參數(shù)1:開始刪除的下表位置,參數(shù)2:刪除數(shù)組元素的個(gè)數(shù),參數(shù)3:向數(shù)組添加的新元素新荤。注意數(shù)組下標(biāo)0開始揽趾。

代碼:

let array=[11,22,33,44];
let arrayChange=array.splice(1,2);//movePos.splice(開始刪除的下表位置,刪除數(shù)組元素的個(gè)數(shù));
console.log(arrayChange) ; //返回新的數(shù)組:22,11
console.log(arrayChange.length) ;//返回?cái)?shù)組長度2

let array =[111,222,333,444];
let arrayChange=array.splice(2,1,"666")//movePos.splice(開始刪除的下表位置,刪除數(shù)組元素的個(gè)數(shù),向數(shù)組添加的新項(xiàng)目苛骨。);從下標(biāo)2開始刪除一位篱瞎,并用666替換刪除下表位置的元素
console.loge(arrayChange + "<br />")
//返回新的數(shù)組 11,22,666,44

獲取數(shù)組的最后一個(gè)元素

常規(guī)獲取元素最后一個(gè)值

let array=['1','2','3','312哦哦'];
console.log(array[array.length-1]);

pop 也可以說是刪除數(shù)組的最后一個(gè)元素苟呐,與刪除數(shù)組的第一個(gè)元素shift用法基本相同

說明:注意使用pop獲取數(shù)組最后一個(gè)元素的時(shí)候,同時(shí)會刪除掉數(shù)組的最后一個(gè)元素俐筋;使用shift獲取數(shù)組最后一個(gè)元素的時(shí)候牵素,同時(shí)會刪除掉數(shù)組的最后一個(gè)元素,二者都是返回的那個(gè)元素的值澄者,原始數(shù)組也發(fā)生變化笆呆。

let array=['1','2','3','312哦哦'];
console.log(array.pop())
console.log(array)

Lodash中的函數(shù)_last

說明:不會改變原始數(shù)組

let array=['1','2','3','312哦哦'];
console.log(_.last(array))

顛倒數(shù)組元素(數(shù)組的反轉(zhuǎn))

  • 數(shù)組傳統(tǒng)方法 reverse

    說明:顛倒數(shù)組元素后返回新的數(shù)組

代碼:

let array=[11,22];

let arrayChange=movePos.reverse();

console.log(arrayChange) //返回新的數(shù)組:22,11

console.log(arrayChange.length) //返回?cái)?shù)組長度2
  • lodash提供的函數(shù) _.reverse

代碼:

let array=[11,22];
console.log(_.reverse(array))

分隔數(shù)組放入字符串

join

說明:用于把數(shù)組中的所有元素放入一個(gè)字符串。元素是通過指定的分隔符進(jìn)行分隔的粱挡。返回一個(gè)字符串
代碼

let array=[11,22];

let arrayChange=array.join("+");
console.log(arr)  //11+22

連接兩個(gè)或多個(gè)數(shù)組

contact

說明:用于連接兩個(gè)或多個(gè)數(shù)組,并返回一個(gè)新數(shù)組赠幕,新數(shù)組是將參數(shù)添加到原數(shù)組中構(gòu)成

let array=[11,22];
let arrayChange=array.concat(4,5);
console.log(arrayChange);//[11, 22, 4, 5]

數(shù)組元素的去重

  • 傳統(tǒng)方法遍歷去重 for of

代碼:

    let arr = ['數(shù)字','花朵','數(shù)字'];
    let result=[];
    for (let i of arr) {
        if (!result.includes(i)) {
            result.push(i)
        }
    }
  • ES6 新增了Set這一數(shù)據(jù)結(jié)構(gòu) 類似數(shù)組 但是Set成員具有唯一性,基于唯一性適合做數(shù)組去重

代碼:

let array=['數(shù)字','花朵','數(shù)字','地球','人類','頭發(fā)','眼睛','細(xì)胞'];
console.log(...(new Set(array)))
  • lodash提供的函數(shù) _uniq

代碼:

let array=['數(shù)字','花朵','數(shù)字','地球','人類','頭發(fā)','眼睛','細(xì)胞'];
console.log(_.uniq(array));

數(shù)組求和

lodash中的函數(shù) _sum

代碼:

let sorce=_.sum([32,45,86,43]);

獲取數(shù)組中指定鍵值對的值組成數(shù)組

lodash中的函數(shù) _map

說明:例如這樣一個(gè)包含對象的數(shù)組[{id:1,name:'koala'},{id:2,name:'koala1'}],想拿到數(shù)組對象中id的數(shù)據(jù)組成一個(gè)數(shù)組询筏。map的參數(shù)1:原型數(shù)組榕堰,參數(shù)2對象中的某一個(gè)鍵值對

代碼:

let array=[{id:1,name:'koala'},{id:2,name:'koala1'}];
let result=_map(array,'id');
//[1,2]

獲取數(shù)組中某個(gè)值的角標(biāo)

注意:下面兩個(gè)函數(shù)都是返回遇到的第一個(gè)符合的值的下標(biāo)值。
indexOf

說明:

  1. 用于在字符串和數(shù)組中找到目標(biāo)的索引
  2. 在字符串中使用的話會轉(zhuǎn)換類型為 "hello1".indexOf(1) //結(jié)果5
  3. 在數(shù)組中使用不會轉(zhuǎn)換類型 [1,2,3,"4"].indexOf(4) //-1
  4. [,,,,,].indexOf(undefined) //-1
  5. [null,undefined,NaN].indexOf(NaN)] //-1 NaN是找不到的其他可以喲
  6. let num = 2019; (""+num).indexOf(0) //1
    7.正常情況下indexOf返回?cái)?shù)組中第一個(gè)數(shù)的位置是0
    代碼:
console.log('哈哈',("hello1".indexOf(1)))//  哈哈 5
console.log('哈哈',("hello1111".indexOf(1)))//  哈哈 5
console.log('哈哈',("hello1".indexOf('h')))//0

lodash中的函數(shù)_.findIndex
說明:對于一個(gè)數(shù)組嫌套,里面每個(gè)值是對象的時(shí)候逆屡,這個(gè)函數(shù),可以不完全判斷對象一定是相同的踱讨。
代碼:

var users = [
    { 'user': 'barney',  'active': false ,'role':1},
    { 'user': 'fred',    'active': false ,'role':2},
    { 'user': 'fred', 'active': true ,'role':3}
  ];

console.log(  _.findIndex(users, { 'user': 'fred', 'role': 3 }));// 輸出2

數(shù)組包含值判斷

  • indexOf

    說明:返回對應(yīng)元素下標(biāo)魏蔗,在上面已經(jīng)詳細(xì)介紹過。

  • includes

    說明:返回的直接是true/false勇蝙,同時(shí)對NaN找不到的問題也得到解決沫勿。效率應(yīng)該會比indexOf高一些。includes可以有兩個(gè)參數(shù)味混,參數(shù)1:表示要判斷的值产雹,參數(shù)2:表示判斷的起始位置,可以是負(fù)數(shù)翁锡,表示從右數(shù)過來第幾個(gè)蔓挖,但是不改變判斷搜索的方向,搜索方向還是從左到右馆衔。

代碼:

let array111=['koala','kaola1',NaN];
console.log(array111.includes('koala'));//true
console.log(array111.includes(NaN));//true

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN]
console.log('%s', arr1.includes('d', 3))//true
console.log('%s', arr1.includes('d', 4))//false

console.log('%s', arr1.includes('k', -1))//false
console.log('%s', arr1.includes('k', -2))//true
console.log('%s', arr1.includes('i', -3))//false

把一個(gè)字符串分割成字符串?dāng)?shù)組

split

說明:split函數(shù)兩個(gè)參數(shù)瘟判,參數(shù)1:字符串或正則表達(dá)式,從該參數(shù)指定的地方分割 (必須)角溃,參數(shù)2:可選拷获。該參數(shù)可指定返回的數(shù)組的最大長度。如果設(shè)置了該參數(shù)减细,返回的子串不會多于這個(gè)參數(shù)指定的數(shù)組匆瓜。如果沒有設(shè)置該參數(shù),整個(gè)字符串都會被分割,不考慮它的長度

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))

輸出:
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you


"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("")   //可返回 ["h", "e", "l", "l", "o"]

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

附:

注意驮吱,文中提到的所有l(wèi)odash中的函數(shù)茧妒,在使用的時(shí)候需要先

const _ = require('lodash');

一道面試題:

給定任意非負(fù)整數(shù),反復(fù)累加各位數(shù)字直到結(jié)果為個(gè)位數(shù)為止左冬。例如給定非負(fù)整數(shù)912桐筏,第一次累加9+1+2 = 12, 第二次累加1+2 = 3, 3為個(gè)位數(shù),循 環(huán)終止返回3拇砰。請編程實(shí)現(xiàn)梅忌。

function add(num){
    if(isNaN(num)) return;
    if(num<10) return num
    const res=num.toString().split('').reduce((sum,value)=>{
        return sum+Number(value)
    },0)
    return add(res);
}
add(345);
3

<center>覺得本文對你有幫助?請分享給更多人<center>

我的公眾號.jpg

歡迎大家關(guān)注我的公眾號——程序員成長指北毕匀。請自行微信搜索——“程序員成長指北”

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末铸鹰,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子皂岔,更是在濱河造成了極大的恐慌蹋笼,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件躁垛,死亡現(xiàn)場離奇詭異剖毯,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)教馆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進(jìn)店門逊谋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人土铺,你說我怎么就攤上這事胶滋。” “怎么了悲敷?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵究恤,是天一觀的道長。 經(jīng)常有香客問我后德,道長部宿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任瓢湃,我火速辦了婚禮理张,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘绵患。我一直安慰自己雾叭,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布落蝙。 她就那樣靜靜地躺著拷况,像睡著了一般作煌。 火紅的嫁衣襯著肌膚如雪掘殴。 梳的紋絲不亂的頭發(fā)上赚瘦,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天,我揣著相機(jī)與錄音奏寨,去河邊找鬼起意。 笑死,一個(gè)胖子當(dāng)著我的面吹牛病瞳,可吹牛的內(nèi)容都是我干的揽咕。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼套菜,長吁一口氣:“原來是場噩夢啊……” “哼亲善!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起逗柴,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蛹头,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后戏溺,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體渣蜗,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年旷祸,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了耕拷。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,902評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡托享,死狀恐怖骚烧,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情闰围,我是刑警寧澤赃绊,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站辫诅,受9級特大地震影響凭戴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜炕矮,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一么夫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧肤视,春花似錦档痪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春乐纸,著一層夾襖步出監(jiān)牢的瞬間衬廷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工汽绢, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留吗跋,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓宁昭,卻偏偏與公主長得像跌宛,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子积仗,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評論 2 354

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