wx:for详解(附wx:key注意事项)
之前有学过微信小程序的开发，今天看视频有进行了相关学习。之前也有学过Vue,与微信小程序语言有点相像，生命周期感觉都是大同小异。
之前的博客：Vue.js生命周期 Mr.J--Vue之v-for全解析
wx:for定义
官方文档：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
wx:key定义
官方文档：如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
官方文档
{{item.id}}
{{item}}
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
数组
如果是一维数组,按照如下方式循环出来：
{{index}} {{item.name}}
以上代码中，item即为list的别名。
如果是二维甚至多维数组，按照如下方式循环：
{{item.id}}
{{items.name}}{{item.account}}
for (var i = 0 ; i < list.length; i++) {
var xxx = list[i];
}
等同于
谨记：wx:for是循环数组，wx:for-item即给列表赋别名
错误用例
以下为几个错误使用，请大家谨慎使用：
1.直接用wx:for-item ，这样是循环不出来列表的
{{index}} {{item.name}}
2.子循环中慎用wx:for-item
{{item.id}}
{{items.name}}{{items.account}}
以上原文链接：微信小程序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"
代码如下
{{item.id}}
// 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本身就是一个唯一的字符串或者数字。（* 通配符）
