小程序中數(shù)據(jù)拷貝的問(wèn)題解析

近期有幫同事做一個(gè)多商品評(píng)論的頁(yè)面，多商品，顧名思義就是很多個(gè)商品，每個(gè)商品有星星評(píng)價(jià)，上傳圖片信息以及評(píng)論內(nèi)容，

因?yàn)樵�先有�?xiě)過(guò)公眾號(hào)這個(gè)功能，于是自告奮勇的去寫(xiě)小程序的多商品評(píng)論了，結(jié)果就掉坑里了............

思路很簡(jiǎn)單 首先造一個(gè)星星的數(shù)組，五星好評(píng)就是五個(gè)星星的圖片，是這樣：

starList: [{
       srca: "img/star02@3x.png",
       index: "1"
       }, {
       srca: "img/star02@3x.png",
       index: "2"
       }, {
       srca: "img/star02@3x.png",
       index: "3"
       }, {
       srca: "img/star02@3x.png",
       index: "4"
       }, {
       srca: "img/star02@3x.png",
       index: "5"
       }],

懶得取下標(biāo)直接用index代表評(píng)分，然后根據(jù)后臺(tái)返回的商品列表數(shù)組定義一個(gè)新數(shù)組pductList進(jìn)行循環(huán)定義變量starLista賦值為數(shù)組

for(var i = 0; i < response.commoditys.length; i++) {
               response.commoditys[i].starLista = starList;
  }

同時(shí)有個(gè)多張圖片上傳的list同理進(jìn)行操作，然后給循環(huán)出的星星綁定點(diǎn)擊事件取它的下標(biāo)和index進(jìn)行判斷循環(huán)每個(gè)商品下的星星數(shù)組動(dòng)態(tài)更改src

  for(var i = 0; i < app.dataList[index].starList.length; i++)
   {
     app.dataList[index].starList[i].srca = "img/star02@3x.png";
     evaluateList[index].mark = idx + 1;
     if(i <= idx)
      {
        app.dataList[index].starList[i].srca = "img/star01@3x.png";
       }
       evaluateList[index].mark = idx + 1;
       evaluateList[index].commodityid = cId;
 }

最后取pductList 你需要的值基本上就都在這個(gè)數(shù)組里面了 ，

--------------------------------------------------------------掉坑-----------------------------------------------

開(kāi)始寫(xiě)小程序就按照這樣的思路一直寫(xiě)寫(xiě)寫(xiě)，然而寫(xiě)到一半以后突然發(fā)現(xiàn)，我點(diǎn)擊了一行小星星，所有的星星顏色都會(huì)變化，經(jīng)歷了排查以及抓耳撓腮 坐如針墊，東張西望之后，終于發(fā)現(xiàn)

在定義的新數(shù)組pductList中根據(jù)下標(biāo)更改starLista 原來(lái)小星星的數(shù)組starList，最初定義的數(shù)組也會(huì)隨之改變

又經(jīng)歷了百度 谷歌 csdn 博客園等等之后 終于想起一計(jì)，將原星星數(shù)組starList 先轉(zhuǎn)為字符串格式，在給定義的新數(shù)組pductList賦值的時(shí)候在轉(zhuǎn)為json格式

let starListc=JSON.stringify(starList);
for(let i = 0; i < response.commoditys.length; i++) {
               response.commoditys[i].starLista = JSON.parse(starListc);
  }

終于解決問(wèn)題，應(yīng)該是涉及到小程序的數(shù)據(jù)深拷貝的原因，這樣處理一下更改的應(yīng)該就是字符串而不會(huì)更改原數(shù)組，也考慮過(guò)在造個(gè)數(shù)組去賦值，但是沒(méi)有這個(gè)方法簡(jiǎn)單粗暴，對(duì)于這個(gè)搞了一個(gè)早上的坑，謹(jǐn)以此貼，留作紀(jì)念，以及警醒自己。。。。。。。。。。。。。。。

相關(guān)推薦：

備份和拷貝MYSQL數(shù)據(jù)庫(kù)_MySQL

javascript對(duì)淺拷貝和深拷貝的詳解

以上就是小程序中數(shù)據(jù)拷貝的問(wèn)題解析的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！