微信小程序数组动态添加方式

最新推荐文章于 2025-07-08 11:18:17 发布

原创最新推荐文章于 2025-07-08 11:18:17 发布 · 5.6k 阅读

8 ·

CC 4.0 BY-SA版权

小程序同时被 2 个专栏收录

18 篇文章

订阅专栏

微信

14 篇文章

订阅专栏

本文介绍了一种在小程序中有效更新数据的方法，包括如何正确地覆盖原有数据和在原有数据基础上进行叠加更新。通过不同的实现方式，如直接设置数据、使用setData方法等，展示了最佳实践和技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【默认初始状态】

Page({
  data: {
    temparr:[
      {
        text:'标题一'
      },
      {
        text: '标题二'
      }
    ]
  },
  onLoad:function(){

  }
})

<view>
  <text>这个会覆盖原有的数据</text>
</view>
<view wx:for="{{temparr}}" wx:for-item="item" wx:for-index="index">
  <text>序号：{{index+1}}，</text>
  <text>文本：{{item.text}}</text>
</view>

【如下方式赋值无效】

    var that=this;
    var datalist =[
      {
        text:'标题三'
      },
      {
        text: '标题四'
      },
      {
        text: '标题五'
      }
    ];

    that.data.temparr = datalist;

【覆盖原有数据的方式一】

Page({
  data: {
    temparr:[
      {
        text:'标题一'
      },
      {
        text: '标题二'
      }
    ]
  },
  onLoad:function(){

    var that=this;
    var datalist =[
      {
        text:'标题三'
      },
      {
        text: '标题四'
      },
      {
        text: '标题五'
      }
    ];

    //覆盖之前的数据 - 写法一
    const _temparr = {};
    datalist.forEach(function (item, index) {
      _temparr[`temparr[${index}].text`] = item.text
    });
    that.setData(_temparr);
  }
})

<view>
  <text>这个会覆盖原有的数据</text>
</view>
<view wx:for="{{temparr}}" wx:for-item="item" wx:for-index="index">
  <text>序号：{{index+1}}，</text>
  <text>文本：{{item.text}}</text>
</view>

【覆盖原有数据方式二】

Page({
  data: {
    temparr:[
      {
        text:'标题一'
      },
      {
        text: '标题二'
      }
    ]
  },
  onLoad:function(){

    var that=this;
    var datalist =[
      {
        text:'标题三',
        name:'a'
      },
      {
        text: '标题四',
        name: 'b'
      },
      {
        text: '标题五',
        name: 'c'
      }
    ];

    that.setData({
      temparr: datalist
    });
  }
})

<view>
  <text>这个会覆盖原有的数据</text>
</view>
<view wx:for="{{temparr}}" wx:for-item="item" wx:for-index="index">
  <text>序号：{{index+1}}，</text>
  <text>文本：{{item.text}}</text>
</view>

【原有数据上叠加】

Page({
  data: {
    temparr:[
      {
        text:'标题一'
      },
      {
        text: '标题二'
      }
    ]
  },
  onLoad:function(){

    var that=this;
    var datalist =[
      {
        text:'标题三',
        name:'a'
      },
      {
        text: '标题四',
        name: 'b'
      },
      {
        text: '标题五',
        name: 'c'
      }
    ];

    //叠加数据
    const length=that.data.temparr.length;
    datalist.forEach(function (item, index) {
      that.data.temparr.push({ text: item.text });
    });
    that.setData({
      temparr: that.data.temparr
    });
  }
})

<!--index.wxml-->
<view>
  <text>原有的数据上叠加</text>
</view>
<view wx:for="{{temparr}}" wx:for-item="item" wx:for-index="index">
  <text>序号：{{index+1}}，</text>
  <text>文本：{{item.text}}</text>
</view>