JS從非數組物件轉數組的方法小結

這篇文章主要給大家介紹了關於JS從非數組物件轉數組的一些方法，分別是Array.prototype.slice.call(obj)、Array.from(obj)、[…obj]和Object. values(obj)等方法的詳細實作方法，所需的朋友可以參考下。

前言

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

["o", "b", "j"]

• #字串重

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

• Object.values(obj)

##values()

透過使用這些方法，可以傳回相關的陣列與類別陣列物件需要物件有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

repeat() 方法，建立指定數量的字串副本

以上是JS從非數組物件轉數組的方法小結的詳細內容。更多資訊請關注PHP中文網其他相關文章！