本文主要和大家介紹了關於JS從非數組物件轉數組的一些方法,分別是Array.prototype.slice.call(obj)、Array.from(obj)、[…obj]和Object.values( obj)等方法的詳細實作方法,需要的朋友可以參考下,希望能幫助大家。
Array.prototype.slice.call(obj)
該方法可以將類別數組物件轉換為數組,所謂類數組對象,就是含length 和索引屬性的對象
返回的數組長度取決於對象length 屬性的值,且非索引屬性的值,或索引大於length 的值都不會被返回到數組中
實錘如下
let obj = { '0': 3, '1': 13, '2': 23, '3': 33, 'length': 3, 'name': 330 } let arr = Array.prototype.slice.call(obj) // [3, 13, 23]
簡潔寫法[].slice.call(obj)
Array.from(obj )
該方法可以將類別數組物件和可迭代物件轉換為數組
類別數組物件上文已提及,何為可迭代對象?
Array、Set、Map 和字串都是可迭代物件(WeakMap/WeakSet 並不是可迭代物件)
字串變成了可迭代對象,解決了編碼的問題
這些物件都有預設的迭代器,即具有Symbol.iterator 屬性
可以用for of 迴圈
所有透過生成器建立的迭代器都是可迭代物件
##document.getElementsByTagName(" p") 傳回的是可迭代物件但不是一個陣列
Array.isArray(document.getElementsByTagName('p')) 傳回false
let obj = { '0': 3, '1': 13, '2': 23, '3': 33 } function *createIterator(obj){ for(let value in obj){ yield obj[value] } } let iterator = createIterator(obj) let arr = Array.from(iterator) // [3, 13, 23, 33]
Symbol.iterator 屬性新增一個生成器,則可以將其變成可迭代物件
##
let obj = { '0': 3, '1': 13, '2': 23, '3': 33 } obj[Symbol.iterator] = function* () { for(let value in this){ yield this[value] } } let arr = Array.from(obj) // [3, 13, 23, 33]
typeof obj[Symbol.iterator] === 'function'
for of 用於循環可迭代對象,包括有Array, Set, Map, 字串
而Array, Set, Map 都有forEach 方法
另外,NodeList 不是Array, Set, Map,但是一個可迭代對象,可以用for of遍歷
此外,用for of 迴圈物件時可以透過break 提前終止,而forEach 無法提前跳出迴圈
for in 遍歷物件的可枚舉屬性,包括其原型鏈上的屬性,且不保證順序
若要遍歷物件本身的可枚舉屬性,使用
hasOwnProperty()方法來決定屬性是否時物件自身屬性
, 傳回物件本身可枚舉或不可列舉屬性反正已經扯遠了,那就再扯遠一點,
方法將所有可枚舉屬性的值從一個或多個來源物件複製到目標物件
#[…obj]
#展開運算子可以將可迭代物件轉換為陣列
例如,
[...'obj']傳回["o", "b", "j "]
字串去重
Object.values(obj)
預設情況下,開發者定義的物件都是不可迭代對象,但提供了傳回迭代器的方法
與類別陣列物件需要物件有length 值不同,
Object.values(obj)傳回物件本身可列舉屬性值的集合
let obj = { '0': 3, '1': 13, '2': 23, '3': 33 } let arr = Object.values(obj) // [3, 13, 23, 33]
在很大程度上,可以將字串看成字串數組,
都有length 屬性
都有
concat()/ indexOf()
/ includes()
/ slice()
方法不過值得注意的是, string 上沒有方法可以原地修改它自身的內容,都是返回新的string
string還有個
repeat()方法,建立指定數量的字串副本。
#
以上是JS實作從非數組物件轉數組的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!