WeChat 애플릿은 배열 작업을 학습합니다.

서문

미니 프로그램이 퍼블릭 베타 버전으로 출시된 이후, 이미 많은 친구들이 미니 프로그램 등록을 위해 서둘러 신청한 것으로 알고 있습니다. 개발 단계에서 우리는 wx.request 데이터 요청이 실패하는 등 많은 문제에 직면했습니다. 배열 작업 중에 데이터를 배열에 푸시하는 방법, 입력이 사용자 입력 상태를 모니터링하는 방법 및 배경을 알지 못했습니다. -CSS 이미지로 인해 로컬 리소스 등을 얻을 수 없습니다. 이 블로그에서는 이러한 문제에 직면한 친구들에게 솔루션을 제공하기 위한 특별한 주제를 다룰 것입니다.

배열 연산

오늘 주로 다룰 내용은 배열 연산입니다.
vuejs, reactjs 및 기타 mvvm프레임워크를 사용해 본 어린이들에게는 WeChat 애플릿의 배열 작업이 매우 간단하다고 생각합니다. 원칙은 동일합니다.

이것은 git에 업로드된 간단한 데모입니다. 허브에서는 누구나 직접 다운로드할 수 있습니다. 배열에 새로운 데이터를 앞뒤로 삽입하고, 배열을 수정하고, 배열을 삭제하고, 배열을 지우는 등 배열에서 일반적으로 사용되는 몇 가지 작업 방법에 대해 주로 설명하겠습니다. 학습을 위한 아이디어.

데모 배열 작업 예시 경로:

/pages/<a href="http://www.php.cn/wiki/1041.html" target="_blank">array <br>/array.w</a><a href="http://www.php.cn/wiki/1527.html" target="_blank">xml<code>/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>

앞으로 새로 삽입 데이터 거꾸로

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

일부 데이터를 초기화하고 목록에 새 데이터를 추가해야 하며 <code><a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a> concat()JavaScriptconcat() concat() 메서드를 사용해야 합니다.
방법은 두 개 이상의 배열을 결합하는 데 사용됩니다. 이 방법은 기존 배열을 변경하지 않습니다. 실제로 데이터를 앞뒤로 삽입하는 것에 대해 this.<a href="http://www.php.cn/code/8209.html" target="_blank">set</a>Data() 실제로 말하는 것은 두 개의 배열을 결합하여 새로운 배열을 만든 다음 이것을 사용한다는 것입니다.<a href="http://%20www.php.cn/code/8209.html" target="_blank">설정<br>Data()</a>를 페이지에 렌더링합니다.

WeChat 애플릿의 코드를 살펴보겠습니다.

삽입 데이터 포워드 데모

 //向前增加数据
  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
 });


  }

삽입 데이터 백워드 데모

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

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


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


  },

concat()조심스러운 친구들은 그걸 발견해야 합니다. 이 두 단락의 데이터를 결합하려면 연결 괄호 안의 데이터가 다릅니다. 데이터를 앞으로 삽입하는 것과 뒤로 삽입하는 것의 차이점이 여기에 있습니다.

//假设这一段是我们要新增的数组
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);

배열 수정

표시된 데이터를 수정하는 것은 개발 과정에서 매우 흔한 일입니다.

아아아아

특정 데이터 삭제

뭔가 추가, 변경, 삭제된 경우 삭제해야 합니다. JavaScript splice()삭제에는 splice() 메서드가 필요합니다.

메서드는 배열에 항목을 추가/제거한 다음 삭제된 항목을 반환합니다.

  //修改数组
  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
});



  }

데이터 지우기

추가, 수정, 삭제 후에는 다시 데이터를 지워야 합니다.

//删除
  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
    });


  }

요약

오늘은 주로 추가, 수정, 삭제, 삭제에 대해 이야기했습니다. 실제로 배열을 조작하는 방법은 다양합니다.

위 내용은 WeChat 애플릿은 배열 작업을 학습합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!