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'

一點延伸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() 方法，建立指定數量的字串副本

#上面是我整理給大家的，希望今後會對大家有幫助。 ######相關文章：#########初步了解JavaScript，Ajax，jQuery，並比較三者關係############jquery與php結合實作AJAX長輪詢############Jquery具體實例介紹AJAX何時用，AJAX應該在哪裡用#######

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