【蓝牙小程序】获取二维数组的第一列数据

在微信小程序中读取二维数组的第一列数据，可以通过几种简单的方法实现。下面我将介绍几种常用的方式：

方法一：使用map方法提取第一列

javascript

复制

// 假设有一个二维数组
const twoDimArray = [
  [1, 'A', '数据1'],
  [2, 'B', '数据2'],
  [3, 'C', '数据3']
];

// 提取第一列数据
const firstColumn = twoDimArray.map(row => row[0]);

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

方法二：使用for循环提取

javascript

复制

const twoDimArray = [
  [1, 'A', '数据1'],
  [2, 'B', '数据2'],
  [3, 'C', '数据3']
];

const firstColumn = [];
for (let i = 0; i < twoDimArray.length; i++) {
  firstColumn.push(twoDimArray[i][0]);
}

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

方法三：在小程序Page中使用

javascript

复制

Page({
  data: {
    twoDimArray: [
      [1, 'A', '数据1'],
      [2, 'B', '数据2'],
      [3, 'C', '数据3']
    ],
    firstColumn: []
  },
  
  onLoad() {
    this.extractFirstColumn();
  },
  
  extractFirstColumn() {
    const firstColumn = this.data.twoDimArray.map(row => row[0]);
    this.setData({
      firstColumn: firstColumn
    });
  }
});

方法四：处理可能不规则的二维数组（安全方法）

javascript

复制

Page({
  data: {
    twoDimArray: [
      [1, 'A', '数据1'],
      [2],                  // 缺少元素的子数组
      [3, 'C', '数据3'],
      null,                 // 非数组元素
      undefined
    ],
    firstColumn: []
  },
  
  onLoad() {
    this.extractFirstColumnSafely();
  },
  
  extractFirstColumnSafely() {
    const firstColumn = this.data.twoDimArray
      .filter(row => Array.isArray(row) && row.length > 0)
      .map(row => row[0]);
    
    this.setData({
      firstColumn: firstColumn
    });
  }
});

在WXML中显示第一列数据

xml

复制

<view>
  <text>原始二维数组：</text>
  <view wx:for="{{twoDimArray}}" wx:key="*this">
    <text>{{item}}</text>
  </view>
  
  <text>第一列数据：</text>
  <view wx:for="{{firstColumn}}" wx:key="*this">
    <text>{{item}}</text>
  </view>
</view>

 

运行 HTML

高级用法：提取特定列并带索引

如果需要同时保留行索引信息：

javascript

复制

extractFirstColumnWithIndex() {
  const firstColumnWithIndex = this.data.twoDimArray
    .map((row, index) => ({
      index: index,
      value: row[0]
    }));
  
  this.setData({
    firstColumn: firstColumnWithIndex
  });
}

对应的WXML显示：

xml

复制

<view wx:for="{{firstColumn}}" wx:key="index">
  <text>第{{item.index}}行: {{item.value}}</text>
</view>

 

运行 HTML

注意事项

1. 边界情况处理：确保子数组存在且不为空

2. 性能考虑：对于大型数组，避免频繁操作

3. 数据绑定：修改数据后要使用setData更新视图

4. 空值处理：根据业务需求决定如何处理空值或undefined

以上方法都可以在小程序中有效提取二维数组的第一列数据，选择哪种方法取决于你的具体需求和数组结构的复杂性。