JavaScript如何实现可链式调用的数组前置拼接且不修改内置原型

你可以根据项目的代码风格选下面任意一种方案，都不会污染原生Array原型，同时保持链式调用的流畅性：

方案1：零依赖原生写法（无需额外封装） #

直接利用数组原生reduce方法即可实现等价precat的效果，不需要写任何自定义工具函数，直接嵌入现有链式流程：

const someAmazingArrayOperation = (list) => 
  list
    .map(transformStuff)
    .sort(myAwesomeSortAlgorithm)
    .concat([someSuffixElement])
    // 传入你要前置的元素/数组作为reduce初始值即可
    .reduce((res, item) => (res.push(item), res), [newFirstElement])
    .filter(unique)

如果需要前置多个元素或者整个数组，直接把初始值替换成对应数组就行，比如要前置[a,b,c]就把初始值写成[a,b,c]，和concat的传参逻辑一致。这个写法完全遵循原生数组方法返回新数组的特性，不会修改原数组，时间复杂度和原生concat一致，没有额外性能开销。

方案2：轻量包装类（最贴近预期调用语法） #

如果precat这类自定义数组方法用得比较多，可以写一个极简的包装类，只代理你需要用到的原生数组方法，再加上自定义方法，完全不碰原生原型：

// 全局只需要定义一次
class ChainArr {
  constructor(init = []) {
    this._arr = [...init]
  }
  // 代理常用原生数组方法，需要用哪个加哪个，也可以写自动代理逻辑批量绑定
  map(...args) { this._arr = this._arr.map(...args); return this }
  sort(...args) { this._arr = this._arr.sort(...args); return this }
  concat(...args) { this._arr = this._arr.concat(...args); return this }
  filter(...args) { this._arr = this._arr.filter(...args); return this }
  // 自定义precat方法，逻辑和concat对称
  precat(...prefix) {
    this._arr = prefix.flat().concat(this._arr)
    return this
  }
  // 最终取出原生数组
  toArray() { return [...this._arr] }
}

业务代码里的调用逻辑和预期写法几乎完全一致：

const someAmazingArrayOperation = (list) => 
  new ChainArr(list)
    .map(transformStuff)
    .sort(myAwesomeSortAlgorithm)
    .concat([someSuffixElement])
    .precat([newFirstElement])
    .filter(unique)
    .toArray()

后续要加其他自定义数组方法（比如去重、洗牌、分组等）都可以直接加在这个类里，不会有全局污染问题。

方案3：函数式管道（适合函数式编程风格的项目） #

如果项目本身采用函数式风格，可以写一个通用管道函数，搭配纯函数形式的precat实现链式流程，所有逻辑都是纯函数，无副作用：

// 通用管道工具，全局定义一次
const pipe = (val, ...fns) => fns.reduce((acc, fn) => fn(acc), val)
// precat纯函数
const precat = (...prefix) => arr => prefix.flat().concat(arr)

// 业务代码使用
const someAmazingArrayOperation = (list) => pipe(
  list,
  l => l.map(transformStuff),
  l => l.sort(myAwesomeSortAlgorithm),
  l => l.concat([someSuffixElement]),
  precat([newFirstElement]),
  l => l.filter(unique)
)

不要为了省事儿修改Array.prototype，除了会引发命名冲突、第三方库兼容问题外，还会破坏原生对象的行为预期，在大型项目里隐患非常多。

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