es6--->數組

常見的僞數組對象

僞數組對象本質:必須有length屬性。
一、DOM操做返回的NodeList集合。下面的nodeList就是一個僞數組對象。
var nodeList = document.querySelectorAll('li');
二、函數內部的arguments對象。node

clipboard.png

clipboard.png


將僞數據對象轉換爲真正數據的兩種方式

方法一:擴展運算符。
使用擴展運算符的前提是:使用者必須是已經部署了Iterator接口。例如,字符串,Set結構是都具備Iterator接口的。(擴展運算符背後調用的是遍歷器接口)
從下圖能夠看出擴展運算符真的把僞數組對象轉換成了真正的數組
clipboard.pnges6

方法二:Array.from()
能夠將類數組對象和可遍歷對象都轉換爲真正的數組,任何有length屬性的對象,均可以經過Array.from()方法轉爲數組。
下圖含有es6和es5的轉換數組的方法。
clipboard.png
注意:
Array.from()還有一個用途:
將字符串轉爲數組,而後返回字符串的長度。由於它能正確的處理各類Unicode字符,能夠避免JavaScript將大於uFFFF的Unicode字符算做兩個字符的bug。數組


Array.of()

用途:將一組值轉換爲數組。
優勢:彌補了Array()的不足。
例子:
從下面例子能夠看出:
Array()若是隻有一個參數的時候,這個參數其實是指定數組的長度。和多參的時候表現不一致。
Array.of()老是返回參數值組成的數組。
clipboard.png函數


copyWithin()

用途:將指定位置的成員複製到其餘位置(會覆蓋全部的成員),並返回當前數組。
Array.prototype.copyWithin(a,b,c);其中參數a是必選的。參數b,c是可選的,能夠爲負數。測試

clipboard.png

find()和findIndex()

find():找出第一個符合條件的成員。
findIndex():找出第一個符合條件成員的位置。
優勢:這兩個方法均可以發現NaN。
find,findIndex實例
clipboard.pnges5

有關NaN的實例spa

clipboard.png


fill()

做用:用來初始化空數組比較方便。他會把數組中已有的元素會被所有抹去。
fill(a,b,c)
a:填充的數據。
b:指定填充的起始位置。
c:指定填充的結束位置。prototype

clipboard.png


es6新增遍歷數組的方法

entries():對鍵值對的遍歷。
keys():對鍵名的遍歷。
values():對鍵值的遍歷。
這三個方法都能返回一個遍歷器對象。能夠用for...of循環遍歷。
keys的用法:
clipboard.pngcode

entries的用法:
clipboard.png對象

values的用法:
clipboard.png


includes()

用途:表示某個數組是否包含給定的值。
[].includes(a)
a:測試數據。
b:起始位置,能夠是負數。
優勢:彌補了indexOf的兩個缺點,(1)不夠語義化.(2)indexof內部必須使用嚴格運算符(===)(3)indexOf不能識別NaN,可是include能夠。
關於NaN的查找
clipboard.png

查看某個元素是否存在
clipboard.png

注意:不少數組的方法,對空位的處理規則都不同,因此最好避免空位的出現。

相關文章
相關標籤/搜索