JavaScript join方法对自建过滤数组不生效的问题排查

问题原因 #

你的代码问题出在定义resultA的行，额外给filter返回的结果套了一层数组括号：

// 错误写法：外层多了[]，得到的resultA是二维数组 [[2,2,2]]
const resultA = [constants.filter((x, i) => stdFound.includes(i))];

此时resultA是仅包含1个元素的二维数组，唯一的元素才是你预期的[2,2,2]。调用join方法时是对外层数组执行拼接，因为外层数组只有1个元素，不管用什么分隔符拼接结果都和元素本身的toString结果一致，也就是2,2,2，看起来就像join没生效。

修复方案 #

去掉多余的外层数组括号即可：

// 正确写法：resultA就是过滤得到的一维数组 [2,2,2]
const resultA = constants.filter((x, i) => stdFound.includes(i));

额外优化建议 #

你当前的代码逻辑存在冗余，filter方法本身就会返回符合条件的元素组成的新数组，不需要额外声明空数组在遍历里push，也不需要先收集索引再二次过滤，可以直接简化为：

const constants = [2, 2, 4, 2, 6, 4, 7, 8];
// 直接过滤出所有值为2的元素，一步得到结果
const resultA = constants.filter(elem => elem === 2);
document.getElementById("resultA").innerHTML = resultA;
document.getElementById("resultJ").innerHTML = resultA.join(" x ");

修改后运行结果为：

• ARRAY : 2,2,2
• JOIN x : 2 x 2 x 2

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