如何将独立文件中的Array原型自定义方法导出并跨文件导入使用

一、编写独立的扩展源文件 #

这类全局原型扩展不需要做复杂的导出封装，只需要把自定义方法直接挂载到Array原型对象上，文件被加载时就会自动完成全局扩展注入：

• 首先修正示例代码中的语法问题：原代码Array.prototype.mySort == function(){...}使用了相等判断运算符，不会完成方法赋值，必须改成单等号的函数赋值逻辑才能正常挂载
• 原型方法内不要使用箭头函数，否则this会脱离数组实例指向全局作用域，导致方法执行异常
• 可以加简单的存在性判断，避免重复挂载时覆盖原生方法

示例的array-helper-functions.js核心结构：

// array-helper-functions.js
// 按对象text字段排序的自定义方法
if (!Array.prototype.mySort) {
  Array.prototype.mySort = function() {
    return this.sort((a, b) => a.text < b.text ? -1 : 1)
  }
}

// 其他自定义扩展方法按照同样逻辑挂载即可，比如：
if (!Array.prototype.myUnique) {
  Array.prototype.myUnique = function() {
    return [...new Set(this)]
  }
}

二、导入配置 #

这类扩展方法不需要在业务文件中做单独的具名/默认导入，只要在项目里导入一次该文件，所有数组实例就会自动具备对应的方法：

• 想要全项目生效的话，直接在项目入口文件（如main.js、index.js）的最顶部添加一行导入语句：

  import './array-helper-functions'
  

• 想要仅在部分业务模块生效的话，直接在对应业务文件的顶部导入该文件即可，不需要额外的赋值操作

导入完成后，就可以直接实现预期的链式调用效果，业务代码里不需要额外引入自定义方法：

// 业务文件中的实际调用示例
const myArray = [{ text: '测试项A', id: 1 }, { text: '测试项B', id: 2 }]

const transformedArray = myArray
  .map(item => ({ ...item, enabled: true }))
  .mySort()
  .filter(item => item.id > 0)

三、实用注意事项 #

• 自定义方法命名尽量带专属前缀（如示例中的my前缀），避免和未来JS原生新增的数组方法、第三方库的扩展逻辑重名产生冲突
• 如果项目使用TypeScript，需要单独在全局类型声明文件中补充原型方法的类型定义，否则会触发“方法不存在”的类型报错
• 扩展方法执行时的this永远指向调用该方法的数组实例，不要随意修改this指向的逻辑

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