首頁 > web前端 > js教程 > JavaScript數組:如何創建和操縱

JavaScript數組:如何創建和操縱

Jennifer Aniston
發布: 2025-02-18 10:50:10
原創
565 人瀏覽過

深入淺出JavaScript數組:創建與操作詳解

JavaScript Arrays: How to Create and Manipulate

核心要點

  • JavaScript數組擁有length屬性,可進行操作,並具有編號屬性,名稱範圍在0到4294967294(含)之間。 JavaScript不支持關聯數組。
  • JavaScript數組的創建方式多樣,建議使用數組字面量創建新數組。數組可以是密集型(長度等於編號屬性的數量)或稀疏型(長度大於編號屬性的數量)。
  • JavaScript數組的長度可以改變。如果設置的新長度小於當前長度,則數組中位置大於新長度的任何編號屬性都將被移除。
  • JavaScript提供方法來添加、移除和替換數組中的條目。添加條目方法包括pushunshiftsplice;移除條目方法包括popshiftsplice

學習如何操作JavaScript數組。我們將涵蓋數組創建過程、更改數組長度以及添加、移除和替換條目。 Array對象的length屬性是許多JavaScript新手不理解的一個屬性。許多人錯誤地認為length準確地告訴你數組中有多少個條目,而這僅對某些數組成立。一些初學者甚至沒有意識到length是數組的可寫屬性。為了闡明length屬性的工作原理,讓我們看看當我們自己更改其值或運行更新數組也導致長度更改的操作時會發生什麼。讓我們從頭開始。 JavaScript數組有一個名為length的屬性,並且可以選擇具有編號屬性,其名稱介於0和4294967294(含)之間。它還有一些用於操作屬性的方法,我們將在檢查length屬性的工作原理時研究其中一些方法。請注意,JavaScript不支持關聯數組,因此雖然您可以向數組添加命名屬性,但它們不構成數組的一部分,並且將被所有數組方法忽略。它們也不會影響長度。為了更容易地顯示在處理各種語句時數組屬性會發生什麼,我們將在每段代碼之後運行以下函數。這會將數組的長度和所有編號屬性記錄到瀏覽器的控制台。

var test = function(array) {
  console.log('length:'+ array.length);
  array.forEach(function(element, index, array) {
    console.log(index + ':' + element);
  });
};
登入後複製
登入後複製
登入後複製

本文由Chris Perry和Marcello La Rocca共同評審。感謝所有SitePoint的同行評審員,使SitePoint的內容盡善盡美!

在JavaScript中創建數組

我們將首先研究在JavaScript中創建數組的不同方法。前兩個示例創建的數組只設置了長度,根本沒有編號條目。後兩個示例從0創建到長度減1的編號條目。長度大於編號屬性數量的數組稱為稀疏數組,而長度等於編號屬性數量的數組稱為密集數組。

var test = function(array) {
  console.log('length:'+ array.length);
  array.forEach(function(element, index, array) {
    console.log(index + ':' + element);
  });
};
登入後複製
登入後複製
登入後複製

請注意,在創建新數組時,首選數組字面量表示法(使用空括號定義新數組)。

// 创建一个没有编号条目的数组

var arr = new Array(5);
test(arr);
// length: 5

var arr = [];
arr.length = 5;
test(arr);
// length: 5
登入後複製
登入後複製

處理編號屬性的數組方法(在本例中為forEach)只會處理存在的屬性。如果您改為使用forwhile循環處理數組,則循環也會嘗試處理不存在的屬性,並且數組會將不存在的條目標識為undefined。然後,您的代碼將無法區分上述最後一個示例和前兩個示例。如果您不確定自己是否正在處理密集數組,則應始終使用數組方法來處理數組。

更改JavaScript數組的長度

以下示例查看如果我們為數組設置一個小於當前長度的新長度會發生什麼。

var arr = ['a', 'b', 'c', 'd', 'e'];
test(arr);
// length:5, 0:a, 1:b, 2:c, 3:d, 4:e

var arr = [undefined, undefined, undefined, undefined, undefined];
test(arr);
// length:5, 0:undefined, 1:undefined, 2:undefined, 3:undefined, 4:undefined
登入後複製

請注意,使用[]表示法創建數組時,每個條目都由一個值後跟一個逗號組成。如果省略值,則不會為該位置創建屬性。只有當為該屬性提供值時,才能省略最後一個逗號,否則長度將減少一個。

從JavaScript數組中移除條目

JavaScript提供了三種方法popshiftsplice,可以從數組中移除條目,從而減少數組的長度。在每種情況下,移除的值(或值)都由調用返回。

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
test(arr);
// length:6, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f

arr.length = 5;
test(arr);
// length:5, 0:a, 1:b, 2:c, 3:d, 4:e

var arr = ['a','b','c','d','e','f',,,];
test(arr);
// length:8, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f

arr.length = 7;
test(arr);
// length:7, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f
登入後複製

如何在數組中添加條目

我們可以通過簡單地指定數組中尚不存在編號屬性的位置來向數組中添加新條目。我們還可以使用JavaScript提供的三個方法之一(pushunshiftsplice)來插入新條目,並在必要時移動舊條目。

// pop() 从数组中移除最后一个元素
var arr = ['a','b','c','d','e','f'];
var el = arr.pop();
test(arr); // length:5, 0:a, 1:b, 2:c, 3:d, 4:e
console.log(el); // f

// shift() 从数组中移除第一个元素
var arr = ['a','b','c','d','e','f'];
var el = arr.shift();
test(arr); // length:5, 0:b, 1:c, 2:d, 3:e, 4:f
console.log(el); // a

// splice() 可以移除现有元素
var arr1 = ['a','b','c','d','e','f'];
var arr2 = arr1.splice(0,2); // 从索引0开始移除2个元素
test(arr1); // length:4, 0:c, 1:d, 2:e, 3:f
test(arr2); // length:2, 0:a, 1:b

var arr1 = ['a','b','c','d','e','f',,,'i'];
var arr2 = arr1.splice(6,2); // 从索引6开始移除2个元素
test(arr1); // length:7, 0:a, 1:b, 2:c, 3:d, 4:e, 5:f, 6:i
test(arr2); // length:2
登入後複製

在JavaScript數組中替換條目

如果我們將新值賦給已存在的條目,則該條目只會獲得新值,而數組的其餘部分不會受到影響。同樣,通過組合我們已經研究過的splice()方法的變體,我們可以替換現有條目或填充數組中的空白。

var arr = ['a','b','c','d','e','f',,,'i'];
arr[11] = 'l';
test(arr);
// length:12, 0:a, 1:b, 2:c, 3:d, 5:f, 8:i, 11:l

// push() 将一个或多个元素添加到数组的末尾
var arr = ['a','b','c','d','e','f',,,,];
arr.push('j');
test(arr);
// length:10, 0:a, 1:b, 2:c, 3:d, 5:f, 9:j

// unshift() 将一个或多个元素添加到数组的开头
var arr = ['a','b','c','d','e','f',,,,];
arr.unshift('x');
test(arr);
// length:10, 0:x, 1:a, 2:b, 3:c, 4:d, 5:e, 6:f

arr1 = ['a','b','c','d','e','f',,,'i'];
arr2 = arr1.splice(6,0,'g','h'); // 从索引6移除0个元素,并插入'g'、'h'
test(arr1); // length:11, 0:a, 1:b, 2:c, 3:d, 5:f, 6:g, 7:h, 10:i
test(arr2); // length:0
登入後複製

結論

上述示例應該讓您更好地了解數組的length屬性是如何工作的。這可以大於或等於數組中的條目數。如果相等,則我們有一個密集數組;如果大於,則我們有一個稀疏數組。特定數組方法的確切作用可能取決於稀疏數組中是否存在與給定位置對應的屬性。如果我們更改數組的長度,它會移除數組中位置大於新長度的任何編號屬性。如果長度等於編號屬性的數量,並且我們增加了長度,那麼我們將密集數組轉換為稀疏數組。刪除和添加數組中屬性的數組方法會在必要時移動現有條目,並且還會保留和移動屬性之間的任何間隙。

JavaScript數組常見問題解答 (FAQs)

如何在JavaScript中向數組添加元素?

在JavaScript中,您可以使用push()方法向數組添加元素。此方法將新項目添加到數組的末尾並返回新的長度。這是一個例子:

var test = function(array) {
  console.log('length:'+ array.length);
  array.forEach(function(element, index, array) {
    console.log(index + ':' + element);
  });
};
登入後複製
登入後複製
登入後複製

如何從JavaScript數組中移除元素?

JavaScript提供了幾種方法來從數組中移除元素。 pop()方法從數組中移除最後一個元素並返回該元素。 shift()方法從數組中移除第一個元素並返回該元素。以下是如何使用這些方法:

// 创建一个没有编号条目的数组

var arr = new Array(5);
test(arr);
// length: 5

var arr = [];
arr.length = 5;
test(arr);
// length: 5
登入後複製
登入後複製

(後續FAQ內容與原文一致,此處省略,避免重複)

以上是JavaScript數組:如何創建和操縱的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板