javascript數組賦值操作的坑

描述：數組對象賦值，即arr1=[{},{},{}]這種數據結構的對象賦值，將arr1賦值給arr2；然后刪除arr2里的元素

一、最常用的=

arr2 = arr1;

detect(val) {
      let temp = [];
      let self=this;
      temp = self.tableBaseStorage; //這個tableBaseStorage是data(){return{}}全局變量
      console.log("tableBaseStorage");
      console.log(self.tableBaseStorage);
      let userName = this.search;
      let count = 0;
      for (let i = 0; i < temp.length; i++) {
        if (!(temp[i].userName === userName)) {
          console.log(temp[i].userName);
          temp.splice(i, 1); //這種刪除方式會自動更新長度，慎用
          i--;
          //delete temp[i];
          count++;
          console.log("刪除");
        }
      }
      console.log(count);
      self.tableBase = temp;
      //console.log(this.tableBase);
    },

你會發現當這個函數被第二次調用的時候，按理說this.tableBaseStorage是不會變的，每一次調用這個函數，都是從tableBaseStorage拿到數據那后對其篩選刪除；

但奇怪的是這個tableBaseStorage卻是變了，第二次調用好像莫名其妙的被掉包了一樣；

現象：第一次調用detect（）函數刪了temp什么元素，tableBaseStorage同樣被刪除了同樣的元素，故第二次再調用detect（）函數此時的tableBaseStorage已經變了；

原因：JavaScript中=賦值是指針賦值，刪除中間變量temp[ ]里的元素,會一直刪到它爹tableBaseStorage

下面有幾種解決措施供參考

二、解決措施，避免數組的指針賦值

1.循環賦值

 　　　let temp = [];
      let self=this;
      for(let j=0;j<self.tableBaseStorage.length;j++){
         temp[j] = self.tableBaseStorage[j];
      }

2.數組的concat方法

說明

返回一個新數組，這個新數組是由兩個或更多數組組合而成的。

array1.concat([item1[, item2[, . . . [, itemN]]]])

參數

array1

必選項。其他所有數組要進行連接的 Array 對象。

item1,. . ., itemN

可選項。要連接到 array1 末尾的其他項目。

示例

//temp=self.tableBaseStorage.concat();

3.JSON.parse & JSON.stringify

先stringify再parse成數組對象

temp = JSON.parse(JSON.stringify(self.tableBaseStorage))

4.es6提供的一種方法

//temp = [...self.tableBaseStorage];