javascript - 添加到一个数组会导致在 javascript 中添加另一个数组，反之亦然

Question

我在这段代码中有一组从不同的函数构造函数创建的数组：

// The general purpose of a set is to make sure that it's elements are unique
function SetJs() {

  collection = [];
  this.has = (value) => {
    return collection.indexOf(value) !== -1;
  }

  this.add = (value) => {
    if (!this.has(value)) {
      collection.push(value);
      return `${value} added to set`;
    } else {
      return `${value} already part of set`;
    }
  }

  this.delete = (value) => {
    if (this.has(value)) {
      collection.splice(collection.indexOf(value), 1)
      return `${value} removed from set`;
    } else {
      return `${value} not found in set`;
    }
  }

  this.set = () => {
    return collection;
  }

  this.length = () => {
    return collection.length;
  }

}

var set1 = new SetJs();
var set2 = new SetJs();
let result;

const getSetByNumber = (setNumber) => {
  if (setNumber === 1) {
    return set1;
  } else {
    return set2;
  }
}

const addToSet = (setNumber) => {
  let set = getSetByNumber(setNumber);
  result = set.add(document.getElementById('input').value);
  printSet();
}


const deleteFromSet = (setNumber) => {
  let set = getSetByNumber(setNumber);
  result = set.delete(document.getElementById('input').value);
  printSet();
}

const printSet = () => {
  document.getElementById('result').innerHTML = result;
  document.getElementById('set1').innerHTML = JSON.stringify(set1.set());

  document.getElementById('set2').innerHTML = JSON.stringify(set2.set());
}

<h1>
  Set implementation in javascript
</h1>
<label id="result"></label>


<br/>
<input id="input" placeholder="Enter a value" />
<button onClick="addToSet(1)">Add to set 1</button>
<button onClick="deleteFromSet(1)">Delete from set 1</button>

<button onClick="addToSet(2)">Add to set 2</button>
<button onClick="deleteFromSet(2)">Delete from set 2</button>

<br/> Set 1:
<div id="set1"></div>
Set 2:
<div id="set2"></div>

set1&set2是不同的集合对象。但是，当我添加一个时，另一个也会更新。

为什么 Set 1 和 Set 2 会同时更新？

这里有什么问题？

标签： javascripthtmlset

Answer 1

当您不定义范围时，它被视为全局范围变量。您需要将您的定义collection为该函数中的范围。

// The general purpose of a set is to make sure that it's elements are unique
function SetJs() {

  let collection = [];
  this.has = (value) => {
    return collection.indexOf(value) !== -1;
  }

  this.add = (value) => {
    if (!this.has(value)) {
      collection.push(value);
      return `${value} added to set`;
    } else {
      return `${value} already part of set`;
    }
  }

  this.delete = (value) =>
    collection = collection.filter(item => item !== value);


  this.set = () => collection;

  this.length = () => collection.length;


}

var set1 = new SetJs();
var set2 = new SetJs();
let result;

const getSetByNumber = (setNumber) => {
  if (setNumber === 1) {
    return set1;
  } else {
    return set2;
  }
}

const addToSet = (setNumber) => {
  let set = getSetByNumber(setNumber);
  result = set.add(document.getElementById('input').value);
  printSet();
}


const deleteFromSet = (setNumber) => {
  let set = getSetByNumber(setNumber);
  result = set.delete(document.getElementById('input').value);
  printSet();
}

const printSet = () => {
  document.getElementById('result').innerHTML = result;
  document.getElementById('set1').innerHTML = JSON.stringify(set1.set());

  document.getElementById('set2').innerHTML = JSON.stringify(set2.set());
}

<h1>
  Set implementation in javascript
</h1>
<label id="result"></label>


<br/>
<input id="input" placeholder="Enter a value" />
<button onClick="addToSet(1)">Add to set 1</button>
<button onClick="deleteFromSet(1)">Delete from set 1</button>

<button onClick="addToSet(2)">Add to set 2</button>
<button onClick="deleteFromSet(2)">Delete from set 2</button>

<br/> Set 1:
<div id="set1"></div>
Set 2:
<div id="set2"></div>