如何在JavaScript数组方法链中不使用map在数组开头插入元素？

你遇到的核心问题是：splice和unshift都无法返回修改后的原数组，导致链式调用中断。以下是几种更简洁的解决方案：

方案1：用reduce直接构造新数组（纯链式） #

利用reduce的第四个参数获取当前完整数组，直接返回插入目标元素后的新数组：

console.log(
    [1, 2, 3]
        .map(a => a + 1)
        .reduce((_, __, ___, arr) => [7, ...arr], [])
        .map(a => a * 10)
);

该方法不修改原数组，全程保持链式结构，代码简洁高效。

方案2：用flatMap插入首元素 #

通过flatMap在数组第一个元素前插入目标值，其余元素正常返回：

console.log(
    [1, 2, 3]
        .map(a => a + 1)
        .flatMap((item, idx) => idx === 0 ? [7, item] : [item])
        .map(a => a * 10)
);

如果需要兼容空数组场景（空数组时也要插入7），可以调整逻辑：

console.log(
    [1, 2, 3]
        .map(a => a + 1)
        .flatMap((item, idx, arr) => arr.length === 0 ? [7] : idx === 0 ? [7, item] : [item])
        .map(a => a * 10)
);

方案3：扩展数组原型（最直观） #

如果项目允许扩展数组原型，可以添加一个prepend方法，专门用于链式插入：

// 注意：仅在自己的代码环境中使用，避免全局原型污染
Array.prototype.prepend = function(...items) {
    return [...items, ...this];
};

console.log(
    [1, 2, 3]
        .map(a => a + 1)
        .prepend(7)
        .map(a => a * 10)
);

这个方法最符合链式调用的直观逻辑，每次调用都会返回新数组，不会修改原数组。

方案4：拆分构造新数组（非链式但简洁） #

如果不强制全程链式，直接用展开运算符构造新数组的写法更直观：

const processedArr = [1, 2, 3].map(a => a + 1);
console.log([7, ...processedArr].map(a => a * 10));

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