JavaScript 數組基本操作全解

Posted on by

好久不見，甚是想念！ 大傢好！我是洋哥 蕪湖，起飛

一、初識數組

數組構成：數組由一個或多個數組元素組成的，各元素之間使用逗號“,”分割。

數組元素：每個數組元素由“下標”和“值”構成。

下標：又稱索引，以數字表示，默認從0開始依次遞增，用於識別元素。

值：元素的內容，可以是任意類型的數據，如數值型、字符型、數組、對象等。

數組還可以根據維數劃分為一維數組、二維數組、三維數組等多維數組。

一維數組：就是指數組的“值”是非數組類型的數據，如上圖。

二維數組：是指數組元素的“值”是一個一維數組，如下圖。

數組還可以根據維數劃分為一維數組、二維數組、三維數組等多維數組。

多維數組：當一個數組的值又是一個數組時，就可以形成多維數組。它通常用於描述一些信息。

舉例：保存一個班級學生信息，每個數組元素都代表一個學生，而每個學生都使用一個一維數組分別表示其姓名、學號、年齡等信息，這樣通過一個變量即可有規律的保存一個班級的所有學生信息，方便開發時進行處理。

二、創建數組

數組在JavaScript中的創建方式：

  • 實例化Array對象的方式。
  • 直接使用“[]”的方式。

使用Array對象創建數組

實例化Array對象的方式創建數組，是通過new關鍵字實現的。

使用“[]”創建數組

直接法“[]”與Array()對象的使用方式類似，隻需將new Array()替換為[]即可。

  • 在創建數組時，最後一個元素後的逗號可以存在，也可以省略。
  • 直接法“[]”與Array()對象在創建數組時的區別在於，前者可以創建含有空存儲位置的數組，而後者不可以。

三、數組的基本操作

獲取數組長度

Array對象提供的length屬性可以獲取數組的長度，其值為數組元素最大下標加1。

數組arr2中沒有值的數組元素會占用空的存儲位置。

因此，數組的下標依然會遞增。從而arr2調用length屬性最後的輸出結果即為6。

數組的length屬性不僅可以用於獲取數組長度，還可以修改數組長度。

在利用length屬性指定數組長度時，有以下是三種情況：

💡若length的值大於數組中原來的元素個數，則沒有值的數組元素會占用空存儲位置。

💡若length的值等於數組中原來的元素個數，數組長度不變。

💡若length的值小於數組中原來的元素個數，多餘的數組元素將會被舍棄。

除此之外，在利用Array對象方式創建數組時，也可以指定數組的長度。

註意

JavaScript中不論何種方式指定數組長度後，並不影響繼續為數組添加元素，同時數組的length屬性值會發生相應的改變。

訪問數組元素

數組元素訪問方式：“數組名[下標]”。

概念：所謂遍歷數組就是依次訪問數組中所有元素的操作。

  • 利用下標遍歷數組可以使用：for（已學）。
  • 利用下標遍歷數組可以使用：for…in語句。

  • for…in中的variable指的是數組下標。
  • for…in中的object表示數組的變量名稱。
  • 除此之外，若object是一個對象，for…in還可以用於對象的遍歷。

註意

在ES6中，新增瞭一種for…of語法，可以更方便地對數組進行遍歷。

  • 變量value：表示每次遍歷時對應的數組元素的值。
  • 變量arr：表示待遍歷的數組。
  • 結果：在控制臺中依次輸出1、2和3。

元素的添加與修改

元素的添加與修改元素的方式：“數組名[下標]”。

提示：與訪問數組中的元素的方式相同。

添加元素

  • 添加數組元素：數組名[下標] = 值。
  • 允許下標不按照數字順序連續添加，未設置具體值的元素，會以空存儲位置的形式存在。
  • 數組中元素保存順序與下標有關，與添加元素的順序無關。

修改元素

修改元素與添加元素的使用相同，區別在於修改元素是為已含有值的元素重新賦值。

元素的刪除

在創建數組後，有時也需要根據實際情況，刪除數組中的某個元素值。

例如，一個保存全班學生信息的多維數組，若這個班級中有一個學生轉學瞭，那麼在這個保存學生信息的數組中就需要刪除此學生。

此時，可以利用delete關鍵字刪除該數組元素的值。

delete關鍵字隻能刪除數組中指定下標的元素值，刪除後該元素依然會占用一個空的存儲位置。

解構賦值

除瞭前面學習過的變量聲明與賦值方式，ES6中還提供瞭另外一種方式——解構賦值。例如，若把數組[1,2,3]中的元素分別賦值為a、b和c，傳統的做法是單獨為變量聲明和賦值。

  • 當左側變量的數量小於右側的元素的個數，則忽略多餘的元素。
  • 當左側變量數量大於右側的元素個數時，則多餘的變量會被初始化為undefined。

  • 解構賦值時右側的內容還可以是一個變量。
  • 通過解構賦值完成兩個變量數值的交換。

如果覺得這篇文章對你有一丟丟啟發的話，不妨 點贊👍、收藏⭐、留言💬支持一下，你的支持將是我繼續創作的最大動力❤️❤️❤️

由於作者水平有限，如有錯誤和不準確之處在所難免，本人也很想知道這些錯誤，懇望讀者批評指正！

if (學會瞭）{ 點個贊，給個好評，我祝福你心想事成； }else{ 收藏一下以後慢慢學，我相信你能學會； }

到此這篇關於JavaScript 數組基本操作全解的文章就介紹到這瞭,更多相關JavaScript 數組內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：