JS 函数中如何更新和返回数组

Question

我正在尝试从函数内部声明的数组中添加/删除元素。我已经能够添加或删除和访问更新的数组。为了访问数组，我使用了两种不同的方法。创建了一个返回数组的内部函数。已从主函数返回数组并使用点表示法访问相同的数组。这是我的代码：function test() {  let myArr = [];  const getMyArr = () => myArr;  const add = n => {    myArr.push(n);    return () => {      myArr = myArr.filter(a => a !== n);    };  };  return {    myArr,    getMyArr,    add  };}let myTestRun = test();let remove3 = myTestRun.add(3);let remove7 = myTestRun.add(7);let remove8 = myTestRun.add(8);console.log("myArr after insertion", myTestRun.myArr);console.log("getMyArr() after insertion", myTestRun.getMyArr());remove7();console.log("myArr after removing", myTestRun.myArr); //still returns the old array without any modificationsconsole.log("getMyArr() after removing", myTestRun.getMyArr()); //returns the modified array. how? Why didn't it work before?我不明白的是为什么没有myArr任何修改以及getMyArr()函数如何返回更新后的值。我曾经相信两者都myArr指向同一个对象。因此，对 的任何修改myArr都应通过这两种方法反映出来。为什么我错了。这种不同的返回值背后的原因是什么？请解释。

Answer 1

因为filter返回一个新数组。

返回的对象test和局部变量都引用同一个数组。突变的阵列（push，pop，splice通过任一引用的等）将修改阵列。

这仅在调用remove7(). 该filter方法返回一个新数组，myArr变量现在引用这个新数组，同时myTestRun.myArr仍然引用最初创建的旧数组。如果您myTestRun.myArr === myTestRun.getMyArr()在每个点都登录，它将在 之后开始返回 false remove7()。

但是，getMyArr()仍在关闭let myArr变量。因此，它将始终记录当时变量当前持有的任何内容

Answer 2

如果你使用它会更好

function test() {

  this.myArr = [];

  this.getMyArr = () => this.myArr;

  this.add = n => {

    this.myArr.push(n);

    return () => {

      this.myArr = this.myArr.filter(a => a !== n);

    };

  };

}

let myTestRun = new test();

let remove3 = myTestRun.add(3);

let remove7 = myTestRun.add(7);

let remove8 = myTestRun.add(8);

console.log("myArr after insertion", myTestRun.myArr);

console.log("getMyArr() after insertion", myTestRun.getMyArr());

remove7();

console.log("myArr after removing", myTestRun.myArr); //still returns the old array without any modifications

console.log("getMyArr() after removing", myTestRun.getMyArr());