如何改善向數組代碼添加/刪除項目

Question

我有一個項目列表，如果要選擇或取消選擇它，我想從myStock刪除或添加一個項目。 我遇到的問題是，一旦選擇一個項目，瀏覽器就會崩潰。 是我可以做得更好的一種方法嗎？

HTML：

  <ion-list>
            <div *ngFor="let item of stockList | speciesSearchPipe:listFilter.value">
                <ion-item>
                    <ion-label>
                        {{ item.name_eng }}
                        <img src="./assets/images/species_icons/{{item.image_file}}" width="60" style="float: right;"/>
                    </ion-label>
                    <ion-checkbox class="item-avatar item-checkbox-right" color="dark" checked="false" (click)="selectSpecie(item)"></ion-checkbox>
                </ion-item>
            </div>
  </ion-list>

TS：

let myStock = this.apiService.currentUser.data.coop.jdata;
        if (myStock) {
            for (let x = 0; myStock.stocklist.length > x; x++) {
                myStock.stocklist["fish_species_id"] === item.fish_species_id ? myStock.stocklist.splice(x,1) : myStock.stocklist.push(item);
            };
        } else {
            myStock = {};
            myStock["stocklist"] = [];
            myStock.stocklist.push(item);
        };

        console.log(myStock); // First log is as expected, then the app freezes

Answer 1

嘗試使用以下命令替換for -loop：

let index = myStock.stocklist.indexOf(item);
if(index >= 0) {
    myStock.stocklist.splice(index, 1);
} else {
    myStock.stocklist.push(item);
}

完整代碼：

let myStock = this.apiService.currentUser.data.coop.jdata;
if (myStock) {
    let index = myStock.stocklist.indexOf(item);
    if (index >= 0) {
        myStock.stocklist.splice(index, 1);
    } else {
        myStock.stocklist.push(item);
    }
} else {
    myStock = {};
    myStock["stocklist"] = [];
    myStock.stocklist.push(item);
};

console.log(myStock);

Answer 2

if (!myStock) {
  myStock = { 
    stockList: [item]
  };
} else {
  const index = myStock.stockList.findIndex(({item.fish_species_id}) => item.fish_species_id === item.fish_species_id);
  if(index !== -1) {
    myStock.stockList[index] = item;
  } else {
    myStock.stockList.push(item);
  }
}
console.log(myStock);