本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
JavaScript- 1.1 行内、内部、外部三种引用方式
JavaScript- 3.1 定时器函数 window.settimeout & window.settinterval
JavaScript- 3.2 JavaScript实现不同显示器尺寸的响应式主题和页面
JavaScript- 4.1 DOM-document对象
目录
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、JavaScript 中的二维数组
二维数组是数组的数组，在JavaScript中可以通过多种方式创建和操作二维数组。以下是关于JavaScript二维数组的详细介绍：
1、创建二维数组
1. 使用数组字面量
javascript
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];2. 使用Array构造函数
javascript
let rows = 3;
let cols = 3;
let matrix = new Array(rows);
for (let i = 0; i < rows; i++) {
matrix[i] = new Array(cols);
}3. 使用Array.from()方法（ES6）
javascript
let rows = 3;
let cols = 3;
let matrix = Array.from({length: rows}, () => Array.from({length: cols}));4. 使用fill和map方法
javascript
let rows = 3;
let cols = 3;
let matrix = Array(rows).fill().map(() => Array(cols).fill(0));2、访问和修改元素
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// 访问元素
console.log(matrix[1][2]); // 输出: 6 (第二行第三列)
// 修改元素
matrix[0][1] = 20;
console.log(matrix[0][1]); // 输出: 203、遍历二维数组
使用嵌套for循环
javascript
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
console.log(`matrix[${i}][${j}] = ${matrix[i][j]}`);
}
}使用forEach方法
javascript
matrix.forEach((row, i) => {
row.forEach((element, j) => {
console.log(`matrix[${i}][${j}] = ${element}`);
});
});4、常见操作
1. 初始化二维数组并填充值
javascript
let rows = 3;
let cols = 3;
let matrix = [];
for (let i = 0; i < rows; i++) {
matrix[i] = [];
for (let j = 0; j < cols; j++) {
matrix[i][j] = i * cols + j + 1; // 填充1-9的数字
}
}2. 矩阵转置
javascript
function transpose(matrix) {
return matrix[0].map((col, i) => matrix.map(row => row[i]));
}
let transposed = transpose(matrix);3. 查找元素
javascript
function findInMatrix(matrix, value) {
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
if (matrix[i][j] === value) {
return { row: i, col: j };
}
}
}
return null;
}5、注意事项
-
初始化问题：直接使用
new Array(rows).fill(new Array(cols))会导致所有行引用同一个数组对象。javascript// 错误示例 - 所有行实际上是同一个数组 let wrongMatrix = new Array(3).fill(new Array(3)); wrongMatrix[0][0] = 1; console.log(wrongMatrix[1][0]); // 也会变成1 -
不规则数组：JavaScript允许创建不规则的二维数组（每行长度不同）。
javascriptlet jaggedArray = [ [1, 2], [3, 4, 5], [6] ]; -
性能考虑：对于大型二维数组，考虑使用TypedArray或优化访问模式。
6、实际应用示例
1. 图像处理（像素矩阵）
javascript
// 假设有一个3x3的灰度图像矩阵
let image = [
[255, 200, 100],
[200, 150, 50],
[100, 50, 0]
];
// 应用简单的滤镜（反转颜色）
let inverted = image.map(row => row.map(pixel => 255 - pixel));2. 游戏开发（棋盘/地图）
javascript
// 简单的棋盘表示
let chessBoard = Array(8).fill().map((_, i) =>
Array(8).fill().map((_, j) => (i + j) % 2 ? '♜' : '♖')
);二维数组在JavaScript中非常灵活，可以根据具体需求选择最适合的创建和操作方式。
二、代码实践
代码如下：
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二维数组</title>
</head>
<body>
<script type="text/javascript">
//第一种
var a=[1,2,3][1,2];
console.log(a);
//第二种 已知位置
var myArray=new Array(1,2,3,4);
var myArray1=new Array();
myArray1[2]=myArray;
console.log(myArray1);
//第三种 遍历
var myArray2=new Array;
for(var i=0;i<6;i++){
myArray2[myArray2.length]=new Array();//每个位置上生成一个数组
for(var j=0;j<3;j++){
myArray2[i][j]=i+":"+j;
}
}
console.log(myArray2);
</script>
</body>
</html>
代码运行如下：
总结
以上就是今天要讲的内容，本文简单记录了二维数组，仅作为一份简单的笔记使用，大家根据注释理解
扫一扫
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
