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

来源: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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...