如何让函数内的局部数组在每次调用时实现累加？

问题 #

现有一段JavaScript代码，期望将传入的参数添加至数组并返回所有数组元素，代码如下：

function addToArray(param) {
    const array = [];
    
    array.push(param);
    
    return array; 
}

console.log(addToArray('abc'))
console.log(addToArray(2))
console.log(addToArray('text'))

当前每次调用输出分别为：

[ 'abc' ]

[ 2 ]

[ 'text' ]

但期望的输出为：

[ 'abc' ]

[ 'abc', 2 ]

[ 'abc', 2, 'text' ]

已知将数组放在函数外部可实现该效果，但能否在函数内部以局部变量的方式实现，而不将其设为全局变量？

解决方案 #

当然可以，核心是通过闭包让函数持久化局部状态，同时避免污染全局作用域。以下是几种可行的实现方式：

方法1：立即执行函数创建闭包 #

这是最经典的实现方式，把数组封装在闭包作用域里，只有内部函数能访问它：

const addToArray = (function() {
    const array = []; // 仅闭包内可见的局部数组
    return function(param) {
        array.push(param);
        return [...array]; // 返回数组副本，防止外部直接修改内部状态
    }
})();

console.log(addToArray('abc')) // [ 'abc' ]
console.log(addToArray(2))      // [ 'abc', 2 ]
console.log(addToArray('text')) // [ 'abc', 2, 'text' ]

如果不需要限制外部修改，也可以直接返回array本身，但返回副本更安全。

方法2：利用Symbol创建函数私有属性 #

用ES6的Symbol作为键名，让数组成为函数的“私有”属性，不会被常规遍历方法访问到：

const arrayKey = Symbol('array');

function addToArray(param) {
    if (!this[arrayKey]) {
        this[arrayKey] = [];
    }
    this[arrayKey].push(param);
    return [...this[arrayKey]];
}

// 绑定this指向函数自身，确保状态持久化
const boundAdd = addToArray.bind(addToArray);
console.log(boundAdd('abc')) // [ 'abc' ]
console.log(boundAdd(2))      // [ 'abc', 2 ]
console.log(boundAdd('text')) // [ 'abc', 2, 'text' ]

方法3：ES6类封装私有状态 #

如果场景适合用类，可通过私有字段实现完全隔离的局部状态：

class ArrayAdder {
    #array = []; // 类私有字段，仅类内部可访问
    add(param) {
        this.#array.push(param);
        return [...this.#array];
    }
}

const adder = new ArrayAdder();
console.log(adder.add('abc')) // [ 'abc' ]
console.log(adder.add(2))      // [ 'abc', 2 ]
console.log(adder.add('text')) // [ 'abc', 2, 'text' ]

内容的提问来源于stack exchange，提问作者ahmed-el-awad