微信小程序使用扩展运算符

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/RELY_ON_YOURSELF/article/details/82627429

Javascript ES6中许多特性可以简化代码。解构运算符，扩展运算符和rest运算符就是其中很好的特性，它们可以通过减少赋值语句的使用，或者减少通过下标访问数组或对象的方式，使代码更加简洁优雅，可读性更佳。
本文以微信小程序使用扩展运算符为例

在js文件中赋值数据:

this.setData({
       classicData: res,
    })

在wxml绑定数据:

<view class='container'>
  <view class='header'>
    <episode class="episode" index="{{classicData.index}}" />
    <like-compt class="like" bind:like="onLike" like="{{classicData.like_status}}" count="{{classicData.fav_nums}}" />
  </view>
  <movie content="{{classicData.content}}" img="{{classicData.image}}" />
  <navi bind:left="onNext" bind:right="onPrevious" class="navi" title="{{classicData.title}}" first="{{first}}" latest="{{latest}}" />
</view>

很明显 , 每次使用字段时都要在字段前加上classicData. , 这样使用起来不方便 , 也不优雅.

如果使用ES6新语法—扩展运算符 , 就可以很方便的解决这个问题 .
扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值.

在js文件中赋值:

 this.setData({
        ...res,
      })

在wxml文件绑定数据:

<view class='container'>
  <view class='header'>
    <episode class="episode" index="{{index}}" />
    <like-compt class="like" bind:like="onLike" like="{{like_status}}" count="{{fav_nums}}" />
  </view>
  <movie content="{{content}}" img="{{image}}" />
  <navi bind:left="onNext" bind:right="onPrevious" class="navi" title="{{title}}" first="{{first}}" latest="{{latest}}" />
</view>

这样就很方便了 , 不用每次使用字段都要classicData. , 看起来很舒心.