類數(shù)組對象(Array-like)轉(zhuǎn)化為數(shù)組(Array)的幾種方法

偽數(shù)組對象(Array-like):擁有一個 length 屬性和若干索引屬性的任意對象贼陶。
工作中碰到過幾次需要將類數(shù)組對象轉(zhuǎn)化為數(shù)組處理的情況胸竞,面試時也很可能被問到着撩,因為這一個題目同時考察了以下幾點:

  • 數(shù)組的方法和原型鏈:Array.prototype上的slice交掏、splice和concat方法朦拖;
  • this指向綁定:call和apply;
  • es6掌握情況:Array.from();

下面我們就來總結(jié)一下類數(shù)組對象(Array-like)轉(zhuǎn)化為數(shù)組(Array)的幾種方法:

1.slice

基礎(chǔ)語法:

slice() 方法返回一個新的數(shù)組對象驻襟,這一對象是一個由 begin 和 end 決定的原數(shù)組的淺拷貝(包括 begin夺艰,不包括end)。原始數(shù)組不會被改變沉衣。

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
轉(zhuǎn)化類數(shù)組

slice 方法可以用來將一個類數(shù)組(Array-like)對象/集合轉(zhuǎn)換成一個新數(shù)組郁副。你只需將該方法綁定到這個對象上。 一個函數(shù)中的 arguments 就是一個類數(shù)組對象的例子豌习。

function list() {
  return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); 
結(jié)果: [1, 2, 3]
Array.prototype.slice.call({0:0,1:1,2:2,3:3,4:4,length:5})
結(jié)果:[0, 1, 2, 3,4]
Array.prototype.slice.call({0:0,1:1,2:2,3:3,4:4,length:5},1,3)
結(jié)果:[1, 2]

你也可以簡單的使用 [].slice.call(arguments) 來代替

2.splice

基礎(chǔ)語法:

splice() 方法通過刪除或替換現(xiàn)有元素或者原地添加新的元素來修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容存谎。此方法會改變原數(shù)組。

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']
轉(zhuǎn)化類數(shù)組

和slice相似肥隆,不同的是會改變原對象既荚,并且第一個參數(shù)(開始位置)必須傳:

Array.prototype.splice.call({0:0,1:1,length:2},0);
結(jié)果:[0,1]
Array.prototype.splice.call({0:0,1:1,2:2,3:3,4:4,length:5},1,3)
結(jié)果:[1, 2, 3]

concat

基礎(chǔ)語法:

concat() 方法用于合并兩個或多個數(shù)組。此方法不會更改現(xiàn)有數(shù)組栋艳,而是返回一個新數(shù)組恰聘。

['a', 'b', 'c'].concat(['d', 'e', 'f']);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

[1, 2, 3].concat( [4, 5, 6], [7, 8, 9]);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

['a', 'b', 'c'].concat(1, [2, 3]);
// results in ['a', 'b', 'c', 1, 2, 3]
轉(zhuǎn)化類數(shù)組

這里利用apply可以把類數(shù)組對象分解成多個參數(shù)傳入concat方法:

Array.concat.apply([], {0:0,1:1,2:2,length:3});
結(jié)果:[0, 1, 2]
等價于:
[].concat(0,1,2)

4.Es6 Array.from

Array.from() 方法從一個類似數(shù)組或可迭代對象中創(chuàng)建一個新的,淺拷貝的數(shù)組實例吸占。 可以通過以下方式來創(chuàng)建數(shù)組對象:

  • 偽數(shù)組對象(擁有一個 length 屬性和若干索引屬性的任意對象)
  • 可迭代對象(可以獲取對象中的元素,如 Map和 Set 等)
Array.from('foo'); 
轉(zhuǎn)化數(shù)組:["f", "o", "o"]

let s = new Set(['foo', window]); 
Array.from(s); 
轉(zhuǎn)化set:["foo", window]

let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); 
轉(zhuǎn)化map:[[1, 2], [2, 4], [4, 8]]

function f() {
  return Array.from(arguments);
}
f(1, 2, 3);
轉(zhuǎn)化Array-like: [1, 2, 3]

Array.from的方便之處是它的第二個參數(shù)可以設(shè)置一個函數(shù)憨琳,新數(shù)組中的每個元素會執(zhí)行該函數(shù):

Array.from([1, 2, 3], x => x + x);  
結(jié)果:[2, 4, 6]

Array.from({length: 5}, (v, i) => i);
結(jié)果: [0, 1, 2, 3, 4]

示例:合并數(shù)組并去重

利用set中元素的唯一性,和Array.from可以把set轉(zhuǎn)化為array的能力旬昭,我們可以封裝一個數(shù)組去重的函數(shù):

function combine(){ 
    //Array-like to Array
    let arr = [].concat.apply([], arguments); 
    return Array.from(new Set(arr));
} 

var m = [1, 2, 2], n = [2,3,3], k = [1, 2, 6]; 
combine(m,n)                
結(jié)果:[1, 2, 3]

combine(m,n,k)
結(jié)果:[1, 2, 3, 6]

寫在最后

注意以上方式都是淺拷貝篙螟,處理引用類型時需要多加小心。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末问拘,一起剝皮案震驚了整個濱河市遍略,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌骤坐,老刑警劉巖绪杏,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異纽绍,居然都是意外死亡蕾久,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進(jìn)店門拌夏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來僧著,“玉大人,你說我怎么就攤上這事障簿№镉蓿” “怎么了?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵站故,是天一觀的道長皆怕。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么愈腾? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任憋活,我火速辦了婚禮,結(jié)果婚禮上虱黄,老公的妹妹穿的比我還像新娘悦即。我一直安慰自己,他們只是感情好礁鲁,可當(dāng)我...
    茶點故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著赁豆,像睡著了一般仅醇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上魔种,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天析二,我揣著相機(jī)與錄音,去河邊找鬼节预。 笑死叶摄,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的安拟。 我是一名探鬼主播蛤吓,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼糠赦!你這毒婦竟也來了会傲?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤拙泽,失蹤者是張志新(化名)和其女友劉穎淌山,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體顾瞻,經(jīng)...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡泼疑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了荷荤。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片退渗。...
    茶點故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蕴纳,靈堂內(nèi)的尸體忽然破棺而出氓辣,到底是詐尸還是另有隱情,我是刑警寧澤袱蚓,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布钞啸,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏体斩。R本人自食惡果不足惜梭稚,卻給世界環(huán)境...
    茶點故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望絮吵。 院中可真熱鬧弧烤,春花似錦、人聲如沸蹬敲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽伴嗡。三九已至急波,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間瘪校,已是汗流浹背澄暮。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留阱扬,地道東北人泣懊。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像麻惶,于是被迫代替她去往敵國和親馍刮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,675評論 2 359

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