小程序编程第10课

教程

各位战友，早上好。不知不觉第十课了，上节课学了while循环，这节课我们要学习循环控制。

什么是循环控制？

就是可以终止循环语句，或者跳出某一步循环。

比如我们在第8课做的一个365天存钱法累加器，这个小程序计算的是365天总共存的金额，但如果我们存完第300天的时候，我们就不想继续存了，那么我们总共存了多少钱呢？

那我们是不是可以修改循环次数来实现这个功能呢？比如把循环次数从365次改成300次。

这样做是可以的

我们有没有其它办法，在不改变循环次数的情况下，在天数达到300天的时候就终止循环呢？

这就要用到我们本堂课要学的break语句

下面我们来试一试，首先还是新建一个项目

然后复制如下代码到你小程序或者打开你之前做的365天存钱法小程序

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  calculate: function(){
    let count = 0
    for(let i = 1;i<366;i++){
      count = i + count
    }
    wx.showModal({
      title: count + '',
      showCancel: false
    })
  }
})

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover">image>
      <text class="userinfo-nickname">{{userInfo.nickName}}text>
    block>
  view>
  <view class="usermotto">
    <view>365天存钱法能存多少钱？view>
    <button type="primary" bindtap="calculate">点我计算button>
  view>
view>

我们希望的是存完第300天的时候就不存了，也就是循环了300次，之后的几十次我们就不想循环了。也就是想要退出循环。

如何退出呢？

很简单，增加一个判断，当i等于300时就我们就终止循环

calculate: function(){
  let count = 0
  for(let i = 1;i<366;i++){
    count = i + count
    if(i === 300){
      break
    }
  }
  wx.showModal({
    title: count + '',
    showCancel: false
  })
}

这个break你是不是很熟悉？这是之前我们在讲switch语句的时候我们用过。也就是做那个自动答疑小程序的时候用到过。

在switch语句中，break是跳出switch语句，在这个for循环里，break语句也是跳出for语句的意思，也就是终止循环。

终止了循环之后，那么会执行for语句后面的语句。也就是会立即开始弹框提示答案

我们看看结果是多少，答案是45150，少存了最后65天竟然足足少了2万多，所以这个365存钱法看着很美妙，后期压力实在太大！

还有一种情况是，如果在365天内，某一天或者某几天我没有存钱，但是我接下来还会继续存钱。那么我最终又会存下多少钱呢？

比如我们在第200天的时候我们没钱存，那么我们总共会存下多少钱呢？

也就是说，当i等于200的时候，我们就不要累加当天金额，也就是跳过第200次的计算

我们可以这样

calculate: function(){
  let count = 0
  for(let i = 1;i<366;i++){
    if(i === 200){
      continue
    }
    count = i + count
  }
  wx.showModal({
    title: count + '',
    showCancel: false
  })
}

当i等于200时，就会执行continue语句，这个语句就会自动跳过它后面的所有语句，直接执行i++

计算出来的结果是：66595，相对于66795少了200，结果正确

为什么我们不这样写呢？

calculate: function(){
  let count = 0
  for(let i = 1;i<366;i++){
    count = i + count
    if(i === 200){
      continue
    }
  }
  wx.showModal({
    title: count + '',
    showCancel: false
  })
}

这样写的话，我们的count已经执行了，才开始判断i是否等于200，再执行continue语句就已经晚了

这个循环控制语句也要多写写代码就理解了，下面我们来看一张流程图来加深理解

循环体就是for语句用大括号包起来的东西，在循环体里面遇到break，那么就会跳出循环，执行后面的语句。如果再循环体里遇到continue就会执行步进语句，也就是i++，在while循环中如果没有步进语句的话就执行开始判断条件。

现在我们根据这个流程图，再回看一下刚刚写的代码。

首先是这个continue，当i等于200时，就执行了continue，然后就跳过了后面的语句，直接执行了i++

当我们把continue改成break的时候，也就是执行了从1加到199的过程，当i等于200时，就跳出了循环。于是就开始弹框展示结果。

好今天的课程就讲到这里，学会编程最好的办法只有6个字：多敲，多敲，多敲。

所以，你可以在模仿实现了基本功能后，然后随心所欲地修改代码，然后去问问为什么会这样，遇到不懂记得随时问，我这边看到后第一时间解答。

作业

1，模仿使用break和continue来计算365天存钱法，然后截图发到群里。
2，假如我要做一个1到100的累加器，当碰到30，60和80时就跳过不加，当加完90就终止循环。做完后截图发到群里

附件

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  calculate: function(){
    let count = 0
    for(let i = 1;i<366;i++){
      count = i + count
      if(i === 300){
        break
      }
    }
    wx.showModal({
      title: count + '',
      showCancel: false
    })
  }
})

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  calculate: function(){
    let count = 0
    for(let i = 1;i<366;i++){
      if(i === 200){
        continue
      }
      count = i + count
    }
    wx.showModal({
      title: count + '',
      showCancel: false
    })
  }
})

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover">image>
      <text class="userinfo-nickname">{{userInfo.nickName}}text>
    block>
  view>
  <view class="usermotto">
    <view>365天存钱法能存多少钱？view>
    <button type="primary" bindtap="calculate">点我计算button>
  view>
view>

作业参考答案

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  calculate: function () {
    let count = 0
    for (let i = 1; i < 101; i++) {
      if (i === 30) {
        continue
      }
      if (i === 60) {
        continue
      }
      if (i === 80) {
        continue
      }
      count = i + count
      if (i === 90) {
        break
      }
    }
    wx.showModal({
      title: count + '',
      showCancel: false
    })
  }
})

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover">image>
      <text class="userinfo-nickname">{{userInfo.nickName}}text>
    block>
  view>
  <view class="usermotto">
    <view>1加到100，遇到30，60，80时不加，加到90时退出循环view>
    <button type="primary" bindtap="calculate">点我计算button>
  view>
view>