一文搞懂前端的所有類數組類型

来源:https://www.cnblogs.com/jimojianghu/archive/2023/06/02/17292292.html
-Advertisement-
Play Games

前面博文有介紹JavaScript中數組的一些特性,通過對這些數組特性的深入梳理,能夠加深我們對數組相關知識的理解,詳見博文: [一文搞懂JavaScript數組的特性](https://www.cnblogs.com/jimojianghu/p/17292277.html) 其實,在前端開發中,除 ...


前面博文有介紹JavaScript中數組的一些特性,通過對這些數組特性的深入梳理,能夠加深我們對數組相關知識的理解,詳見博文:
一文搞懂JavaScript數組的特性

其實,在前端開發中,除了數組以外,還有一種類似數組的對象,一般叫做類數組、或偽數組,也是我們需要掌握的知識點。

類數組是什麼?

首先,我們先嘗試給類數組加個簡單的定義:擁有length屬性的對象(非數組)。類數組的核心特征就是擁有length屬性,擁有length屬性又不是真正數組的對象,基本可以被認定為類數組。
雖然這個定義很簡單,只突出了length屬性,但類數組的基本特點,我們還是可以總結如下:

  • 擁有length屬性
  • length屬性非動態值,不會隨元素變化而變化
  • 可以使用數字索引下標訪問屬性元素
  • 不是數組,沒有數組對應的各種方法
  • 可以使用for語句等進行迴圈遍歷
  • 能夠通過一定方式轉換成真正的數組

創建類數組的對象

根據以上類數組的特點,我們可以自己創建類數組的對象,也比較簡單,只需要擁有length,如下所示:

const al = { 0: 111, 1: 222, 2: 333, length: 3 }
for (let i = 0; i < al.length; i++) {
  console.log(al[i])
}
// 111
// 222
// 333

以上代碼,創建了一個length屬性為3的對象,通過for迴圈遍歷對象,並且下標輸出對應的值。
length屬性並不會動態添加,比如我們給al對象增加一個屬性,但length值仍為3:

al[3] = 444
console.log(al.length) // 3

如果把該類數組對象轉換成一個真正的數組後,就可以進行數組操作了。

事實上,我們可以省略其他屬性,只保留length,同樣可當做一個類數組使用:

const al = { length: 3 }

雖然我們可以通過類似這種方式,自己創建類數組,但實際開發過程中,幾乎沒人這麼處理。
真正在前端開發中,接觸到的類數組,都是JavaScript語言或者Web環境下提供的各種類數組的對象。
在介紹這些類數組對象之前,我們先看下類數組對象如何才能轉換成數組。

如何將類數組轉換成數組

類數組只是類似數組的對象,缺少很多相應的方法,有時候我們可能需要把類數組轉換成數組,才能更好的操作,這時候就需要找到方便有效的轉換方式。
當前常用的轉換方式,大致有如下幾類,我們一個個介紹。

Array.from()

首先是ES6提供的新的數組靜態方法:Array.from,它用於從一個類數組或可迭代對象中創建一個新的數組。基本上,只要擁有length屬性的對象,都能被Array.from轉換成數組。
語法:Array.from(arrayLike, mapFn, thisArg)
三個參數說明:

  • arrayLike:類數組對象,或可迭代對象
  • mapFn:可選參數,新數組會經過該函數處理後返回
  • thisArg:可選參數,執行mapFn時指定的this指向

下麵看一個示例:

const al = { 0: 111, 1: 222, 2: 333, length: 3 }
const arr = Array.from(al)
console.log(arr) // [111, 222, 333]
console.log(arr.length) // 3
console.log(Array.isArray(arr)) // true

以上代碼,我們自定義了一個擁有length屬性的對象,然後通過Array.from方法進行轉換,得到了一個長度為3的新數組。
這種方式簡單方便,在當前前端開發的絕大多數情況下,都應該是首選。

Array.prototype.slice.call()

在ES6沒出來之前,如果想較好的進行類數組的轉換,一般使用的是該方法:Array.prototype.slice.call()。
它基於數組的slice()方法,把執行時的this指向類數組對象,讓類數組對象像數組一樣使用slice()方法返回一個新的數組,因此擁有length屬性的類數組對象都能被轉換成數組。

const al = { 0: 111, 1: 222, 2: 333, length: 3 }
const arr = Array.prototype.slice.call(al)
console.log(arr) // [111, 222, 333]

以上代碼,與Array.from定義同樣的類數組對象,通過Array.prototype.slice.call轉換,效果是一樣的。

其他方式

以上兩種方式,是最正確有效的轉換,推薦日常使用。
除此以外,還有其他的方式,但各有缺陷,要麼較複雜、要麼對部分類數組對象不適用,所以並不太推薦。

  • for迴圈處理
    定義一個新的空數組,通過迴圈遍歷類數組對象的屬性,將類數組對象的每一個屬性元素值都添加到新數組中。
    這種方式就顯得相對麻煩一些。
  • 擴展運算符(...)
    擴展運算符主要作用於可迭代對象,JavaScript中的集合(數組、Set、Map)都是可迭代對象,另外字元串和arguments也都是。
    擴展運算符對於不可迭代對象,會報錯。
[...'hello'] // ['h', 'e', 'l', 'l', 'o']
[...{ length: 3 }] // Uncaught TypeError: {(intermediate value)} is not iterable
Array.from({ length: 3 }) // [undefined, undefined, undefined]

以上代碼,通過擴展運算符,字元串能被轉換成數組,但自定義類數組對象 { length: 3 } 則不行,並報錯;而使用Array.from則轉成了擁有3個 undefined 元素的數組。

類數組對象

前端開發中最常見且被認可的類數組對象,是函數的arguments參數對象,另外字元串也是一個類數組對象,其他的還有各種Web環境提供的API。
如果把這些分成兩類的話:

  • JS對象
    屬於JavaScript語言的對象,在nodejs中也存在。
    如arguments、字元串、TypeArray、自定義類數組等。
  • Web對象
    依賴於Web環境(一般是瀏覽器)的對象,不屬於JavaScript語言。
    如FileList、DOM列表對象、數據存儲(如localStorage、sessionStorage)等。

下麵我們就一一介紹下這些類數組對象。

JavaScript類數組對象

arguments

arguments是JS中函數內部的一個對象,用於處理不定數目的參數,是一個類數組對象。
在ES6推出之前,arguments的使用還是非常廣泛的,但在ES6推出預設參數和擴展參數後,它的使用就減少了。

通過下麵的示例,轉成數組:

function test () {
  console.log(Array.prototype.toString.call(arguments))
  console.log(Array.from(arguments))
  console.log([...arguments], Array.prototype.slice.call(arguments))
}
test(23)
// [object Arguments]
// [23]
// [23] [23]

以上代碼可知,該對象存在獨特的類型判斷 Arguments,可用擴展運算符處理arguments對象。

註意,箭頭函數內部不存在arguments對象。

字元串

JavaScript中的字元串也是一個類數組對象,它擁有length屬性,可以通過下標數字索引訪問,也可以轉換成數組,字元串中的每一個字元都變成新數組的一個元素。

const str = 'abc'
str.length // 3
str[1] // 'b'
Array.from(str) // ['a', 'b', 'c']
[...str] // ['a', 'b', 'c']

字元串擁有一個實例方法 split,可以將字元串按照傳入的分隔符進行處理,返回一個分割出來的每個子字元串都作為元素的數組:

'abc'.split('') // ['a', 'b', 'c']
'abc'.split('b') // ['a', 'c']

以上代碼,
當使用空字元做分隔符的時候,就是將每一個字元都分割成數組元素,與類數組的轉換方式相同。
當使用 b 字元做分隔符的時候,返回的數組元素就只有2個了。

由於split操作分隔符的靈活性,可以給我們處理字元串帶來方便,所以常用該方法,而少用類數組轉換。

TypeArray類型數組

類型數組也是一種類數組對象,提供了訪問記憶體緩衝區中二進位數據的機制,它擁有11個對象,如Uint8Array、Uint8ClampedArray、Int32Array、Float64Array等等。具體知識可見博文前端二進位API知識總結

類型數組都擁有和數組相同的大部分用於遍歷的實例方法,但它不是真正的數組,它不能動態變化,不支持push、pop、shift、unshift等修改數組的方法,類型判斷也不是數組:

const u8 = new Uint8Array()
u8 instanceof Uint8Array // true
Array.isArray(u8) // false
[...u8] // []
Array.from(u8) // []

以上代碼,可以看出,類型數組並不是真正的數組,但可以通過擴展運算符轉換成數組(其他方式也行)。
當然,類型數組的使用場景一般在於處理二進位數據,能夠遍歷讀取數據做一些操作即可,並不太需要做轉換。

其他JS類數組對象

  • 自定義類數組對象
    前面已有介紹,開發中幾乎不用。

  • function
    函數作為一個對象,也擁有length屬性,所以它也可以轉換成數組。
    函數的length屬性表示的是參數的個數,轉成數組後,就表示有幾個元素,但元素值都為undefined。

    const fun = (al) => {}
    fun.length // 1
    Array.from(fun) // [undefined]
    

Web-API類數組對象

FileList

FileList對象是一個我們常常用到的類數組對象,主要是在文件上傳的過程中,我們選擇文件後,前端用於接收文件信息的對象,就是它,可以讀取到單個或多個文件數據。

FileList是一個擁有length屬性並且屬性索引值是數字的對象,它的每一個子成員屬性都是一個 File 對象,處理文件信息。

inputFile.addEventListener('change', (e) => {
  const files = e.target.files
  console.log(Array.from(files))
})
// [File]

以上代碼,就是監聽一個上傳控制項的change事件,讀取到對應的文件列表,並轉換輸出為數組,元素為File對象。

一般也用不著轉換,直接遍歷讀取FileList即可。

DOM中類數組

在Web開發中,DOM操作也有很多類數組對象,如元素集合HTMLCollection、節點NodeList等等。

HTMLCollection

HTMLCollection來自於頁面的document等節點元素對象,主要是各種屬性:

  • document.links:返回所有鏈接元素
  • docuement.forms:返回所有表單元素
  • document.images:返回所有圖像元素
  • document.scripts:返回所有腳本元素
  • document.embeds:返回所有embed嵌入對象
  • Element.children:返回當前節點的所有子元素
const links = document.links
Object.prototype.toString.call(links) // '[object HTMLCollection]'
const linkArr = Array.from(links) // []
Array.isArray(linkArr) // true

以上代碼,讀取了頁面所有的鏈接,返回的一個HTMLCollection類數組對象,可以轉換成對應的數組,當前頁面並不存在鏈接,所以返回的是空數組。

NodeList

通過以下方法或屬性獲取的節點列表(NodeList):

  • getElementsByTagName:返回所有擁有指定HTML標簽名的節點
  • getElementsByClassName:返回所有擁有指定class類屬性名的節點
  • getElementsByName:返回所有擁有指定name屬性的節點
  • querySelectorAll:返回所有匹配給定選擇器的節點
  • document.childNodes:返回所有子節點
const divList = document.querySelectorAll('div')
Array.isArray(divList) // false
Object.prototype.toString.call(divList) // '[object NodeList]'
divList.length // 4
const divArr = [...divList] //  [div, div#clickInput, div#name, div#dropArea]
Array.isArray(divArr) // true

以上代碼,通過 querySelectorAll 讀取了頁面上所有的div,得到了一個NodeList對象,是一個類數組對象,可以通過擴展運算符轉換成一個真正的數組。

其他DOM相關類數組對象

以下也是DOM操作中,常見的一些類數組對象:

  • document.styleSheets:返回所有樣式表(StyleSheetList)
  • attributes:返回節點元素的所有屬性(NamedNodeMap)
  • dataset:返回節點元素上的所有附加數據(DOMStringMap)
  • classList:返回節點元素上的所有樣式類(DOMTokenList)

DOM中的對象都是由DOM-API提供給JavaScript調用的,因為不止JS要用,所以使用類數組較合適。

其他Web類數組對象

  • window
    window對象也擁有length,所以它也是類數組對象?
    是的,window的length屬性表示頁面擁有的frame/iframe的數量。
    所以也可以轉換成數組:

    window.length // 0
    Array.from(window) // []
    

    當前頁面沒有frame,長度為0,轉換成了空數組。

  • DataTransferItemList
    用於從拖拽或粘貼事件中讀取到的 Datatransfer 對象的一個只讀屬性 items,同一級的只讀屬性還有 files,也是一個類數組對象 FileList,上面已有介紹。
    在粘貼事件中,可以通過該對象讀取到粘貼的數據內容。

  • 數據存儲
    瀏覽器中的數據存儲機制,如 sessionStoragelocalStorage,他們其實也是類數組對象,擁有length屬性,可以進行轉換。

    localStorage.length // 2
    Array.from(localStorage) // [undefined, undefined]
    

    以上代碼,就是對localStorage的處理,擁有兩個值,但由於是字元串鍵值對,無法轉成數字索引,所以數組兩個元素都是 undefined。

總結

本文描述了什麼是類數組對象,它的主要特點,以及如何創建一個類數組對象,還有將類數組對象轉換成真正數組的幾種方式,接著也介紹了前端開發中可能會遇到的已有的各種類數組對象。
事實上,絕大部分的類數組對象是不需要專門去轉換為數組的,直接遍歷操作即可,但深入掌握這些類數組的知識,也是前端開發中不可少的。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • **【導讀】** 在PC 互聯網到移動互聯網的演進過程,隨著人們對交互和信息獲取的智能化要求越來越高,移動終端上的應用生態發展到今天也面臨著變革。傳統厚重的App,功能齊全,但開發成本高、周期長,且存在搜索、安裝、卸載等一系列需要用戶主動關註的顯性操作,這些顯性操作給用戶帶來了實質性的使用成本。輕量 ...
  • 這段時間破解了中高學生知識題庫,包含高中英語題庫、小學英語題庫、初中地理題庫、初中歷史題庫、高中歷史題庫、初中生物題庫,數據表結構都一樣,今天發的這份是上萬條的初中歷史題庫,截圖包含所有欄位,截圖下方有顯示共有記錄數。 參考項有:步入近代(1484)、國家的產生和社會的變革(1261)、侵略與反抗( ...
  • ## strings.xml匹配替換 將兩個Android項目中的多語言字元串文件(strings.xml)進行比較,如果其中一個項目中包含另一個項目沒有的字元,則合併到單一的輸出文件,並以 key 在原始 XML 文件中更新 value 值。如果key匹配不准確則忽略它。 具體來說: 1. 引入 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 發現一個很有創意的小工具網站,如封面圖所示功能很簡單,就是將一個URL地址轉換為都是 ooooooooo 的樣子,通過轉換後的地址訪問可以轉換回到原始地址,簡單流程如下圖所示。轉換的邏輯有點像短鏈平臺一樣,只不過這個是將你的URL地址變的 ...
  • **歷時一年多,我也體驗了不少的靜態博客托管服務了,這裡進行一下對比吧。主要列舉一下優缺點,所有的內容基於該平臺免費版,並且不添加任何增值服務的情況。 速度體驗基於浙江電信的個人測試結果。** # GitHub Pages > 速度:尚可,並不很慢,但有時候會抽風。 自定義功能變數名稱:一個。 限制: 單個 ...
  • # 如何在 CloudFlare Pages 上建站? > 幾分鐘、零基礎搭建個人網頁!- 高速直連,基於Cloudflare Page: `https://zhuanlan.zhihu.com/p/416269228` 使用 Cloudflare Worker 免費搭建網址導航網站 `https: ...
  • setTimeout 倒計時誤差的出現主要與 JavaScript 的事件迴圈機制和計時器的執行方式有關。 在 JavaScript 中,事件迴圈是用於管理和調度代碼執行的機制。setTimeout 函數用於設置一個定時器,在指定的延遲時間後執行回調函數。然而,由於事件迴圈的機制,setTimeou ...
  • # 高解析度大圖像可縮放 Web 查看器的實踐 ## 一、使用 vips 將高解析度大圖像轉換為 DZI 1. 安裝 vips 具體安裝步驟請參考[libvips Install](https://www.libvips.org/install.html)。 註意,在 windows 11 中安裝 ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...