uniapp 二维数组
uniapp 二维数组操作指南
在 UniApp 中处理二维数组与标准 JavaScript 操作一致，以下是一些常见场景的实现方法。
创建二维数组
通过嵌套数组初始化二维数组：
let twoDArray = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];动态创建指定行列的二维数组：
function create2DArray(rows, cols, defaultValue = 0) {
return Array(rows).fill().map(() => Array(cols).fill(defaultValue));
}
let matrix = create2DArray(3, 3); // 3x3矩阵初始值为0访问元素
通过双重索引访问元素：
let value = twoDArray[1][2]; // 获取第2行第3列的值（6）遍历二维数组
使用嵌套循环进行遍历：
twoDArray.forEach((row, rowIndex) => {
row.forEach((item, colIndex) => {
console.log(`[${rowIndex},${colIndex}] = ${item}`);
});
});修改元素
更新特定位置的元素值：
twoDArray[0][1] = 99; // 将第1行第2列的值改为99常用操作
获取行数和列数：
let rowCount = twoDArray.length;
let colCount = twoDArray[0].length;数组转置（行列互换）：
function transpose(matrix) {
return matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]));
}
let transposed = transpose(twoDArray);实际应用示例
在 UniApp 的 Vue 文件中使用二维数组：
export default {
data() {
return {
gameBoard: [
['', '', ''],
['', '', ''],
['', '', '']
]
}
},
methods: {
resetBoard() {
this.gameBoard = this.gameBoard.map(row => row.map(() => ''));
}
}
}注意事项
- 确保每行的列数一致，否则可能引发错误
- 处理大型二维数组时考虑性能优化
- 在模板中渲染时建议使用双重 v-for
以上方法均适用于 UniApp 的各个平台（H5/小程序/App），实际使用时可根据具体业务需求调整实现方式。
