仅被单个函数使用的大型JS数组应定义在函数内部还是外部

是否应该把数组移到函数外部 #

• 这是非常合理的最佳实践，十分推荐这么操作。你的理解完全正确：定义在函数内部的引用类型值（比如这里的colors数组），每次函数执行都会创建一个全新的实例，哪怕数组内容没有任何变化。
• 本身colors体量较大，加上函数调用频次高的话，重复创建数组会产生很多不必要的性能开销：既要反复分配内存存储数组内容，后续还要GC回收这些用完就丢的临时数组，累计下来的消耗完全可以避免。

每次创建数组的性能影响能不能忽略 #

• 这取决于实际使用场景：如果数组只有十几项、函数调用频率极低，那这点损耗确实可以不用在意；但如果数组有上百甚至更多条目，函数又是高频调用的场景——比如列表渲染时每个项都要调用一次做配色，那长期运行下来的性能影响会很明显，特别是在低配置的移动设备上，很容易感知到卡顿。
• 额外说一句，把固定不变的静态常量移到函数外部，除了性能收益外还能提升代码可读性：其他维护代码的人一眼就能看出来colors是固定配置，和函数运行时的入参、动态状态没有关联。

可选优化方案 #

如果你担心把colors放到外层作用域会污染命名空间，还可以用立即执行函数（IIFE）做闭包封装，既能保留数组持久化的收益，也不会对外暴露内部变量：

const toColor = (() => {
  const colors = [
    colorHash,
    colorHash,
    colorHash // 剩余更多颜色项
  ];

  return (name) => {
    // 原有根据name获取颜色的逻辑
    return color;
  };
})();

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