非數組物件轉數組步驟詳解（附程式碼）

這次帶給大家非數組物件轉數組步驟詳解（附程式碼），非數組物件轉數組的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

本文主要總結了一些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("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'

遍歷物件的可枚舉屬性，包括其原型鏈上的屬性，且不保證順序

hasOwnProperty()方法來確定屬性是否時物件自身屬性

Object.getOwnPropertyNames(obj)， 傳回物件本身可枚舉或不可枚舉屬性

Object.assign()方法將所有可枚舉屬性的值從一個或多個來源物件複製到目標物件

[…obj]

[...'obj']傳回["o", "b", "j"]

[...new Set('objobj')]

Object.values(obj)

• entries()

• #values()

• keys()

与类数组对象需要对象有 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中文网其它相关文章！

推荐阅读：

vue中v-if与v-show使用和区别

通过jQuery编码转换、事件响应、页面跳转实现浏览器跳转并传递参数

jQuery实现输入文字超过规定行数时自动添加省略号

以上是非數組物件轉數組步驟詳解（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！