小程序怎么输出二维数组-猿码集

小程序怎么输出二维数组

在小程序中，我们有时需要将二维数组输出为用户可读的字符串，以便显示在界面上或者保存到本地文件中。本文将介绍小程序中如何输出二维数组。

1.使用for循环输出二维数组

使用for循环遍历二维数组并输出其值是最基本的方法。以下是使用for循环输出一个简单二维数组的代码示例：


// 定义数组
var arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
];
// 遍历数组并输出值
for (var i=0; i<arr.length; i++) {
  for (var j=0; j<arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}

以上代码中使用了两层for循环，外层循环遍历数组的每一行，内层循环遍历当前行的每一个元素，并将其输出到控制台中。

如果需要将数组的值保存到一个字符串中并输出，则代码需要略作修改：


// 定义数组
var arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
];
// 定义变量
var str = '';
// 遍历数组并输出值
for (var i=0; i<arr.length; i++) {
  for (var j=0; j<arr[i].length; j++) {
    str += arr[i][j] + ' ';
  }
  str += '\n';
}
console.log(str);

以上代码中使用了一个字符串变量来保存数组的值，并将每个值用空格隔开，每行末尾加上一个换行符号。最终输出的字符串可供用户查看或保存到本地。

2.使用数组的join方法输出二维数组

数组的join方法可以将数组的所有元素以指定的分隔符连接到一起，生成一个字符串。如果二维数组中每行的元素用空格隔开，每行之间用换行符隔开，则可以使用数组的join方法来输出二维数组的值。


// 定义数组
var arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
];
// 遍历数组并输出值
var str = arr.map(function(item){
  return item.join(' ');
}).join('\n');
console.log(str);

以上代码中使用了数组的map方法来对每一行的元素进行连接，并用换行符号连接每一行的字符串。最终输出的字符串与使用for循环输出的字符串相同。

3.使用JSON.stringify方法输出二维数组

JSON.stringify方法可以将JavaScript对象转换为字符串。如果将二维数组转换为JSON格式的字符串，则可以使用它来输出二维数组的值。


// 定义数组
var arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
];
// 将数组转换为JSON字符串
var jsonStr = JSON.stringify(arr);
console.log(jsonStr);

以上代码中将二维数组转换为JSON格式的字符串，并将其输出到控制台中。由于JSON格式的字符串是一行显示的，如果需要美化显示，则可以使用JSON.stringify的第二个参数。

例如，以下代码使用了JSON.stringify的第二个参数，并使用了replace方法将字符中的逗号替换成逗号加换行：


// 定义数组
var arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
];
// 将数组转换为美化JSON字符串
var jsonStr = JSON.stringify(arr, null, 2).replace(/,\s+/g, ',\n');
console.log(jsonStr);

以上代码中通过JSON.stringify的第二个参数设置了缩进空格数，再通过replace方法将逗号和空格替换为逗号加换行符号。最终输出的字符串较为美化，便于用户查看。

4.使用table标签输出二维数组

在HTML中，table标签可以用来显示表格数据。如果二维数组需要以表格的形式显示，则可以使用table标签来输出。


// 定义数组
var arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
];
// 定义HTML字符串
var htmlStr = '<table>';
// 遍历数组并输出值
for (var i=0; i<arr.length; i++) {
  htmlStr += '<tr>';
  for (var j=0; j<arr[i].length; j++) {
    htmlStr += '<td>' + arr[i][j] + '</td>';
  }
  htmlStr += '</tr>';
}
htmlStr += '</table>';
console.log(htmlStr);

以上代码中使用了table、tr、td等HTML标签来组合字符串，并将二维数组的值嵌入到td标签中。最终输出的字符串可以直接用来在界面中显示表格数据。

5.使用canvas绘制二维数组

在小程序中，canvas标签可以用来绘制图形和文字。如果将二维数组中的数据以矩形的形式绘制到画布上，则可以使用canvas标签来输出二维数组。


// 定义数组
var arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
];
// 获取canvas元素和画笔
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 定义矩形宽、高、间距等参数
var rectWidth = 30;
var rectHeight = 30;
var gap = 5;
// 遍历数组并绘制矩形
for (var i=0; i<arr.length; i++) {
  for (var j=0; j<arr[i].length; j++) {
    // 计算矩形坐标
    var x = (rectWidth + gap) * j;
    var y = (rectHeight + gap) * i;
    // 绘制矩形
    ctx.fillStyle = '#ccc';
    ctx.fillRect(x, y, rectWidth, rectHeight);
    // 绘制文本
    ctx.fillStyle = '#333';
    ctx.font = '16px Arial';
    ctx.fillText(arr[i][j], x+10, y+22);
  }
}

以上代码中使用了canvas的绘图接口绘制了一个二维数组，并将其输出到canvas标签中。绘制过程中使用了矩形的宽、高、间距等参数，并计算出每个矩形对应的坐标。

以上是小程序中输出二维数组的几种常见方法，不同的需求适用不同的方法。开发者可以根据自己的具体需求选用合适的输出方法。

小程序怎么输出二维数组