數(shù)組的擴展

如果將擴展運算符用于數(shù)組賦值男图,只能放在參數(shù)的最后一位锰霜,否則會報錯筹误。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 報錯

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報錯

擴展運算符還可以將字符串轉(zhuǎn)為真正的數(shù)組。

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

上面的寫法癣缅,有一個重要的好處厨剪,那就是能夠正確識別四個字節(jié)的 Unicode 字符。

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3
實現(xiàn)了 Iterator 接口的對象

任何 Iterator 接口的對象友存,都可以用擴展運算符轉(zhuǎn)為真正的數(shù)組祷膳。

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

上面代碼中,querySelectorAll方法返回的是一個nodeList對象屡立。它不是數(shù)組直晨,而是一個類似數(shù)組的對象。這時膨俐,擴展運算符可以將其轉(zhuǎn)為真正的數(shù)組勇皇,原因就在于NodeList對象實現(xiàn)了 Iterator 。對于那些沒有部署 Iterator 接口的類似數(shù)組的對象吟策,擴展運算符就無法將其轉(zhuǎn)為真正的數(shù)組儒士。

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];

上面代碼中的止,arrayLike是一個類似數(shù)組的對象檩坚,但是沒有部署 Iterator 接口,擴展運算符就會報錯诅福。這時匾委,可以改為使用Array.from方法將arrayLike轉(zhuǎn)為真正的數(shù)組。

Array.from()

Array.from方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組:類似數(shù)組的對象(array-like object)和可遍歷(iterable)的對象(包括ES6新增的數(shù)據(jù)結(jié)構(gòu)Set和Map)氓润。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

擴展運算符背后調(diào)用的是遍歷器接口(Symbol.iterator)赂乐,如果一個對象沒有部署這個接口,就無法轉(zhuǎn)換咖气。Array.from方法還支持類似數(shù)組的對象挨措。所謂類似數(shù)組的對象,本質(zhì)特征只有一點崩溪,即必須有l(wèi)ength屬性浅役。因此,任何有l(wèi)ength屬性的對象伶唯,都可以通過Array.from方法轉(zhuǎn)為數(shù)組觉既,而此時擴展運算符就無法轉(zhuǎn)換。

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]

對于還沒有部署該方法的瀏覽器,可以用Array.prototype.slice方法替代瞪讼。

const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();

Array.from還可以接受第二個參數(shù)钧椰,作用類似于數(shù)組的map方法,用來對每個元素進行處理符欠,將處理后的值放入返回的數(shù)組嫡霞。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

Array.of()

Array.of方法用于將一組值,轉(zhuǎn)換為數(shù)組希柿。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

這個方法的主要目的秒际,是彌補數(shù)組構(gòu)造函數(shù)Array()的不足。因為參數(shù)個數(shù)的不同狡汉,會導(dǎo)致Array()的行為有差異娄徊。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

上面代碼中,Array方法沒有參數(shù)盾戴、一個參數(shù)寄锐、三個參數(shù)時,返回結(jié)果都不一樣尖啡。只有當(dāng)參數(shù)個數(shù)不少于2個時橄仆,Array()才會返回由參數(shù)組成的新數(shù)組。參數(shù)個數(shù)只有一個時衅斩,實際上是指定數(shù)組的長度盆顾。
Array.of基本上可以用來替代Array()或new Array(),并且不存在由于參數(shù)不同而導(dǎo)致的重載畏梆。它的行為非常統(tǒng)一您宪。

copyWithin()

數(shù)組實例的copyWithin方法,在當(dāng)前數(shù)組內(nèi)部奠涌,將指定位置的成員復(fù)制到其他位置(會覆蓋原有成員)宪巨,然后返回當(dāng)前數(shù)組。也就是說溜畅,使用這個方法捏卓,會修改當(dāng)前數(shù)組。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三個參數(shù)慈格。
target(必需):從該位置開始替換數(shù)據(jù)怠晴。
start(可選):從該位置開始讀取數(shù)據(jù),默認為0浴捆。如果為負值蒜田,表示倒數(shù)。
end(可選):到該位置前停止讀取數(shù)據(jù)汤功,默認等于數(shù)組長度物邑。如果為負值,表示倒數(shù)。

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
// 將3號位復(fù)制到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相當(dāng)于3號位色解,-1相當(dāng)于4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 將3號位復(fù)制到0號位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 將2號位到數(shù)組結(jié)束茂嗓,復(fù)制到0號位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// 對于沒有部署 TypedArray 的 copyWithin 方法的平臺
// 需要采用下面的寫法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

find() 和 findIndex()

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市科阎,隨后出現(xiàn)的幾起案子述吸,更是在濱河造成了極大的恐慌,老刑警劉巖锣笨,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蝌矛,死亡現(xiàn)場離奇詭異,居然都是意外死亡错英,警方通過查閱死者的電腦和手機入撒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來椭岩,“玉大人茅逮,你說我怎么就攤上這事∨懈纾” “怎么了献雅?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長塌计。 經(jīng)常有香客問我挺身,道長,這世上最難降的妖魔是什么锌仅? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任章钾,我火速辦了婚禮,結(jié)果婚禮上技扼,老公的妹妹穿的比我還像新娘伍玖。我一直安慰自己嫩痰,他們只是感情好剿吻,可當(dāng)我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著串纺,像睡著了一般丽旅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上纺棺,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天榄笙,我揣著相機與錄音,去河邊找鬼祷蝌。 笑死茅撞,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播米丘,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼剑令,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了拄查?” 一聲冷哼從身側(cè)響起吁津,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎堕扶,沒想到半個月后碍脏,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡稍算,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年典尾,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片糊探。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡急黎,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出侧到,到底是詐尸還是另有隱情勃教,我是刑警寧澤,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布匠抗,位于F島的核電站故源,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏汞贸。R本人自食惡果不足惜绳军,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望矢腻。 院中可真熱鬧门驾,春花似錦、人聲如沸多柑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽竣灌。三九已至聂沙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間初嘹,已是汗流浹背及汉。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留屯烦,地道東北人坷随。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓房铭,卻偏偏與公主長得像,于是被迫代替她去往敵國和親温眉。 傳聞我的和親對象是個殘疾皇子育叁,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,925評論 2 344

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

  • 擴展運算符 擴展運算符(spread)是三個點(...)。它好比 rest 參數(shù)的逆運算芍殖,將一個數(shù)組轉(zhuǎn)為用逗號分隔...
    yujiawei007閱讀 166評論 0 0
  • 擴展運算符(...) 基本用法 該運算符作用正好與rest參數(shù)作用相反豪嗽,用于展開數(shù)組為參數(shù)序列,用逗號分割豌骏。 應(yīng)用...
    秋楓殘紅閱讀 196評論 0 0
  • Array.from() Array.from 方法用于將兩類對象轉(zhuǎn)換成真正的數(shù)組類似數(shù)組的對象(array-li...
    CandyTong_閱讀 274評論 0 1
  • 數(shù)組的擴展 1.Array.from() 用于將兩類對象轉(zhuǎn)換為真正的數(shù)組:類似數(shù)組的對象和可遍歷的對象(包括es6...
    ningluo閱讀 398評論 0 1
  • 大部分人提起兒童編程龟梦,就會想到Scratch,然而當(dāng)兒童升入中學(xué)窃躲,學(xué)習(xí)什么語言比較合適呢计贰?我認為,Python是未...
    少兒創(chuàng)客閱讀 4,707評論 2 6