ES6語法——數(shù)組Array擴(kuò)展

一、 擴(kuò)展運(yùn)算符
????????擴(kuò)展運(yùn)算符(spread)是三個點(diǎn)(...)。它好比 rest 參數(shù)(將多余的參數(shù)轉(zhuǎn)換成數(shù)組)的逆運(yùn)算,將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列佃蚜。
? ? ? ? 擴(kuò)展運(yùn)算符的使用場景:
? ? ? ? (一)擴(kuò)展運(yùn)算符與正常的函數(shù)參數(shù)結(jié)合使用

? ? ? ? (二)擴(kuò)展運(yùn)算符后面還可以放置表達(dá)式

? ? ? ? (三)如果擴(kuò)展運(yùn)算符后面是一個空數(shù)組,則不產(chǎn)生任何效果

? ? ? ? (四)替代數(shù)組的 apply 方法

????????(五)簡化求出一個數(shù)組最大值與最小值

? ? ? ? (六)復(fù)制數(shù)組

? ? ? ? (七)合并數(shù)組

????????(八)與解構(gòu)賦值結(jié)合

? ? ? ? (九)將字符串轉(zhuǎn)換成數(shù)組(擴(kuò)展運(yùn)算符還可以將字符串轉(zhuǎn)為真正的數(shù)組)

? ? ? ? (十)實(shí)現(xiàn)了 Iterator 接口的對象

? ? ? ? (十一)Map 和 Set 結(jié)構(gòu)夏醉,Generator 函數(shù)

? ? ? ? 個人理解爽锥,這個擴(kuò)展運(yùn)算符 ... 有以下幾種使用情況
? ? ? ? (1)在函數(shù)參數(shù)括號里面就是做rest參數(shù),是將多余的實(shí)參轉(zhuǎn)換成數(shù)組畔柔,且rest參數(shù)只能在最后一位
? ? ? ? (2)...緊跟一個顯示聲明了的變量氯夷,說明這是解構(gòu)賦值,這個變量返回一個數(shù)組靶擦,這個數(shù)組接收多余的參數(shù)
? ? ? ? (3)... 緊跟一個數(shù)組腮考,擴(kuò)展運(yùn)算符會將數(shù)組轉(zhuǎn)換成有序的參數(shù)列表
? ? ? ? (4)... 緊跟一個字符串,擴(kuò)展運(yùn)算符會將這個字符串轉(zhuǎn)換成數(shù)組
? ? ? ? (5)... 緊跟一個具有Iterator接口的對象玄捕,擴(kuò)展運(yùn)算符會將這個對象轉(zhuǎn)換成數(shù)組
二踩蔚、 Array.from()
? ??????Array.from方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組:類似數(shù)組的對象(array-like object)和可遍歷(iterable)的對象(包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map)。

????????值得提醒的是枚粘,擴(kuò)展運(yùn)算符(...)也可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組馅闽。其實(shí)擴(kuò)展運(yùn)算符(...)和Array.from()這兩種方式的原理都是利用對象內(nèi)部的iterator遍歷接口去實(shí)現(xiàn)的。
? ? ? ? 下面列舉Array.from()方法使用的注意事項(xiàng):
? ??????(一)?Array.from()方法可以將具有l(wèi)ength屬性的對象轉(zhuǎn)換成數(shù)組
? ??????(二)Array.from()還可以接受第二個參數(shù)馍迄,作用類似于數(shù)組的map方法福也,用來對每個元素進(jìn)行處理,將處理后的值放入返回的數(shù)組攀圈。
? ??????(三)Array.from()方法接收第三個參數(shù):如果Array.from接收的第二個類似map函數(shù)的參數(shù)中使用到了this關(guān)鍵字的話暴凑, Array.from()還可以接收第三個參數(shù)來綁定this值
? ??????(四)Array.from()的另一個應(yīng)用是,將字符串轉(zhuǎn)為數(shù)組赘来,然后返回字符串的長度现喳。因?yàn)樗苷_處理各種 Unicode 字符,可以避免 JavaScript 將大于 \uFFFF的 Unicode 字符犬辰,算作兩個字符的 bug嗦篱。

三、 Array.of()
? ??????Array.of方法用于將一組值幌缝,轉(zhuǎn)換為數(shù)組
? ? ? ? ?Array.of方法用于彌補(bǔ)new Array() 和Array()方法生成數(shù)組的不足默色,Array方法沒有參數(shù)、一個參數(shù)、三個參數(shù)時腿宰,返回結(jié)果都不一樣。只有當(dāng)參數(shù)個數(shù)不少于 2 個時缘厢,new Array()和Array()才會返回由參數(shù)組成的新數(shù)組吃度。參數(shù)個數(shù)只有一個時,實(shí)際上是指定數(shù)組的長度贴硫。

????????Array.of總是返回參數(shù)值組成的數(shù)組椿每。如果沒有參數(shù),就返回一個空數(shù)組

四英遭、 數(shù)組實(shí)例的 copyWithin()
????????數(shù)組實(shí)例的copyWithin()方法间护,在當(dāng)前數(shù)組內(nèi)部,將指定位置的成員復(fù)制到其他位置(會覆蓋原有成員)挖诸,然后返回當(dāng)前數(shù)組汁尺。也就是說,使用這個方法多律, 會修改當(dāng)前數(shù)組痴突。
? ? ? ? target(必需):從該位置開始替換數(shù)據(jù)。
????????start(可選):從該位置開始讀取數(shù)據(jù)狼荞,默認(rèn)為 0辽装。如果為負(fù)值,表示倒數(shù)相味。
????????end(可選):到該位置前停止讀取數(shù)據(jù)拾积,默認(rèn)等于數(shù)組長度。如果為負(fù)值丰涉,表示倒數(shù)拓巧。如果不設(shè)置end就默認(rèn)到數(shù)組的末尾端。

? ?????上面代碼表示將從 4 號(包括4號位本身)位直到8號位之前(不包括8號位本身)的昔搂,復(fù)制到從 2 號位(包括其本身)開始的位置玲销,結(jié)果覆蓋了原來的3,4,5,3。
?????????這三個參數(shù)都應(yīng)該是數(shù)值摘符,如果不是贤斜,會自動轉(zhuǎn)為數(shù)值。
五逛裤、數(shù)組實(shí)例的 find() 和 findIndex()
? ? ? ? (一)find(callback(value,index,arr))方法
? ? ? ? 官方版解釋:數(shù)組實(shí)例的find()方法瘩绒,用于找出第一個符合條件的數(shù)組成員。它的參數(shù)是一個回調(diào)函數(shù)带族,所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)锁荔,直到找出第一個返回值為 true的成員,然后返回該成員蝙砌。如果沒有符合條件的成員阳堕,則返回undefined跋理。
? ???????個人理解:find(callback),找到第一個符合callback函數(shù)的成員恬总,find(callback)方法返回第一個使callback返回值為true的數(shù)組成員前普,否則返回undefined。
? ? ? ? 通俗的講壹堰,find方法就是返回第一個符合回調(diào)函數(shù)條件的那個數(shù)組成員
? ? ? ? (二)findIndex(callback(value,index,arr))
? ??????數(shù)組實(shí)例的findIndex方法的用法與find方法非常類似拭卿,返回第一個符合條件的數(shù)組成員的位置,如果所有成員都不符合條件贱纠,則返回-1峻厚。
?????????值得注意的是:
? ? ? ? (1)find()和findInde()這兩個方法接收的回調(diào)函數(shù)可以接收三個參數(shù): 依次為當(dāng)前的值value、當(dāng)前的位置index和原數(shù)組Array谆焊。
? ? ? ? (2)find()和findInde()這兩個方法還除了接收第一個回調(diào)callback函數(shù)惠桃,還可以接收第二個參數(shù)來綁定這個回調(diào)函數(shù)callback的this對象。
? ? ? ? (3)find()和findInde()這兩個方法都可以發(fā)現(xiàn)NaN懊渡,彌補(bǔ)了數(shù)組的indexOf方法的不足刽射。

????????這里使用到對象新增的方法Object.is()方法,這個方法就是判斷兩個值是不是相等剃执,特性是:NaN===NaN為true +0===-0為false

六誓禁、 數(shù)組實(shí)例的 fill()
? ??????fill()方法使用給定值(這個值是第一個參數(shù)的位置),填充一個數(shù)組肾档。

????????上面代碼表明摹恰,fill方法用于空數(shù)組的初始化非常方便。數(shù)組中已有的元素怒见,會被全部抹去俗慈。
????????fill方法還可以接受第二個和第三個參數(shù),用于指定填充的起始位置(包含遣耍,從這個位置開始)和結(jié)束位置(不包含這個位置闺阱,在這個位置之前結(jié)束)。

? ??????上面代碼顯示:fill()從 1 號位開始舵变,向原數(shù)組填充 7酣溃,到 3號位之前(不包括3號位)結(jié)束。

七纪隙、 數(shù)組實(shí)例的 entries()赊豌,keys() 和 values()
?????????ES6 提供三個新的方法——entries(),keys()和values()——用于遍歷數(shù)組绵咱。它們都返回一個遍歷器對象碘饼,可以用 for...of循環(huán)進(jìn)行遍歷,唯一的區(qū)別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷艾恼,entries()是對鍵值對的遍歷住涉。

????????如果不使用for...of循環(huán),可以手動調(diào)用遍歷器Iterator對象的next方法蒂萎,進(jìn)行遍歷秆吵。

????????entries()方法返回的是包含鍵值對的遍歷器Iterator對象,這個遍歷器的next方法返回的是一個對象(包含value屬性和done屬性)五慈,這個對象的value就是數(shù)組的每一項(xiàng)的鍵值對(詳見Iterator遍歷器)

八、數(shù)組實(shí)例的 includes()?
? ??????Array.prototype.includes方法返回一個布爾值主穗,表示某個數(shù)組是否包含給定的值泻拦,與字符串的includes方法類似

? ? ? ? 需要注意的是:
? ? ? ? (一)includes()方法,傳入的第二個參數(shù)表示搜索的起始位置忽媒,默認(rèn)為0争拐。如果第二個參數(shù)為負(fù)數(shù),則表示倒數(shù)的位置晦雨,如果這時它大于數(shù)組長度(比如第二個參數(shù)為-4架曹,但 數(shù)組長度為3),則會重置為從0開始闹瞧。
? ? ? ? (二)關(guān)于NaN的問題:
? ? ? ? 在ES6之前绑雄,檢測一個數(shù)組中是否含有某個元素的話,采用indexOf()方法奥邮,含有就返回找到這個元素的第一個位置万牺,沒有找到就返回-1(使用起來就得判斷返回值是否不等于-1)。最主要的是indexOf()方法的內(nèi)部采用嚴(yán)格的(===)運(yùn)算符進(jìn)行判斷洽腺,這會導(dǎo)致對NaN進(jìn)行誤判(NaN==NaN=>false JavaScript比較特殊的自己本身不等于自己的)
? ? ? ? ES6新增的includes()方法可以正確的判斷出數(shù)組中是否含有NaN這個元素

九脚粟、數(shù)組的空位
????????含義:數(shù)組的空位指,數(shù)組的某一個位置沒有任何值蘸朋。
? ? ? ? 強(qiáng)調(diào)的是空位是沒有任何值的核无,空位不是undefined,也不是null藕坯,也不是0

????????ES5以及ES6對空位的處理:
? ? ? ? (一)ES5 對空位的處理团南,已經(jīng)很不一致了,大多數(shù)情況下會忽略空位堕担。
? ? ? ? 1.? forEach(), filter(), every() 和some()都會跳過空位已慢。
? ? ? ? 2.? map()會跳過空位,但會保留這個值
? ? ? ? 3.? join()和toString()會將空位視為undefined霹购,而undefined和null會被處理成空字符串佑惠。
? ? ? ? (二)ES6對空位的處理:
? ? ? ? 1.? ES6 則是明確將空位轉(zhuǎn)為undefined
? ? ? ? 2.? ES6不同方法之間對于空位的處理還是有些許的差異的,例如:
? ? ? ? ? ? ?(1)? Array.from方法會將數(shù)組的空位,轉(zhuǎn)為undefined膜楷,也就是說旭咽,Array.from()這個方法不會忽略空位。
? ? ? ? ? ? (2)? 擴(kuò)展運(yùn)算符(...)也會將空位轉(zhuǎn)為undefined赌厅。
? ? ? ? ? ? (3)? copyWithin()會連空位一起拷貝穷绵。
? ? ? ? ? ? (4)??fill()會將空位視為正常的數(shù)組位置。
? ? ? ? ? ? (5)??for...of循環(huán)也會遍歷空位特愿。
? ? ? ? ? ? (6)??entries()仲墨、keys()、values()揍障、find()和findIndex()會將空位處理成undefined目养。

? ? ? ? 由于處理的標(biāo)準(zhǔn)各有差異,建議避免出現(xiàn)空位

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末毒嫡,一起剝皮案震驚了整個濱河市癌蚁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌兜畸,老刑警劉巖努释,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異咬摇,居然都是意外死亡伐蒂,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進(jìn)店門菲嘴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來饿自,“玉大人,你說我怎么就攤上這事龄坪≌汛疲” “怎么了?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵健田,是天一觀的道長烛卧。 經(jīng)常有香客問我,道長妓局,這世上最難降的妖魔是什么总放? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮好爬,結(jié)果婚禮上局雄,老公的妹妹穿的比我還像新娘。我一直安慰自己存炮,他們只是感情好炬搭,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布蜈漓。 她就那樣靜靜地躺著,像睡著了一般宫盔。 火紅的嫁衣襯著肌膚如雪融虽。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天灼芭,我揣著相機(jī)與錄音有额,去河邊找鬼。 笑死彼绷,一個胖子當(dāng)著我的面吹牛巍佑,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播寄悯,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼句狼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了热某?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤胳螟,失蹤者是張志新(化名)和其女友劉穎昔馋,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體糖耸,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡秘遏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了嘉竟。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片邦危。...
    茶點(diǎn)故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖舍扰,靈堂內(nèi)的尸體忽然破棺而出倦蚪,到底是詐尸還是另有隱情,我是刑警寧澤边苹,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布陵且,位于F島的核電站,受9級特大地震影響个束,放射性物質(zhì)發(fā)生泄漏慕购。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一茬底、第九天 我趴在偏房一處隱蔽的房頂上張望沪悲。 院中可真熱鬧,春花似錦阱表、人聲如沸殿如。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽握截。三九已至飞崖,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間谨胞,已是汗流浹背固歪。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留胯努,地道東北人牢裳。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像叶沛,于是被迫代替她去往敵國和親蒲讯。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評論 2 345

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

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line)灰署,也就是一...
    悟名先生閱讀 4,116評論 0 13
  • 擴(kuò)展運(yùn)算符 含義 擴(kuò)展運(yùn)算符是三個點(diǎn)(...)判帮。它好比rest參數(shù)的逆運(yùn)算,將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列溉箕。 ...
    oWSQo閱讀 295評論 0 0
  • 三晦墙,字符串?dāng)U展 3.1 Unicode表示法 ES6 做出了改進(jìn),只要將碼點(diǎn)放入大括號肴茄,就能正確解讀該字符晌畅。有了這...
    eastbaby閱讀 1,514評論 0 8
  • 如何獲得快樂平安? 001思想決定人生 愛默生說:“人是他自己思想的產(chǎn)物寡痰】剐ǎ” 人可以通過改變想法來克服憂慮、恐懼拦坠、...
    歡歡愛xiao閱讀 346評論 0 3
  • 假如我們相遇连躏,肯定一眼就能認(rèn)出彼此——《你的名字》 周末,躺在床上和周公一起冥思贪婉,被大學(xué)時代的密友奪命追魂call...
    浮木無憂閱讀 248評論 0 0