教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

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

更新時間:2022年03月25日15時03分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓

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

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

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

// 使用Array對象創(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對象和“[]”的方式創(chuàng)建二維數(shù)組。例如,info的第一個元素(info[0])是一個一維數(shù)組["Tom", 13, 155],info[0]的第一個元素是字符型數(shù)據(jù)Tom。在

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

為了讓大家更加清晰的了解二維數(shù)組的創(chuàng)建與遍歷,接下來以二維數(shù)組求和為例進行演示。如例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ù)組元素累計相加
    }
}
 console.log('待求和的二維數(shù)組:' + arr);
 console.log('二維數(shù)組arr求和等于:' + sum);
 < /script>

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

創(chuàng)建與遍歷二維數(shù)組

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

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

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

注意:

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

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

二維數(shù)組的轉(zhuǎn)置指的是將二維數(shù)組橫向元素保存為縱向元素,效果如圖3-6所示。

二維數(shù)組轉(zhuǎn)置

從圖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數(shù)組長度=arr元素(如arr[0])的長度,res元素(如res[0])的長度=arr數(shù)組的長度。

接下來,將按照找出的規(guī)律,實現(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ù)組添加元素時報錯;第7行根據(jù)轉(zhuǎn)置規(guī)律為轉(zhuǎn)置后的數(shù)組res賦值。為查看轉(zhuǎn)置前后的數(shù)組,通過第10~15行代碼在控制臺分組輸出。效果如圖3-7所示。

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

猜你喜歡:

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

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

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

JavaScript數(shù)組類型檢測的方法

傳智教育web前端培訓課程

0 分享到:
和我們在線交談!