JS實作從非數組物件轉數組的方法

本文主要和大家介紹了關於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 與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()

方法，建立指定數量的字串副本。

#

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