JavaScript 二维数组的三种定义与初始化方法

在 JavaScript 中定义和初始化二维数组的三种常用方法,并通过示例代码和实际应用场景进行解释,帮助开发者深入理解其使用技巧和注意事项。


一、什么是二维数组?

二维数组是一种特殊的数据结构,它实际上是一个"数组的数组"。在 JavaScript 中,数组可以包含任意类型的元素,包括另一个数组。这样就构成了二维甚至多维数组的结构。

二、三种定义与初始化方法

方法一:直接定义与初始化

适用于已知所有元素且数量较少的情况。

javascript 复制代码
// 直接定义一个 3x2 的二维数组
var matrix = [
  ["A1", "A2"],
  ["B1", "B2"],
  ["C1", "C2"]
];

优点 :简洁直观,适合静态数据。
缺点:不适合动态或大规模数据初始化。


方法二:动态初始化未知长度的二维数组

适用于需要动态设定数组维度的情况。

javascript 复制代码
// 初始化一个 i x j 的二维数组,所有元素初始为空字符串
var i = 3; // 行数
var j = 2; // 列数
var dynamicArray = new Array(i);

for (var row = 0; row < i; row++) {
  dynamicArray[row] = new Array(j);
  for (var col = 0; col < j; col++) {
    dynamicArray[row][col] = ""; // 初始化每个元素
  }
}

// 后续可动态赋值
dynamicArray[1][0] = "Hello";

优点 :灵活,可动态设定大小。
缺点:需要显式初始化每个元素。


方法三:通过数组合并生成二维数组

适用于将多个一维数组合并为二维数组的场景。

javascript 复制代码
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];

var combinedArray = [];

for (var idx = 0; idx < arr1.length; idx++) {
  combinedArray[idx] = [arr1[idx], arr2[idx], arr3[idx]];
}

console.log(combinedArray);
// 输出: [[1,4,7], [2,5,8], [3,6,9]]

优点 :适合合并多个已有数组。
缺点:要求各数组长度一致。


三、多维数组的扩展:三维数组示例

javascript 复制代码
var threeDArray = [];

for (var x = 0; x < 2; x++) {
  threeDArray[x] = [];
  for (var y = 0; y < 2; y++) {
    threeDArray[x][y] = [];
    for (var z = 0; z < 2; z++) {
      threeDArray[x][y][z] = x + y + z;
    }
  }
}

console.log(threeDArray);
// 输出: [[[0,1],[1,2]], [[1,2],[2,3]]]

四、UML 图示:二维数组结构

以下是一个 3x2 二维数组的结构示意图:
1 3 contains 1 2 TwoDArray -Array rows Row -Array cells Cell


五、单词与短语表

单词/短语 音标 词性 释义 词根/词缀 同义词/反义词 例句
Array /əˈreɪ/ noun 数组 - List We use an array to store multiple values.
Initialize /ɪˈnɪʃəlaɪz/ verb 初始化 initial + ize Set up You should initialize the variable before using it.
Dimension /daɪˈmenʃn/ noun 维度 di + mension - A two-dimensional array has rows and columns.
Dynamic /daɪˈnæmɪk/ adjective 动态的 dynam- + ic Static (反) JavaScript allows dynamic array creation.
Element /ˈelɪmənt/ noun 元素 - Component Each element in the array can be accessed by index.
Loop /luːp/ noun/verb 循环 - Iterate Use a loop to traverse the array.
Index /ˈɪndeks/ noun 索引 - Subscript Array indices start from zero.
Merge /mɜːrdʒ/ verb 合并 - Combine We can merge two arrays into one.
Matrix /ˈmeɪtrɪks/ noun 矩阵 - Grid A matrix is a two-dimensional array.
相关推荐
方也_arkling7 分钟前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
qq_1777673715 分钟前
React Native鸿蒙跨平台剧集管理应用实现,包含主应用组件、剧集列表、分类筛选、搜索排序等功能模块
javascript·react native·react.js·交互·harmonyos
qq_1777673720 分钟前
React Native鸿蒙跨平台自定义复选框组件,通过样式数组实现选中/未选中状态的样式切换,使用链式调用替代样式数组,实现状态驱动的样式变化
javascript·react native·react.js·架构·ecmascript·harmonyos·媒体
web打印社区23 分钟前
web-print-pdf:突破浏览器限制,实现专业级Web静默打印
前端·javascript·vue.js·electron·html
烬头88211 小时前
React Native鸿蒙跨平台采用了函数式组件的形式,通过 props 接收分类数据,使用 TouchableOpacity实现了点击交互效果
javascript·react native·react.js·ecmascript·交互·harmonyos
Amumu121381 小时前
Vuex介绍
前端·javascript·vue.js
2601_949809591 小时前
flutter_for_openharmony家庭相册app实战+相册详情实现
javascript·flutter·ajax
qq_177767371 小时前
React Native鸿蒙跨平台通过Animated.Value.interpolate实现滚动距离到动画属性的映射
javascript·react native·react.js·harmonyos
2601_949833392 小时前
flutter_for_openharmony口腔护理app实战+饮食记录实现
android·javascript·flutter
2601_949480062 小时前
【无标题】
开发语言·前端·javascript