Vue中提取二维数组子数组首个元素至新数组的报错问题及解决方法

嘿，这个问题我太熟了！你遇到的TypeError: _this.smallArray.add is not a function报错，核心原因是普通数组根本没有add()方法——这个方法是给Set（集合）对象用的，而你的smallArray应该是个普通数组对吧？

下面给你两种最适合的解决方案：

方案1：直接用map生成目标数组（最简洁优雅） #

map方法本身就是用来遍历原数组并返回一个新数组的，完全匹配你的需求，不需要额外维护空数组再往里加元素：

const bigArray = [["email", "test@test.com"], ["phone", 123123123], ["address", "street"]];
const smallArray = bigArray.map(field => field[0]);
// 结果：["email", "phone", "address"]

这种方式一步到位，map会自动把每个子数组的第一个元素收集成新数组返回给你。

方案2：用push()往已有数组添加元素（如果需要保留原数组引用） #

如果你已经提前声明了空数组smallArray = []，想要往里面逐个添加元素，那应该用数组的push()方法（这是数组添加元素的标准方法）：

const bigArray = [["email", "test@test.com"], ["phone", 123123123], ["address", "street"]];
const smallArray = [];
bigArray.forEach(field => {
  smallArray.push(field[0]);
});
// 同样得到目标数组：["email", "phone", "address"]

额外提醒 #

别再混淆数组和Set的方法啦：

• 普通数组添加元素用push()（末尾加）、unshift()（开头加）
• Set对象添加元素才用add()

内容的提问来源于stack exchange，提问作者edi233