微信小程序详解(4.运算符和列表渲染)

运算符

介绍
运算符的意义就不必我多讲了把,主要就是为了简便计算,优化代码,给代码增强了逻辑性,让我们的运算都方便.
通常来说,我们运算的方式都是依赖于这些运算符的作用,它们就像一个链接,把数据链接起来,从而达到运算的作用
流程

1.基本的运算符

var a = 10, b = 20;
// 加法运算
console.log(30 === a + b);
// 减法运算
console.log(-10 === a - b);
// 乘法运算
console.log(200 === a * b);
// 除法运算
console.log(0.5 === a / b);
// 取余运算
console.log(10 === a % b);

(注意:加法运算（+）也可以用作字符串的拼接)

2.字符串的拼接用法

var a = '.w' , b = 'xs';

// 字符串拼接
console.log('.wxs' === a + b);

3.一元运算符
顾名思义,就是简单的一元运算的运算符

var a = 10, b = 20;
// 自增运算
console.log(10 === a++);
console.log(12 === ++a);
// 自减运算
console.log(12 === a--);
console.log(10 === --a);
// 正值运算
console.log(10 === +a);
// 负值运算
console.log(0-10 === -a);
// 否运算
console.log(-11 === ~a);
// 取反运算
console.log(false === !a);
// delete 运算
console.log(true === delete a.fake);
// void 运算
console.log(undefined === void a);
// typeof 运算
console.log("number" === typeof a);
位运算符

var a = 10, b = 20;

// 左移运算
console.log(80 === (a << 3));
// 带符号右移运算
console.log(2 === (a >> 2));
// 无符号右移运算
console.log(2 === (a >>> 2));
// 与运算
console.log(2 === (a & 3));
// 异或运算
console.log(9 === (a ^ 3));
// 或运算
console.log(11 === (a | 3));

比较运算符
也就是相互比较的运算符,比如 > = < >= <= ===等等

var a = 10, b = 20;

// 小于
console.log(true === (a < b));
// 大于
console.log(false === (a > b));
// 小于等于
console.log(true === (a <= b));
// 大于等于
console.log(false === (a >= b));

这些是运算符的一些基本用法,更多更详细的用法可以看官网-运算符
但是运算符之间是有优先级的,优先级高的就会限制性

运算符优先级

这就是运算符之间的优先级.

列表渲染

wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

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

wx:for 也可以嵌套，下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

block wx:for
类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块

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

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
(注意:如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。)
(注意:当 wx:for 的值为字符串时，会将字符串解析成字符串数组)

总结:

为了简便计算,优化代码,给代码增强了逻辑性,让我们的运算gengjai.
基本运算符
一元运算符
位运算符
比较运算符
等值运算符
赋值运算符
二元逻辑运算符
其他运算符

总结注意点:

• 加法运算（+）也可以用作字符串的拼接
• 如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
• 当 wx:for 的值为字符串时，会将字符串解析成字符串数组

好了,我们今天就到这里了