小程序中數(shù)據(jù)拷貝的示例分析

這篇文章主要介紹小程序中數(shù)據(jù)拷貝的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

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

因為原先有寫過公眾號這個功能，于是自告奮勇的去寫小程序的多商品評論了，結(jié)果就掉坑里了............

思路很簡單 首先造一個星星的數(shù)組，五星好評就是五個星星的圖片，是這樣：

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代表評分，然后根據(jù)后臺返回的商品列表數(shù)組定義一個新數(shù)組pductList進(jìn)行循環(huán)定義變量starLista賦值為數(shù)組

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

同時有個多張圖片上傳的list同理進(jìn)行操作，然后給循環(huán)出的星星綁定點擊事件取它的下標(biāo)和index進(jìn)行判斷循環(huán)每個商品下的星星數(shù)組動態(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  你需要的值基本上就都在這個數(shù)組里面了 ，

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

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

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

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

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

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

以上是“小程序中數(shù)據(jù)拷貝的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！