前言

本文主要匯總了一些JS從非數(shù)組對(duì)象轉(zhuǎn)數(shù)組的方法，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。

Array.prototype.slice.call(obj)

該方法可以將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組，所謂類數(shù)組對(duì)象，就是含 length 和索引屬性的對(duì)象

返回的數(shù)組長(zhǎng)度取決于對(duì)象 length 屬性的值，且非索引屬性的值，或索引大于 length 的值都不會(huì)被返回到數(shù)組中

實(shí)錘如下

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33,
 'length': 3,
 'name': 330
}
let arr = Array.prototype.slice.call(obj)
// [3, 13, 23]

簡(jiǎn)潔寫法 [].slice.call(obj)

Array.from(obj)

該方法可以將類數(shù)組對(duì)象和可迭代對(duì)象轉(zhuǎn)換為數(shù)組

類數(shù)組對(duì)象上文已提及，何為可迭代對(duì)象？

• Array、Set、Map 和字符串都是可迭代對(duì)象（WeakMap/WeakSet 并不是可迭代對(duì)象）
• 字符串變成了可迭代對(duì)象，解決了編碼的問題
• 這些對(duì)象都有默認(rèn)的迭代器，即具有 Symbol.iterator 屬性
• 可以用 for of 循環(huán)
• 所有通過生成器創(chuàng)建的迭代器都是可迭代對(duì)象
• document.getElementsByTagName("div") 返回的是可迭代對(duì)象但不是一個(gè)數(shù)組
  Array.isArray(document.getElementsByTagName('div')) 返回 false

通過生成器創(chuàng)建可迭代對(duì)象

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]

改造對(duì)象本身，使其成為可迭代對(duì)象

默認(rèn)情況下，開發(fā)者定義的對(duì)象都是不可迭代對(duì)象，但如果給 Symbol.iterator 屬性添加一個(gè)生成器，則可以將其變?yōu)榭傻鷮?duì)象

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]

判斷對(duì)象是否為可迭代對(duì)象的方法

typeof obj[Symbol.iterator] === 'function'

一點(diǎn)延伸 for of 與 forEach 與 for in

for of 用于循環(huán)可迭代對(duì)象，包括有 Array, Set, Map, 字符串

而 Array, Set, Map 都有 forEach 方法

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

此外，用 for of 循環(huán)對(duì)象時(shí)可以通過 break 提前終止，而 forEach 無法提前跳出循環(huán)

for in 遍歷對(duì)象的可枚舉屬性，包括其原型鏈上的屬性，且不保證順序

若要遍歷對(duì)象自身的可枚舉屬性，使用 hasOwnProperty() 方法來確定屬性是否時(shí)對(duì)象自身屬性

Object.getOwnPropertyNames(obj) ， 返回對(duì)象自身可枚舉或不可枚舉屬性

反正已經(jīng)扯遠(yuǎn)了，那就再扯遠(yuǎn)一點(diǎn)， Object.assign() 方法將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象

[…obj]

展開運(yùn)算符可以將可迭代對(duì)象轉(zhuǎn)換為數(shù)組

例如， [...'obj'] 返回 ["o", "b", "j"]

字符串去重

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

Object.values(obj)

默認(rèn)情況下，開發(fā)者定義的對(duì)象都是不可迭代對(duì)象，但提供了返回迭代器的方法

• entries()
• values()
• keys()

通過使用這些方法，可以返回相關(guān)的數(shù)組

與類數(shù)組對(duì)象需要對(duì)象有 length 值不同，Object.values(obj) 返回對(duì)象自身可枚舉屬性值的集合

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33
}
let arr = Object.values(obj) // [3, 13, 23, 33]

字符串與數(shù)組的關(guān)系

在很大程度上，可以將字符串看成字符串?dāng)?shù)組，

都有 length 屬性

都有 concat() / indexOf() / includes() / slice() 方法

不過值得注意的是， string 上沒有方法可以原地修改它自身的內(nèi)容，都是返回新的 string

string 還有個(gè) repeat() 方法，創(chuàng)建指定數(shù)量的字符串副本

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論