這次帶給大家非數組物件怎麼轉換成數組,非數組物件轉換成數組的注意事項有哪些,下面就是實戰案例,一起來看一下。
前言
本文主要總結了一些JS從非陣列物件轉數組的方法,分享出來供大家參考學習,下面話不多說了,來一起看看詳細的介紹吧。
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<a href="//m.sbmmt.com/code/8145.html" target="_blank">("p") </a>傳回的是可迭代物件但不是一個陣列
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'
hasOwnProperty() 方法來確定屬性是否時物件自身屬性
Object.getOwnPropertyNames(obj) , 傳回物件本身可枚舉或不可枚舉屬性
Object.assign() 方法將所有可枚舉屬性的值從一個或多個來源
物件複製到目標物件
[…obj]
展開運算子可以將可迭代物件轉換為陣列例如, [...'obj'] 傳回
["o", "b", "j"]
[...new Set('objobj')]
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()
方法,创建指定数量的字符串副本
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是非數組物件怎麼轉換成數組的詳細內容。更多資訊請關注PHP中文網其他相關文章!