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

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

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

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

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

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

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

為了讓大家更加清晰的了解二維數(shù)組的創(chuàng)建與遍歷，接下來(lái)以二維數(shù)組求和為例進(jìn)行演示。如例3-3所示。【例3-3】demo03.html

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

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

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

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

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

注意：

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

【案例】二維數(shù)組轉(zhuǎn)置

二維數(shù)組的轉(zhuǎn)置指的是將二維數(shù)組橫向元素保存為縱向元素，效果如圖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]，依次類(lèi)推，可以得出的規(guī)律為：res[i][j] = arr[j][i]，且res數(shù)組長(zhǎng)度=arr元素(如arr[0])的長(zhǎng)度，res元素(如res[0])的長(zhǎng)度=arr數(shù)組的長(zhǎng)度。

接下來(lái)，將按照找出的規(guī)律，實(shí)現(xiàn)二維數(shù)組的轉(zhuǎ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];// 為二維數(shù)組賦值
  }
}
  console.group('轉(zhuǎn)置前：');
  console.log(arr);
  console.groupEnd();
  console.group('轉(zhuǎn)置后：');
  console.log(res);
  console.groupEnd();
</script>

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

圖3-7二維數(shù)組轉(zhuǎn)置

多維數(shù)組是什么？Javascript多維數(shù)組是什么？

二維數(shù)組是什么？二維數(shù)組怎么用？

JavaScript如何遍歷數(shù)組？

JavaScript數(shù)組類(lèi)型檢測(cè)的方法

傳智教育web前端培訓(xùn)課程