數(shù)組扁平化

數(shù)組扁平化概念

數(shù)組扁平化是指將一個(gè)多維數(shù)組變?yōu)橐痪S數(shù)組

實(shí)現(xiàn)

1. reduce

遍歷數(shù)組每一項(xiàng),若值為數(shù)組則遞歸遍歷挪略,否則concat磨确。

function flatten(arr) {  
    return arr.reduce((result, item)=> {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
    }, []);
}

reduce是數(shù)組的一種方法,它接收一個(gè)函數(shù)作為累加器桶蝎,數(shù)組中的每個(gè)值(從左到右)開始縮減驻仅,最終計(jì)算為一個(gè)值。

reduce包含兩個(gè)參數(shù):回調(diào)函數(shù)登渣,傳給total的初始值

// 求數(shù)組的各項(xiàng)值相加的和: 
arr.reduce((total, item)=> {  // total為之前的計(jì)算結(jié)果噪服,item為數(shù)組的各項(xiàng)值
    return total + item;
}, 0);

2. toString & split

調(diào)用數(shù)組的toString方法,將數(shù)組變?yōu)樽址缓笤儆胹plit分割還原為數(shù)組

function flatten(arr) {
    return arr.toString().split(',').map(function(item) {
        return Number(item);
    })
} 

因?yàn)閟plit分割后形成的數(shù)組的每一項(xiàng)值為字符串胜茧,所以需要用一個(gè)map方法遍歷數(shù)組將其每一項(xiàng)轉(zhuǎn)換為數(shù)值型

3. join & split

和上面的toString一樣粘优,join也可以將數(shù)組轉(zhuǎn)換為字符串

function flatten(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}

4. 遞歸

遞歸的遍歷每一項(xiàng)仇味,若為數(shù)組則繼續(xù)遍歷,否則concat

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

5. 擴(kuò)展運(yùn)算符

es6的擴(kuò)展運(yùn)算符能將二維數(shù)組變?yōu)橐痪S

[].concat(...[1, 2, 3, [4, 5]]); // [1, 2, 3, 4, 5]

根據(jù)這個(gè)結(jié)果我們可以做一個(gè)遍歷雹顺,若arr中含有數(shù)組則使用一次擴(kuò)展運(yùn)算符丹墨,直至沒(méi)有為止。

function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}

6. es6數(shù)組flat方法

數(shù)組的成員有時(shí)還是數(shù)組嬉愧,Array.prototype.flat()用于將嵌套的數(shù)組“拉平”贩挣。該方法返回一個(gè)新數(shù)組,對(duì)原數(shù)組沒(méi)有任何影響

console.log([1, 2, ['a', 'c']].flat()); // [1, 2, "a", "c"]

flat()默認(rèn)只會(huì)拉平一層没酣,如果想要拉平多層嵌套數(shù)組王财,可以將flat的方法的參數(shù)寫成一個(gè)整數(shù),表示想要拉平的層數(shù)裕便,默認(rèn)為1

console.log([1, 2, [3, 4, [5]]].flat());//[1, 2, 3, 4, [5]]
console.log([1, 2, [3, 4, [5]]].flat(2));//[1, 2, 3, 4, 5]

如果不管有多少層嵌套搪搏,都要轉(zhuǎn)成一堆數(shù)組,可以用Infinity關(guān)鍵字作為參數(shù)

console.log([1, [2, [3, [4, 5, ['a']]]]].flat(Infinity)); // [1, 2, 3, 4, 5, "a"]

需要注意的是闪金,如果原數(shù)組中有空位疯溺,flat()方法會(huì)跳過(guò)空位

flatMap()方法對(duì)原數(shù)組的每個(gè)成員執(zhí)行一個(gè)函數(shù)(相當(dāng)于執(zhí)行Array.prototype.map()),然后對(duì)返回值組成的數(shù)組執(zhí)行flat()方法哎垦,該方法返回一個(gè)新數(shù)組囱嫩,不改變?cè)瓟?shù)組。

console.log([1, 2, 3].flatMap((x) => [x, x * x]));//[1, 1, 2, 4, 3, 9]
flatMap()只能展開一層數(shù)組

  console.log([1, 2, 3].flatMap((x) => [
      [x, x * x]
  ])); //[[1, 1], [2, 4], [3, 9]]

flatMap()方法的參數(shù)是一個(gè)遍歷函數(shù)漏设,該函數(shù)可以接受三個(gè)參數(shù)墨闲,分別是當(dāng)前數(shù)組成員,當(dāng)前數(shù)組成員位置(從0開始)郑口,原數(shù)組鸳碧。而flatMap()方法還可以有第二個(gè)參數(shù),用來(lái)綁定遍歷函數(shù)里面的this.

總結(jié)

核心也只有一個(gè):

遍歷數(shù)組arr犬性,若arr[i]為數(shù)組則遞歸遍歷瞻离,直至arr[i]不為數(shù)組然后與之前的結(jié)果concat。

數(shù)組的空位

數(shù)組的空位值就是數(shù)組的某一個(gè)位置沒(méi)有任何值乒裆。比如套利,Array構(gòu)造函數(shù)返回的數(shù)組都是空位

console.log(Array(3)); // [, , ,]

注意『姿#空位不是undefined肉迫,一個(gè)位置的值等于undefined,依然是有值的稿黄,空位是指沒(méi)有任何值喊衫。
由于數(shù)組的眾多方法對(duì)空位的處理規(guī)則非常不統(tǒng)一,所以建議避免出現(xiàn)空位

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末杆怕,一起剝皮案震驚了整個(gè)濱河市族购,隨后出現(xiàn)的幾起案子鼻听,更是在濱河造成了極大的恐慌,老刑警劉巖联四,帶你破解...
    沈念sama閱讀 219,110評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件撑碴,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡朝墩,警方通過(guò)查閱死者的電腦和手機(jī)醉拓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)收苏,“玉大人亿卤,你說(shuō)我怎么就攤上這事÷拱裕” “怎么了排吴?”我有些...
    開封第一講書人閱讀 165,474評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)懦鼠。 經(jīng)常有香客問(wèn)我钻哩,道長(zhǎng),這世上最難降的妖魔是什么肛冶? 我笑而不...
    開封第一講書人閱讀 58,881評(píng)論 1 295
  • 正文 為了忘掉前任街氢,我火速辦了婚禮,結(jié)果婚禮上睦袖,老公的妹妹穿的比我還像新娘珊肃。我一直安慰自己,他們只是感情好馅笙,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,902評(píng)論 6 392
  • 文/花漫 我一把揭開白布伦乔。 她就那樣靜靜地躺著,像睡著了一般董习。 火紅的嫁衣襯著肌膚如雪烈和。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,698評(píng)論 1 305
  • 那天阱飘,我揣著相機(jī)與錄音斥杜,去河邊找鬼虱颗。 笑死沥匈,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的忘渔。 我是一名探鬼主播高帖,決...
    沈念sama閱讀 40,418評(píng)論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼畦粮!你這毒婦竟也來(lái)了散址?” 一聲冷哼從身側(cè)響起乖阵,我...
    開封第一講書人閱讀 39,332評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎预麸,沒(méi)想到半個(gè)月后瞪浸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,796評(píng)論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡吏祸,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,968評(píng)論 3 337
  • 正文 我和宋清朗相戀三年对蒲,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贡翘。...
    茶點(diǎn)故事閱讀 40,110評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蹈矮,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鸣驱,到底是詐尸還是另有隱情泛鸟,我是刑警寧澤,帶...
    沈念sama閱讀 35,792評(píng)論 5 346
  • 正文 年R本政府宣布踊东,位于F島的核電站北滥,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏闸翅。R本人自食惡果不足惜碑韵,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,455評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望缎脾。 院中可真熱鬧祝闻,春花似錦、人聲如沸遗菠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)辙纬。三九已至豁遭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間贺拣,已是汗流浹背蓖谢。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留譬涡,地道東北人闪幽。 一個(gè)月前我還...
    沈念sama閱讀 48,348評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像涡匀,于是被迫代替她去往敵國(guó)和親盯腌。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,047評(píng)論 2 355

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