ES6中擴展運算符的使用對數組的簡化操作

Q1: 求數組中最大值
js中不提供求數組最大元素的函數,Math,.max也不接受數組作為參數
apply 接受數組參數佳镜,把數組參數拆開,做了[args] -> arguments的動作

//ES6
Math.max(...[1,22,567,34,22])
//等同于
Math.max(1,22,567,34,22)
//ES5的做法
Math.max.apply(null,[1,22,567,34,22])

Q2:將一個數組push到另一個數組

//ES6
let arr1  = [0,1,2];
let arr2 = [3,4,5];
arr1.push(...arr2);
//ES5
Array.prototype.push.apply(arr1.arr2);

Q3 復制數組
數組是復合的數據類型烤低,直接復制的話吃环,只是復制 了指向底層數據結構的指針计露,而不是克隆一個全新的數組
concat不改變原數組啤挎,返回兩個數組連接之后的新數組,ES5使用猥瑣的方法復制數組

//ES6
const a1 = [1,2];
//方式一
const a2 = [...a1];
//方式二
const [...a2] = a1;
//ES5
const a2 = a1.concat();

Q4: 合并數組
這兩種方法都是淺拷貝炭玫,因為他們的成員是對原數組的引用奈嘿,如果修改了原數組的成員,會同步反映到新數組吞加。

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9];
//ES6
[...arr1,...arr2,...arr3];
//ES5
arr1.concat(arr2,arr3);

Q5: 與結構賦值結合裙犹,用于生成數組
數組的slice(from,end)方法,從原數組截取from到end(不包含)的元素衔憨,返回一個新的數組叶圃。

//ES6
[a,...rest] = list;
//ES5
a = list[0],
rest = list.slice(1);

Q6: 字符串轉為數組

[..."hello"]
// [ "h", "e", "l", "l", "o" ]

Q7: 將類數組對象轉化為真正的數組
實現了Iterator接口的對象可以用擴展運算符轉為真正的數組
沒有實現Iterator接口的類數組對象可以用Array.from轉為真正的數組

//實現了Iterator的對象
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
//未實現Iterator的對象
let arrayLike = {
  '0' : 'a',
  '1' : 'b',
  '2' : 'c',
  length: 3
};
let arr = [...arrayLike];
// TypeError: Cannot spread non-iterable object.
let arr = Array.from(arrayLike);
//ES5
var arr = [].slice.call(arrayLike);

Q8:Map和Set結構,Generator函數
擴展運算符內部調用的是數據結構的Iterator接口巫财,只要具有Iterator接口的對象盗似,都可以使用擴展運算符。
Generator函數運行后平项,返回一個遍歷器對象,因此也可以是用擴展運算符悍及。

let map = new Map([
 [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr = [...map.keys];//[1,2,3]
//Generator
const go = function*(){
  yield 1;
yield 2;
yield 3;
};
[...go()] //[1,2,3]
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末闽瓢,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子心赶,更是在濱河造成了極大的恐慌扣讼,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件缨叫,死亡現場離奇詭異椭符,居然都是意外死亡,警方通過查閱死者的電腦和手機耻姥,發(fā)現死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進店門销钝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人琐簇,你說我怎么就攤上這事蒸健。” “怎么了婉商?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵似忧,是天一觀的道長。 經常有香客問我丈秩,道長盯捌,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任蘑秽,我火速辦了婚禮饺著,結果婚禮上箫攀,老公的妹妹穿的比我還像新娘。我一直安慰自己瓶籽,他們只是感情好匠童,可當我...
    茶點故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著塑顺,像睡著了一般汤求。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上严拒,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天扬绪,我揣著相機與錄音,去河邊找鬼裤唠。 笑死挤牛,一個胖子當著我的面吹牛,可吹牛的內容都是我干的种蘸。 我是一名探鬼主播墓赴,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼航瞭!你這毒婦竟也來了诫硕?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤刊侯,失蹤者是張志新(化名)和其女友劉穎章办,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體滨彻,經...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡藕届,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了亭饵。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片休偶。...
    茶點故事閱讀 39,953評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖冬骚,靈堂內的尸體忽然破棺而出椅贱,到底是詐尸還是另有隱情,我是刑警寧澤只冻,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布庇麦,位于F島的核電站,受9級特大地震影響喜德,放射性物質發(fā)生泄漏山橄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一舍悯、第九天 我趴在偏房一處隱蔽的房頂上張望航棱。 院中可真熱鬧睡雇,春花似錦、人聲如沸饮醇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽朴艰。三九已至观蓄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間祠墅,已是汗流浹背侮穿。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留毁嗦,地道東北人亲茅。 一個月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像狗准,于是被迫代替她去往敵國和親克锣。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,901評論 2 355

推薦閱讀更多精彩內容