WeChat applet learns array operations

Preface

I believe that after the mini program was launched in public beta, many friends have already rushed to apply to register the mini program. During the development stage, we also encountered many problems, such as the wx.request data request was unsuccessful, I didn’t know how to push data into the array during array operations, how input monitors the status of user input, and the background-image of css could not obtain the local Resources, etc., this blog will have a special topic to provide solutions to friends who encounter these problems.

Array operation

What we are mainly talking about today is array operation.
I believe that for children who have used vuejs, reactjs and other mvvm framework, the array operation of the WeChat applet is very simple. The principle is the same.

This is a simple demo that has been uploaded to github, everyone can download it directly. We will mainly talk about some commonly used operation methods in arrays. Insert new data forward and backward into the array, modify the array, deletearray, clear the array, and some other operation methods. I will give you learning ideas. .

Demo array operation example path:
/pages/<a href="http://www.php.cn/wiki/1041.html" target="_blank">array</a>/array.w<a href="http://www.php.cn/wiki/1527.html" target="_blank">xml</a>

Insert new data forward and backward

Page({
  data: {
        list:[{
        id:1,
        name:'应季鲜果',
        count:1
        },{
        id:2,
        name:'精致糕点',
        count:6
        },{
        id:3,
        name:'全球美食烘培原料',
        count:12
        },{
        id:4,
        name:'无辣不欢生猛海鲜',
        count:5
        }]
  }
})

We initialize some data, we need to add new data to the list, we need to use<a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a> concat() Method, concat() method is used to concatenate two or more arrays. This method does not change the existing array.
In fact, what we call forward and backward inserting data is actually combining two arrays to form a new array, and then using this.<a href="http://www.php.cn/code/8209.html" target="_blank"> set</a>Data() can be rendered to the page.
Let’s take a look at the code in the WeChat applet.

Insert data forward demo

 //向前增加数据
  add_before:function (){


//要增加的数组
var newarray = [{
    id:6,
    name:'向前增加数据--'+new Date().getTime() ,
    count:89
}];

//使用concat()来把两个数组合拼起来
this.data.list = newarray.concat(this.data.list);

//将合拼之后的数据，发送到视图层，即渲染页面
//大伙请记录，修改了数据后，一定要再次执行`this.setData()`，页面才会渲染数据的。
this.setData({
      'list':    this.data.list
 });


  }

Insert data backward demo

  //向后增加数据
  add_after:function (){

    //要增加的数组
    var newarray = [{
            id:5,
            name:'向后增加数据--'+new Date().getTime() ,
            count:89
    }];


    this.setData({
        'list':this.data.list.concat(newarray)
    });


  },

Careful friends should find that, When these two paragraphs are combined using concat(), the data in the concat brackets are different. The difference between inserting data forward and backward is here.

//假设这一段是我们要新增的数组
var newarray = [{
        id:5,
        name:'向后增加数据--'+new Date().getTime() ,
        count:89
}];

//向前--用newarray与this.data.list合拼
this.data.list = newarray.concat(this.data.list);

//向后--用this.data.list与newarray合拼
this.data.list = this.data.list.concat(newarray);

Modify array

Modifying the displayed data is a very common thing in the development process.

  //修改数组
  edit:function (e){

//这个参数“e”的具体作用，请参考微信小程序官方提供的说明，地址为https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html?t=20161107

var dataset = e.target.dataset;
var Index = dataset.index; //在通过在wxml页面里使用 data-index="{{index}}"传递过来的，是为识别正在编辑修改哪个数组。

//我们要修改的数组
this.data.list[Index].name = '修改了内容'+new Date().getTime();

//将合拼之后的数据，发送到视图层，即渲染页面
//大伙请记录，修改了数据后，一定要再次执行`this.setData()`，页面才会渲染数据的。
this.setData({
    list:this.data.list
});



  }

Delete a certain piece of data

There will be additions, changes and deletions.
Deletion requires the JavaScript splice() method. The splice() method adds/removes items to/from the array, and then returns the deleted item.

//删除
  remove:function (e){

    var dataset = e.target.dataset;
    var Index = dataset.index;

    //通过`index`识别要删除第几条数据，第二个数据为要删除的项目数量，通常为1
    this.data.list.splice(Index,1);

    //渲染数据
    this.setData({
        list:this.data.list
    });


  }

Clear data

After adding, modifying or deleting, you have to clear the data again.

//清空
  clear:function (){

    //其实就是让数组变成一个空数组即可
      this.setData({
          list:{}
      });

  }

Summary

Today we mainly talked about adding, modifying, deleting and clearing. In fact, there are many ways to operate arrays. You can see the following screenshots.

The above is the detailed content of WeChat applet learns array operations. For more information, please follow other related articles on the PHP Chinese website!