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

来源: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，上面已有介紹。
    在粘貼事件中，可以通過該對象讀取到粘貼的數據內容。

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

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

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

總結

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


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

-Advertisement-
Play Games
更多相關文章
  • 預約直播|揭秘鴻蒙全新流量陣地，元服務帶來的體驗變革
    **【導讀】** 在PC 互聯網到移動互聯網的演進過程，隨著人們對交互和信息獲取的智能化要求越來越高，移動終端上的應用生態發展到今天也面臨著變革。傳統厚重的App，功能齊全，但開發成本高、周期長，且存在搜索、安裝、卸載等一系列需要用戶主動關註的顯性操作，這些顯性操作給用戶帶來了實質性的使用成本。輕量 ...
  • 2萬多條初中歷史題庫ACCESS\EXCEL資料庫
    這段時間破解了中高學生知識題庫，包含高中英語題庫、小學英語題庫、初中地理題庫、初中歷史題庫、高中歷史題庫、初中生物題庫，數據表結構都一樣，今天發的這份是上萬條的初中歷史題庫，截圖包含所有欄位，截圖下方有顯示共有記錄數。 參考項有：步入近代(1484)、國家的產生和社會的變革(1261)、侵略與反抗( ...
  • Android strings.xml按照key修改
    ## strings.xml匹配替換 將兩個Android項目中的多語言字元串文件（strings.xml）進行比較，如果其中一個項目中包含另一個項目沒有的字元，則合併到單一的輸出文件，並以 key 在原始 XML 文件中更新 value 值。如果key匹配不准確則忽略它。 具體來說： 1. 引入 ...
  • 記錄--讓URL地址都變成了"ooooooooo"
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 發現一個很有創意的小工具網站，如封面圖所示功能很簡單，就是將一個URL地址轉換為都是 ooooooooo 的樣子，通過轉換後的地址訪問可以轉換回到原始地址，簡單流程如下圖所示。轉換的邏輯有點像短鏈平臺一樣，只不過這個是將你的URL地址變的 ...
  • 各大免費托管平臺體驗有感
    **歷時一年多，我也體驗了不少的靜態博客托管服務了，這裡進行一下對比吧。主要列舉一下優缺點，所有的內容基於該平臺免費版，並且不添加任何增值服務的情況。 速度體驗基於浙江電信的個人測試結果。** # GitHub Pages > 速度：尚可，並不很慢，但有時候會抽風。 自定義功能變數名稱：一個。 限制： 單個 ...
  • 各大建站方案
    # 如何在 CloudFlare Pages 上建站？ > 幾分鐘、零基礎搭建個人網頁！- 高速直連，基於Cloudflare Page: `https://zhuanlan.zhihu.com/p/416269228` 使用 Cloudflare Worker 免費搭建網址導航網站 `https: ...
  • 為什麼會出現 setTimeout 倒計時誤差
    setTimeout 倒計時誤差的出現主要與 JavaScript 的事件迴圈機制和計時器的執行方式有關。 在 JavaScript 中，事件迴圈是用於管理和調度代碼執行的機制。setTimeout 函數用於設置一個定時器，在指定的延遲時間後執行回調函數。然而，由於事件迴圈的機制，setTimeou ...
  • 高解析度大圖像可縮放 Web 查看器的實踐
    # 高解析度大圖像可縮放 Web 查看器的實踐 ## 一、使用 vips 將高解析度大圖像轉換為 DZI 1. 安裝 vips 具體安裝步驟請參考[libvips Install](https://www.libvips.org/install.html)。 註意，在 windows 11 中安裝 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類