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

silvertheo 發布于2019-08-22 15:09 / 664人閱讀

摘要：該方法可以將類數組對象轉換為數組，所謂類數組對象，就是含和索引屬性的對象返回的數組長度取決于對象屬性的值，且非索引屬性的值，或索引大于的值都不會被返回到數組中實錘如下簡潔寫法該方法可以將類數組對象和可迭代對象轉換為數組類數組對象上文已提及，

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() 方法，創建指定數量的字符串副本

云服務器 GPU云服務器 php轉對象數組對象 thinkphp對象轉數組 php數組轉對象 php對象轉數組

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93212.html

call、apply、bind的用法小結

摘要：新手經常犯的一個錯誤是將一個方法從對象中拿出來，然后再調用，希望方法中的是原來的對象。如果不做特殊處理的話，一般會丟失原來的對象。 call、apply、bind是JavaScript中Function函數自帶的方法，主要用于改變this的指向區別： call（） 1.語法： fun.call(this, arg1,arg2) 2.this取值的幾點說明：（1）處于非嚴格模式下，...

woshicixide 2019-08-26 11:36 評論0 收藏0
個人小結--javascript實用技巧和寫法建議

摘要：類似的情況還有，方法和方法等。今天我說一個最簡單。代碼如下和也可以實現，但是生成的是一個整數，如下分割線其它類型數據轉布爾數據下面的轉換，大家一看就明白了，不多說。緩存變量循環緩存分割線第一段就是每一次循環的時候，都要查詢一次。 1.前言從大學到現在，接觸前端已經有幾年了，感想方面，就是對于程序員而言，想要提高自己的技術水平和編寫易于閱讀和維護的代碼，我覺得不能每天都是平庸的寫代碼，...

WilsonLiu95 2019-08-21 16:18 評論0 收藏0
多標簽(組)運算

摘要：代碼實現測試代碼輸出解析標簽表達式基礎的表達式解析實現了，針對我們的標簽表達式多個字符組成一個標簽，以及去掉，加上的邏輯，稍作修改測試代碼輸出后綴表達式轉二叉樹分析根據后綴表達式的含義，符合表示前面兩個元素的運算。用戶標簽是個數組。一、概述標簽是精細化運營必不可少的工具，常見的使用場景有標簽推送，千人千面的廣告展示等。在實際的業務中，標簽往往是通過交并差非運算組合在一起使用，比如：...

Developer 2019-07-01 11:08 評論0 收藏0
【JS基礎】類型轉換知多少

摘要：正確的解釋是允許在相等比較中進行強制類型轉換，而不允許。參考資料小議下字符串比較大小中的強制類型轉換核心概念類型轉換對象和方法隱式類型轉換小結開胃菜先說一個題外話，我在工作中遇到一個問題，需要比較 08:00 和 09:00 的大小，最后我找到三種方法：在兩個字符串前后各拼接相同的年月日和秒，拼成完整的時間格式進行比較： var head = 2016-01-01 var fo...

AdolphLWQ 2019-08-23 17:59 評論0 收藏0
JavaScript標準庫系列——三大包裝對象（四）

摘要：目錄導語包裝對象的理解三大包裝對象的知識點小結導語包裝對象是為了彌補基本數據類型的非對象特性而產生的，對于基本類型值而言，本來是不存在屬性和方法的，但是我們可以在使用字面量創建字符串時，調用例如的方法，那么其內在原理究竟是什么呢閱讀完本篇文目錄導語 1. 包裝對象的理解 2. 三大包裝對象的知識點 3. 小結導語包裝對象是為了彌補基本數據類型的非對象特性而產生的，對于基本類型...

sean 2019-08-21 11:27 評論0 收藏0