JavaScript动态拆分二维数组元素生成单元素子数组的实现方法

错误原因分析 #

你的原有代码存在两个核心问题：

1. data[i]本身就是数组类型，并非逗号分隔的字符串，调用字符串专属的split()方法会直接抛出类型错误
2. 你仅取了每个子数组的第一个元素，无法收集到子数组中其他位置的元素

解决方案 #

简洁实现（ES6+ 环境支持）

利用数组扁平化、Set 去重、map 转换格式三步完成需求：

let data = [
    [ "ALISHA", "SUICA", "PASMO" ],
    [ "HARMONY" ],
    [ "OCTOPUS" ]
]
let data1 = [
    [ "ALISHA",  ],
    [ "HARMONY" ],
    [ "OCTOPUS", "SUICA", "PASMO" ]
]

const formatData = (input) => [...new Set(input.flat())].map(item => [item])

// 测试调用
let result = formatData(data)
let result1 = formatData(data1)
// 两者输出完全符合预期结构

兼容旧环境的循环实现

如果需要兼容不支持 ES6 新特性的环境，可以用双层循环加对象去重实现：

function formatData(input) {
    const uniqueCache = {}
    const result = []
    for (let i = 0; i < input.length; i++) {
        const subArr = input[i]
        for (let j = 0; j < subArr.length; j++) {
            const current = subArr[j]
            if (!uniqueCache[current]) {
                uniqueCache[current] = true
                result.push([current])
            }
        }
    }
    return result
}

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