如何在JavaScript/TypeScript中将多维数组扁平化并获取下拉框值？

一、多维数组转一维的正确实现 #

你的原始代码问题在于错误地把数组自身push进去了，导致出现嵌套结构，下面是几种靠谱的实现方式：

1. 用ES6+的flat()方法（最简洁） #

flat()专门用来扁平化数组，二维数组直接调用即可，不确定深度的多维数组可以传Infinity：

let filterData = [[1,2,3],['x','y'],['z',10]];
this.filteredData = filterData.flat();
// 输出结果：[1, 2, 3, 'x', 'y', 'z', 10]

2. 用concat+扩展运算符（兼容稍旧环境） #

如果你的运行环境不支持flat()，可以用concat结合扩展运算符展开子数组：

this.filteredData = [].concat(...filterData);

3. 手动循环遍历（兼容旧环境） #

手动遍历每个子数组，把元素逐个添加到结果里：

this.filteredData = [];
filterData.forEach(subArr => {
  this.filteredData.push(...subArr);
  // 或者用普通for循环：
  // for (const item of subArr) {
  //   this.filteredData.push(item);
  // }
});

二、生成下拉框选项值 #

根据常见的UI组件需求，一般需要把一维数组转换成{value: xxx, label: xxx}的结构，或者直接生成原生option元素：

1. 生成标准选项结构（适配多数UI库） #

// 基于已经扁平化的filteredData
this.selectOptions = this.filteredData.map(item => ({
  value: item,
  label: item.toString() // 把数字转成字符串，统一label格式
}));

之后就可以把selectOptions绑定到下拉组件的options属性上。

2. 生成原生select的option元素 #

如果是用原生HTML的select标签，直接循环一维数组生成option即可：

<select>
  {this.filteredData.map(item => (
    <option key={item} value={item}>{item}</option>
  ))}
</select>

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