如何創(chuàng)建和添加二維數組？如何遍歷數組？

在項目開發(fā)中，經常需要對多維數組進行操作。其中，二維數組是最常見的多維數組。本節(jié)以二維數組為例講解如何創(chuàng)建二維數組、如何添加二維數組元素以及如何遍歷二維數組等常見的操作。

1.創(chuàng)建與遍歷

在前面的小節(jié)中，已經學習了一維數組的各種創(chuàng)建方式，了解一維數組如何創(chuàng)建后，二維數組的創(chuàng)建就非常的簡單了，只需將數組元素設置為數組即可。具體示例如下。

// 使用Array對象創(chuàng)建數組
var info = new Array(new Array('Tom', 13, 155),new Array('Lucy', 11, 152));
var arr= new Array(new Array,new Array);
// 空二維數組// 使用“[]”創(chuàng)建數組
var num = [[1, 3], [2, 4]];
var empty= [[], []];           // 空二維數組

上述代碼分別演示了如何利用Array對象和“[]”的方式創(chuàng)建二維數組。例如，info的第一個元素(info[0])是一個一維數組["Tom", 13, 155]，info[0]的第一個元素是字符型數據Tom。在

創(chuàng)建完二維數組后，如何遍歷二維數組中的元素，對其進行操作呢?從前面的學習我們知道，一維數組可以利用for、for...in或for...of(ES6提供)進行遍歷。那么，二維數組只需在遍歷數組后，再次遍歷數組的元素即可獲取到二維數組的元素值。

為了讓大家更加清晰的了解二維數組的創(chuàng)建與遍歷，接下來以二維數組求和為例進行演示。如例3-3所示?！纠?-3】demo03.html

< script > 
   var arr = [[12, 59, 66],[100, 888]]; // 待求和的二維數組
   var sum = 0;
   for (var i in arr) { // 遍歷數組arr
     for (var j in arr[i]) { // 遍歷數組arr的元素
        sum += arr[i][j]; // 二維數組元素累計相加
    }
}
 console.log('待求和的二維數組：' + arr);
 console.log('二維數組arr求和等于：' + sum);
 < /script>

上述第2行代碼，創(chuàng)建了一個待求和的二維數組arr，第3行定義sum變量保存二維數組各元素相加之和。第4~8行代碼利用for...in遍歷二維數組，并完成數組元素的累加。其中，i表示arr數組元素的下標，如0和1;j表示arr[i]中的元素下標，如0、1和2。結果如圖3-5所示。

圖3-5二維數組求和另外，在Web項目開發(fā)中，還經常通過多維空數組添加元素的方式來創(chuàng)建多維數組。下面以添加二維空數組元素為例進行演示。具體示例如下。

var arr = [];    // 創(chuàng)建一維空數組
for(vari = 0 ; i< 3; ++i){
 arr[i] = [];// 將當前元素設置為數組
 arr[i][0] = i;// 為二維數組元素賦值
}

在上述代碼中，若要為二維數組元素(如arr[i][0])賦值，首先要保證添加的元素(如arr[i])已經被創(chuàng)建為數組，否則程序會報“Uncaught TypeError......”錯誤。

注意：

在創(chuàng)建多維數組時，雖然JavaScript沒有限制數組的維數，但是在實際應用中，為了便于代碼閱讀、調試和維護，推薦使用三維及以下的數組保存數據。

【案例】二維數組轉置

二維數組的轉置指的是將二維數組橫向元素保存為縱向元素，效果如圖3-6所示。

從圖3-6可以看出，res[0][0] = arr[0][0]、res[0][1] = arr[1][0]、res[0][2] =arr[2][0]，res [0][3] =arr[3][0]，依次類推，可以得出的規(guī)律為：res[i][j] = arr[j][i]，且res數組長度=arr元素(如arr[0])的長度，res元素(如res[0])的長度=arr數組的長度。

接下來，將按照找出的規(guī)律，實現(xiàn)二維數組的轉置，具體示例如下。

<script>
  var arr = [['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i'], ['j', 'k', 'l']];
  var res = [];
  for (vari = 0; i < arr[0].length; ++i) {// 遍歷res中的所有元素
    res[i] = [];
      for(varj = 0; j < arr.length; ++j){// 遍歷res元素中的所有元素
res[i][j] = arr[j][i];// 為二維數組賦值
  }
}
  console.group('轉置前：');
  console.log(arr);
  console.groupEnd();
  console.group('轉置后：');
  console.log(res);
  console.groupEnd();
</script>

上述第2行代碼，變量arr保存轉置前的數組;第3~9行代碼用于創(chuàng)建并遍歷轉置后的數組res。其中，第5行用于完成res二維數組的創(chuàng)建，防止為二維數組添加元素時報錯;第7行根據轉置規(guī)律為轉置后的數組res賦值。為查看轉置前后的數組，通過第10~15行代碼在控制臺分組輸出。效果如圖3-7所示。

圖3-7二維數組轉置

多維數組是什么？Javascript多維數組是什么？

二維數組是什么？二維數組怎么用？

JavaScript如何遍歷數組？

JavaScript數組類型檢測的方法

傳智教育web前端培訓課程