淺談Array --JavaScript內置對象

来源:https://www.cnblogs.com/waterrec/archive/2023/03/29/17266687.html
-Advertisement-
Play Games

Array --JavaScript內置對象 描述 可以用一個變數存儲多種數據類型的Array對象,Array不是關聯數組,不能使用字元串作為索引訪問數組元素,需要使用非負整數的下標訪問數組中的元素。 和對象的某些特征很相似,例如:屬性訪問器一半相似,衍生出的使用 .call() 或者 .apply ...


Array --JavaScript內置對象

描述

可以用一個變數存儲多種數據類型的Array對象,Array不是關聯數組,不能使用字元串作為索引訪問數組元素,需要使用非負整數的下標訪問數組中的元素。

和對象的某些特征很相似,例如:屬性訪問器一半相似,衍生出的使用 .call() 或者 .apply() 將數組方法賦予對象。

較為常用的幾個方法

有的是通過改變原數組,又或是返回一個新數組的形式。方便記憶可以劃分為:增刪改查,排序,遍歷,數據和數據集功能。

陳舊的:

此區域為增刪區域

\1. push() - 在數組末尾添加一個或多個元素,並返回新的長度。

\2. pop() - 刪除並返回數組的最後一個元素。

\3. shift() - 刪除並返回數組的第一個元素。

\4. unshift() - 在數組的開頭添加一個或多個元素,並返回新的長度。

此區域為修改區域(合併)

\5. splice() - 通過刪除或替換現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。

\6. slice() - 返回一個新的數組對象,這一對象是一個由 begin 和 end 決定的原數組的淺拷貝。

\7. concat() - 返回一個由當前數組和其它若幹個數組或者若幹個非數組值組合而成的新數組。

\8. join() - 將數組(或一個類數組對象)的所有元素連接成一個字元串並返回這個字元串。

此區域為排序查找

\9. reverse() - 顛倒數組中元素的順序。

\10. sort() - 對數組的元素進行排序。

\11. indexOf() - 返回在數組中可以找到一個給定元素的第一個索引,如果不存在,則返回-1。

\12. lastIndexOf() - 返回一個指定的元素在數組中最後出現的位置,如果不存在,則返回-1。

此區域為遍歷

\13. forEach() - 對數組的每個元素執行一次提供的函數。

\14. map() - 創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數後返回的結果。

\15. filter() - 創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。

\16. reduce() - 對數組中的所有元素執行一個由您提供的reducer函數(升序執行),將其結果彙總

新穎的:

此區域為數據和數據集功能

at() - 通過下標訪問數組元素,區別於直接用方括弧訪問,可以使用負數訪問。

flat() - 將數組扁平化,深度為1。通過傳遞一個數字參數修改深度。

flatMap() - flat() 和 map() 的結合,先扁平(深度1)再遍歷。

Array.from() - 類似數組或可迭代對象創建一個新的,淺拷貝的數組實例。例如字元串,map和set

Array.of() - 創建一個數組,區別於直接使用 Array() 創建數組,括弧內的內容是數組的實際數據。假如你想創建一個長度為7的數組應該使用 Array(7) 而不是 Array.of(7) ,因為後者會創建一個[7]的數組。

entries() - 返回一個Array迭代器對象。

Array.length

array.length 改變length屬性會發生的情況,假如length小於數組最大的下標,會將length之後的元素清除。

數組的長度跟許多方法是掛鉤的,例如 entries() 方法,會通過獲取數組長度訪問每個整數索引。可以簡單的通過 .call() 方法驗證:

const arrayLike = {
  length: 3,
  0: "a",
  1: "b",
  2: "c",
};
for (const entry of Array.prototype.entries.call(arrayLike)) {
  console.log(entry);
}
// [ 0, 'a' ]
// [ 1, 'b' ]
// [ 2, 'c' ]

可以以此倆想到樓下的通用數組方法訪問 length 屬性和索引訪問數組元素。

空槽和數組方法

可以使用 Array(n) 創建一個長度為n的空槽數組。

對於空槽而言,許多數組方法都會照顧一下。例如 concat() 方法就會將空槽省去。亦或是將空槽視為 undefined 例如你能想到的 values()

數組遍歷

forEach()for...in 兩者在特殊情況下的不同效果

for...in可能會迭代對象的原型鏈上的屬性,而array.forEach不會迭代數組的原型鏈上的屬性。此外,array.forEach可以使用break和continue語句來控制迭代。而for...in不能。

const arr1 = [1, 2, 3];
arr1.name = "shit"


arr1.forEach((i) => {
  console.log(i);
}); // 1, 2, 3

for (const i in arr1) {
  console.log(arr1[i]);
}; // 1, 2, 3, shit

數組複製

深拷貝,淺拷貝 主要比較對象的引用是否一致。例如對象和數組這類數據類型可以想象成保存的是指向數據的地址,淺拷貝的本質是兩個數組或者對象中的數據指向了同一個目標。而深拷貝則是兩個完全不同的數據指向

自帶的一個淺拷貝 slice()

簡單的完成一個深拷貝可以使用 JSON 提供的 stringifyparse 方法,通過轉成 JSON 對象再轉回數組的方式。

通用數組方法

指數組的不訪問數組對象的任何內部數據,只訪問 length 屬性和索引訪問數組元素。可以使用call方法在類數組對象上調用。

const arrayLike = {
  0: "a",
  1: "b",
  length: 2,
};
console.log(Array.prototype.join.call(arrayLike, "+")); // 'a+b'

由此來看,數組和對象的相似性還是蠻大的,又或者是較簡單的數據形式,提供的簡單方法能夠讓開發者更便捷的對數據集進行操作。


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

-Advertisement-
Play Games
更多相關文章
  • 摘要:智能把控大數據量查詢,防患系統奔潰於未然。 本文分享自華為雲社區《拒絕“爆雷”!GaussDB(for MySQL)新上線了這個功能》,作者:GaussDB 資料庫。 什麼是最大讀取行 一直以來,大數據量查詢是資料庫DBA們調優的重點,DBA們通常十八般武藝輪番上陣以期提升大數據查詢的性能:例 ...
  • 從MySQL 5.5版本開始預設 使用InnoDB作為引擎,它擅長處理事務,具有自動崩潰恢復的特性,在日常開發中使用非常廣泛 下麵是官方的InnoDB引擎架構圖,主要分為記憶體結構和磁碟結構兩大部分。 InnoDB 記憶體結構 1. Buffer Pool Buffer Pool:緩衝池,簡稱BP。其作 ...
  • 日常生產中 HDFS 上小文件產生是一個很正常的事情,同時小文件也是 Hadoop 集群運維中的常見挑戰,尤其對於大規模運行的集群來說可謂至關重要。 數據地圖是離線開發產品的基本使用單位,包含全部表和項目的相關信息,可以對錶做相關的許可權管理和脫敏管理操作,以及可以展示對應項目占用情況和其表的占用情況 ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者: 奧特曼愛小怪獸 文章來源:GreatSQL社區原創 前言 線上,遇到一些sql性能問題,需要手術刀級別的調優。optimizer_trace是一 ...
  • 華為HMS Core運動健康服務支持通過REST API,以GPX文件格式寫入用戶路線數據,支持導入軌跡(Track)或路程(Route)類型的數據,實現用戶路線數據在華為運動健康App中的展示效果。 假若與華為運動健康App相連接的穿戴設備支持路線導入,那麼用戶路線數據將自動下發至穿戴設備。用戶可 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 假設,我們有這樣一張 Gif 圖: 利用 CSS,我們嘗試來搞一些事情。 圖片的 Glitch Art 風 在這篇文章中 --CSS 故障藝術,我們介紹了利用混合模式製作一種暈眩感覺的視覺效果。有點類似於抖音的 LOGO。 像是這樣: 假 ...
  • 本博文介紹CSS中的基礎選擇器和複合選擇器。基礎選擇器包括標簽選擇器、類選擇器、id選擇器和通配符選擇器,複合選擇器包括後代選擇器、子選擇器、並集選擇器和偽類選擇器。 ...
  • 在上篇隨筆《基於Admin.NET框架的前端的一些改進和代碼生成處理(1)》中大致介紹了一些關於對Admin.NET框架的前端的改造工作,主要目的就是希望能夠增加代碼的簡潔和可讀性,以及利用代碼生成工具來快速生成相關的代碼,從而減少開發過程中的繁瑣問題。本篇隨筆繼續探討一下,對其中一些模塊功能進行一... ...
一周排行
    -Advertisement-
    Play Games
  • 概述:在C#中,++i和i++都是自增運算符,其中++i先增加值再返回,而i++先返回值再增加。應用場景根據需求選擇,首碼適合先增後用,尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中,++i 和 i++ 都是自增運算符,但它們在操作上有細微的差異,主要體現在操作的 ...
  • 上次發佈了:Taurus.MVC 性能壓力測試(ap 壓測 和 linux 下wrk 壓測):.NET Core 版本,今天計劃準備壓測一下 .NET 版本,來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能,以便後續持續優化改進。 為了方便對比,本文章的電腦環境和測試思路,儘量和... ...
  • .NET WebAPI作為一種構建RESTful服務的強大工具,為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時,正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性,如[FromRoute]、[FromQuery]和[FromBody],用 ...
  • 原因:我之所以想做這個項目,是因為在之前查找關於C#/WPF相關資料時,我發現講解圖像濾鏡的資源非常稀缺。此外,我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時,會導致CPU的渲染負擔過重。因此,我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • 引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入,上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試,今天用這個示例來演示一下如何用Bogus創建模擬數據 ,和 EFCore 的種子數據生成 Bogus 的優 ...
  • 一、前言 在自己的項目中,涉及到實時心率曲線的繪製,項目上的曲線繪製,一般很難找到能直接用的第三方庫,而且有些還是定製化的功能,所以還是自己繪製比較方便。很多人一聽到自己畫就害怕,感覺很難,今天就分享一個完整的實時心率數據繪製心率曲線圖的例子;之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • 如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式,但發現 App.xaml 中定義的資源沒有被正確載入,那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣,當你創建 Ap ...
  • 一:背景 1. 講故事 上個月有個朋友在微信上找到我,說他們的軟體在客戶那邊隔幾天就要崩潰一次,一直都沒有找到原因,讓我幫忙看下怎麼回事,確實工控類的軟體環境複雜難搞,朋友手上有一個崩潰的dump,剛好丟給我來分析一下。 二:WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 前言 .NET生態中有許多依賴註入容器。在大多數情況下,微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器,使用很方便。 但是筆者在使用中一直有一個頭疼的問題:服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響,但是內置容器支持註冊開放泛型服 ...
  • 一、前言 在項目開發過程中,DataGrid是經常使用到的一個數據展示控制項,而通常表格的最後一列是作為操作列存在,比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中,預設只支持固定左側列,這跟大家習慣性操作列放最後不符,今天就來介紹一種簡單的方式實現固定右側列。(這裡的實現方式參考的大佬 ...