wx:for详解(附wx:key注意事项)

之前有学过微信小程序的开发，今天看视频有进行了相关学习。之前也有学过Vue,与微信小程序语言有点相像，生命周期感觉都是大同小异。

之前的博客：Vue.js生命周期    Mr.J--Vue之v-for全解析

wx:for定义

官方文档：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

wx:key定义

官方文档：如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

官方文档

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){
    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

人话：wx:key是用来告诉程序按照某个key去排序这个组件，例如wx:key="Id",此时组件顺序就会按照你arr中Id值来进行排序了(注意此时的Id是唯一切不能动态改变的，也是你要迭代对象中唯一的一个标识符)。而如果没有这个wx:key的话，当渲染时框架会去查找这个"key"，造成资源的浪费。

wx:for="{{list}}"用来循环数组，而 list 即为数组名wx:for-item="items" 即用来定义一个循环过程中每个元素的变量的

demo

数组

如果是一维数组,按照如下方式循环出来：

<view wx:for="{{list}}">

{{index}} {{item.name}}

</view>

以上代码中，item即为list的别名。

如果是二维甚至多维数组，按照如下方式循环：

<view wx:for="{{parentList}}">

{{item.id}}

<view wx:for="{{item.childList}}" wx:for-item="items">

{{items.name}}{{item.account}}

</view>

</view>

for (var i = 0 ; i < list.length; i++) {

var xxx = list[i];

}

等同于

<view wx:for="{{list}}" wx:for-item="xxx"></view>

谨记：wx:for是循环数组，wx:for-item即给列表赋别名

错误用例

以下为几个错误使用，请大家谨慎使用：

1.直接用wx:for-item ，这样是循环不出来列表的

<view wx:for-item="{{list}}">

{{index}} {{item.name}}

</view>

2.子循环中慎用wx:for-item

<view wx:for="{{parentList}}">

  {{item.id}}

  <view wx:for-item="{{item.childList}}" wx:for-item="items">

  {{items.name}}{{items.account}}

  </view>

</view>

以上原文链接：微信小程序wx:for和wx:for-item的正确用法

对象

今天我看视频，视频中的代码：

其中数据：

视频中展示的输出（与上面我自己写的代码有所不同，其输出形式如下）：

在我自己电脑运行：

完整输出：[object Object]（等同于输出了数据的数据类型）

对代码进行修改：

1.

2.

3（未使用wx:key进行警告）.

仔细观察视频中的代码与我写的第二段代码，可以看见对于 key 中的 index，不同之处在于引用时加的双大括号

个人对于we:key使用理解：变量需要，常量不需要。(求大佬指点正确与否)

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

wx:key 使用情况

第一种：wk:key="字符串"，代表在for循环的array中的item的某个property，该property的值（不是property哦！）需要是列表中唯一的字符串或者或者数字，且不会发生改变。例如：

  objectArray: [{
      id: 5,
      name: "Tom"
    }, {
      id: 4,
      name: "Jan"
    }, {
      id: 3,
      name: "Mike"
    }, {
      id: 2,
      name: "Kangkang"
    }, {
      id: 1,
      name: "Meria"
    }, {
      id: 0,
      name: "Luna"
    }],

在该objectArray中能有唯一性的应该是id，所以应该写成wx:key="id"
代码如下

<!--pages/mypage/mypage.wxml-->
<block>
  <switch wx:for="{{objectArray}}" wx:key="id" style="display : block;">{{item.id}}</switch>
  <button bindtap="randomSort">随机交换数据</button>
</block>

// pages/mypage/mypage.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    objectArray: [{
      id: 5,
      name: "Tome"
    }, {
      id: 4,
      name: "Jan"
    }, {
      id: 3,
      name: "Mike"
    }, {
      id: 2,
      name: "Kangkang"
    }, {
      id: 1,
      name: "Meria"
    }, {
      id: 0,
      name: "Luna"
    }]
  },
  randomSort: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; i++) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const tmp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = tmp
    }
    this.setData({
      objectArray : this.data.objectArray
    })
  }
  }

})

第二种：wk:key="*this",代表在for循环中的item自身，这种表示需要item本身就是一个唯一的字符串或者数字。（* 通配符）