從非數組對象轉數組方法小結

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("div") 返回的是可迭代對象但不是一個數組

  • Array.isArray(document.getElementsByTagName('div')) 返回 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() 方法，建立指定數量的字符串副本