JavaScript >> Javascript 文檔 >  >> Tags >> Arrays

JavaScript 中的多維/嵌套數組 [指南]

本指南旨在簡潔地向您展示如何在 JavaScript 編程語言中創建和使用多維數組。

什麼是數組?

數組是您可能希望構建的任何應用程序類型的關鍵組件 - 數組允許您將變量的有序列表或任意長度的值存儲在單個變量中 - 準備好被迭代、顯示或以其他方式處理。

例如,一個數組可能包含一個即時通訊應用程序的聯繫人列表,或者一個數組可能包含玩家在視頻遊戲中收集的項目列表。

數組構成了您可能用 PHP 或任何其他編程語言編寫的幾乎所有程序的支柱。

數組是一種包含有序值列表的變量。這些值可以是任何類型,稱為元素項目 在數組中。

數組索引

由於數組是有序的,數組中的每個元素都有一個數字位置,它決定了它在數組中出現的位置。

這稱為 索引 . 索引 從位置 0 開始計數 ,因此數組中的第一項位於索引 0 ,第二項位於索引 1 等等。

什麼是多維數組?

數組是一維的。它們是一個值列表,類似於表格或電子表格中的單個列

但是,數組可以包含其他數組。這會添加第二個維度,例如除了列之外還向電子表格添加行。

這可能更好地顯示在視覺上:

var oneDimensionalArray = ['a', 'b', 'c', 'd];

var twoDimensionalArray = [
    ['a1', 'a2', 'a3', 'a4'],
    ['b1', 'b2', 'b3', 'b4'],
    ['c1', 'c2', 'c3', 'c4']
];

變量 oneDimensionalArray 是一個單維數組——一個包含字母列表的數組。

二維AR數組 然而是一個包含其他數組的數組 .這可以被視為具有行和列的表格 - 兩個維度。我已將數組的聲明格式化為行和列,以便您看到效果。值 b1 位於第二行的第一列。

可以嵌套多少個數組沒有限制。嵌套數組的數量稱為深度 的多維數組。一個多維數組,裡面有一個數組,一個數組裡面,一個數組裡面的深度為 3 是一個三維數組(不幸的是,在二維數組之後,它們變得有點難以說明 )。

多維數組在 JavaScript 中的用途是什麼?

如上所示,多維數組最常用於表示表格數據。數組的每個元素都包含單行或記錄的數據。

開發視頻遊戲時也經常使用多維數組。二維數組的網格性質非常適合構建二維遊戲區域,每個數組元素都包含關於應該在網格點放置什麼的信息(樹、玩家、草等)。這些網格也可以堆疊起來,這樣遊戲元素就可以彼此重疊出現,從而創建更複雜的多維數組。

這聽起來很複雜,但由於數組都是索引的,因此很容易通過位置來管理其中的內容。

還可以搜索、重新排序、克隆和以其他方式處理數組。

聲明多維數組

您已經在本文前面看到瞭如何在 JavaScript 中聲明多維數組。下面,聲明了一個二維數組:

var twoDimensionalArray = [
    ['a1', 'a2', 'a3', 'a4'],
    ['b1', 'b2', 'b3', 'b4'],
    ['c1', 'c2', 'c3', 'c4']
];

同樣,這是一個包含多個子數組的數組。包含行的外部數組,以及包含列值的子數組。

請注意,多維數組中的子數組 大小必須相同! 所以以下是完全有效的:

var twoDimensionalArray = [
    ['a1', 'a2'],
    ['b1', 'b2', 'b3', 'b4'],
    ['c1', 'c2', 'c3']
];

不同長度的數組是否會出現問題將取決於您嘗試以編程方式完成的任務。

訪問多維數組中的值

JavaScript 中的所有數組都有索引。所有索引都已填充,因此如果從數組中刪除一個元素,則會對其重新編制索引,以便在該數組的索引列表中不會跳過任何數字。

在一個一維數組中,要通過它的索引訪問一個值,你可以這樣做:

oneDimensionalArray[1] // Access the second value in a single dimensional array

方括號用在數組變量名後,指定要檢索的元素的索引。

多維數組的工作方式完全相同——您只需指定第一個數組的索引,然後是您希望訪問的任何子數組的索引,直到達到您希望檢索的值的深度。

twoDimensionalArray[1][0] // Access the value on the second row (index 1), first column (index 0) from a two dimensional array

上面定義了兩個索引,第一個用於上面所示的二維數組中最外層的數組,第二個用於數組第二層的數組。這將檢索值 b1 .

如果您的數組具有三個級別,您只需繼續指定索引:

threeDimensionalArray[1][0][2] // Access the value of a three dimensional array

迭代/循環遍歷多維數組

JavaScript foreach() 循環用於遍歷數組。

多維數組,作為嵌套數組,可以通過嵌套多個 foreach() 進行迭代 循環。最好用一個代碼示例來說明這一點:

// Declare a multidimensional array
var twoDimensionalArray = [
    ['a1', 'a2', 'a3', 'a4'],
    ['b1', 'b2', 'b3', 'b4'],
    ['c1', 'c2', 'c3', 'c4']
];

// Loop through the outermost array
twoDimensionalArray.forEach(function(rowValue, rowIndex){

    // Loop through each of the sub-arrays
    rowValue.forEach(function(columnValue, columnIndex){

        // Print the index of the outer and inner arrays
        console.log('row: ' + rowIndex + ', column: ' + columnIndex); 

        // Print the value stored at the current row, column position
        console.log(columnValue);

    });
    
});

上面的代碼會輸出:

row: 0, column: 0 
a1
row: 0, column: 1 
a2
row: 0, column: 2 
a3
row: 0, column: 3 
a4
row: 1, column: 0 
b1
row: 1, column: 1 
b2
row: 1, column: 2 
b3
row: 1, column: 3 
b4
row: 2, column: 0 
c1
row: 2, column: 1 
c2
row: 2, column: 2 
c3
row: 2, column: 3 
c4

每個子數組都由第一個 foreach() 遍歷 按順序循環,這些數組中的每個元素都被第二個 foreach() 遍歷 在第一個 foreach 循環之前循環移動到下一個子數組。

搜索多維數組

也可以使用嵌套循環和內置的 JavaScript 數組搜索方法來搜索嵌套/多維數組。

使用 find() 查找第一個匹配值 方法

// Declare a multidimensional array
var twoDimensionalArray = [
    ['a1', 'a2', 'a3', 'a4'],
    ['b1', 'b2', 'b3', 'b4'],
    ['c1', 'c2', 'c3', 'c4']
];

// Declare a variable to hold the search result when it is found
var found;

// Loop through the outermost array
for (const [rowIndex, rowValue] of twoDimensionalArray.entries()) {

    // Use the find() method to find the first matching value in the sub-array and assign it to the found variable
    found = rowValue.find(function(columnValue, columnIndex){
        
        if(columnValue == 'b3') {
            console.log('Found! row: ' + rowIndex + ', column: ' + columnIndex); 
            return true;
        } else {
            return false;
        }

    }); 

    // If a result has been found we can break out of the for loop as the job is done
    if(typeof found !== 'undefined') break;
    
};

console.log(found); // Confirm the result

這將輸出:

Found! row: 1, column: 2 
b3

有一些方法需要更少的代碼行,但這說明了幕後發生的事情以及數組是如何遍歷的。

使用 filter() 查找所有匹配值 方法

// Declare a multidimensional array - note there are some duplicate 'b2' values in this one!
var twoDimensionalArray = [
    ['a1', 'a2', 'a3', 'b2'],
    ['b1', 'b2', 'b3', 'b4'],
    ['c1', 'c2', 'b2', 'c4']
];

// Declare a variable to hold the search results when it is found - there may be multiple results, so it is an array
var results = [];

// Loop through the outermost array
for (const [rowIndex, rowValue] of twoDimensionalArray.entries()) {

    // Find all matching values in the sub array using the filter() function
    var found = rowValue.filter(function(columnValue, columnIndex){
        
        if(columnValue == 'b2') {
            console.log('Found! row: ' + rowIndex + ', column: ' + columnIndex); 
            return true;
        } else {
            return false;
        }

    }); 

    // Merge what was found in this iteration with the final results
    results = results.concat(found);
    
};

console.log(results); // Confirm the results

這將輸出:

Found! row: 0, column: 3
Found! row: 1, column: 1
Found! row: 2, column: 2
Array(3) [ "b2", "b2", "b2" ]

這證實了具有 b2 值的三個數組元素 從多維數組中找到。

克隆/複製多維數組

克隆和復制數組,尤其是多維數組,需要考慮一些因素——它並不像在 JavaScript 中看起來那麼簡單!

我建議閱讀上面鏈接的文章以了解原因 JavaScript 數組不能簡單地通過將它們的值分配給新變量來複製,但如果你只想看看如何做,這裡是:

var multiDimensionalArrayCopy = JSON.parse(JSON.stringify(multiDimensionalArray));

這將創建一個新變量,multiDimensionalArrayCopy ,這將是名為 multiDimensionalArray 的變量的完整克隆/副本 .


下一篇
No
Tutorial JavaScript 教程
  1. 固體狀態 - 2021 年 9 月

  2. 劊子手項目 |第 11 天

  3. 導入默認導出和命名導出

  4. 100 天代碼挑戰:第 11 天和第 12 天

  5. 拋出錯誤的 Jest 參數化測試

  6. JavaScript 替代了一個強大的字符串操作工具

  7. 表單故事 - 驗證

  1. Javascript – 循環嵌套對象

  2. 協調兒童數組

  3. React:使用狀態鉤子

  4. 在 LINK 上捕獲加載事件

  5. tsParticles 1.37.5 發布

  6. 如何從 Mongoose 的集合中排除一個特定字段?

  7. Vue中的Jest單元測試位置

  1. React:簡介

  2. 反應時間輸入⏳

  3. 10 個有趣且有趣的 JavaScript 效果

  4. VS Code 用戶界面瀏覽器