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

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

前言

本文主要總結了一些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="http://www.php.cn/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'

一點延伸for of 與forEach 與for in

for of 用於循環可迭代對象，包括有Array, Set, Map, 字符串

而Array, Set, Map 都有forEach 方法

另外，NodeList 不是Array, Set, Map，但是一個可迭代對象，可以用for of 遍歷

此外，用for of 循環對象時可以透過break 提前終止，而forEach 無法事先跳出迴圈

for in

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

若要遍歷對象自身的可枚舉屬性，使用

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中文網其他相關文章！