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

Question

我正在尝试从函数内部声明的数组中添加/删除元素。我已经能够添加或删除和访问更新的数组。

为了访问数组，我使用了两种不同的方法。

1. 创建了一个返回数组的内部函数。

2. 已从主函数返回数组并使用点表示法访问相同的数组。

这是我的代码：

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 modifications

console.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 modificationsconsole.log("getMyArr() after removing", myTestRun.getMyArr());