微信小程序篇

1.改变默认循环变量以及索引的名称

<block wx:for="{{arr}}" wx:key="item" wx:for-item="data" wx:for-index="idx">
  <view>
    <checkbox/>{{data}}</view>
</block>

通过wx:for-item="data"将默认的item改为data，我们就可以使用data来表示当前的循环项

2.给数组随机排序

//wxml
<block wx:for="{{arr}}" wx:key="item" wx:for-item="data" wx:for-index="idx">
  <view>
    <checkbox/>{{data}}</view>
</block>
<button bind:tap="sort">随机排序</button>

//js
data:{
 arr:['js','wxml','wxss','json']
},
sort(){
    const len=this.data.arr.length;
    for(let i=0;i<len;i++){
       let x=Math.floor(Math.random()*(len));
       let y=Math.floor(Math.random()*(len));
        // console.log(x);
        let temp=this.data.arr[x];
        this.data.arr[x]=this.data.arr[y];
        this.data.arr[y]=temp;
        // 给数组重新赋值
        this.setData({
            arr:this.data.arr
        })
    }
},

这个时候如果我们刚开始选中的是js和json，我希望无论我怎么点击按钮，被选中得还是js和json，但实际上每次点击的时候选中项都是js和json的索引对应的某两项，而并不是js和json这两项，我们将循环时的key值换成wx:key="*this"，在微信小程序中*this指向当前元素本身,这时候再点击按钮，选中的就永远是js和json这两项了,也就是当前的数据保证了自己的特征。

3.给对象随机排序

//wxml
<block wx:for="{{arrObj}}" wx:key="id">
    <view><checkbox></checkbox>{{item.name}}</view>
</block>
<button bind:tap='sortObj'>排序</button>\

//js
data:{
    arrObj:[
        {id:1,name:'111111111'},
        {id:2,name:'222222222'},
        {id:3,name:'333333333333'},
        {id:4,name:'444444444444'},
    ]
},
sortObj(){
    const len=this.data.arrObj.length;
    for(let i=0;i<len;i++){
       let x=Math.floor(Math.random()*(len));
       let y=Math.floor(Math.random()*(len));
        // console.log(x);
        let temp=this.data.arrObj[x];
        this.data.arrObj[x]=this.data.arrObj[y];
        this.data.arrObj[y]=temp;
        // 给数组重新赋值
        this.setData({
            arrObj:this.data.arrObj
        })
    }
},

如果是对象的话，key值可以绑定对象中的某个表示唯一的属性，比如id等