JavaScript数组操作异常：字符串展开拆分为单个字符问题及修复

错误原因 #

你最后一步使用map遍历的是前序操作得到的字符串数组（['AAAA', 'AACC']），这里的每个迭代项d是字符串类型。在JavaScript中，扩展运算符...作用于字符串时，会将字符串拆分为单个字符的数组（比如...'AAAA'会被解析为['A','A','A','A']）。因此每一次map迭代都会生成一个新的数组[data.alternateId, ...d]，最终得到嵌套的二维数组，完全偏离了你想要追加元素的需求。

修复方法 #

不需要用map，直接在筛选映射后的数组末尾添加data.alternateId即可，以下是几种简洁的实现方式：

1. 使用concat方法（链式调用友好）

let result = data.content.all_content
    .filter(d => d.id !== data.mainId)
    .map(d => d.id)
    .concat(data.alternateId);

2. 使用扩展运算符构建新数组

// 先获取筛选后的id数组
let filteredIds = data.content.all_content
    .filter(d => d.id !== data.mainId)
    .map(d => d.id);
// 合并新元素
let result = [...filteredIds, data.alternateId];

3. 用reduce实现链式追加（可选）
   如果坚持要在链式调用中完成，也可以用reduce替代最后一步的map：

let result = data.content.all_content
    .filter(d => d.id !== data.mainId)
    .map(d => d.id)
    .reduce((acc, curr) => {
        acc.push(curr);
        return acc;
    }, [data.alternateId]); // 初始数组包含alternateId

以上方法都能得到你预期的结果['AAAA', 'AACC', 'AADD']（顺序可根据需求调整）。

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