小程序编程第23课

教程

上节课留了个作业，我们要把第二期的计算明细算出来。怎么做呢？

我们可以再定义四个变量，然后再计算第二期的明细。我这里直接使用了上节课的参考答案。

你可以看到我们需要在index.wxml文件中增加几行代码来放置第二期的明细。我们还需要在Index.js文件中的data对象中增加4个参数，我们还需要再计算 第二期的各个变量的值，然后再设置到data属性中。

这样做虽然可以得到第二期的明细，但是如果用户输入的是10期，那么我们是不是需要定义几十个变量，然后再计算几十次？这样做显然太蠢了！

我们该怎么办呢？

首先我们来观察一下我们的index.wxml文件，我们可以发现，

<view class="td">
		<text>{{index}}</text>
		<text>{{perInterest}}</text>
		<text>{{totalInterest}}</text>
		<text>{{total}}</text>
	</view>
	<view class="td">
		<text>{{index1}}</text>
		<text>{{perInterest1}}</text>
		<text>{{totalInterest1}}</text>
		<text>{{total1}}</text>
	</view>

这展示出来的两行数据，虽然在屏幕上展示不同，但是代码上面基本上一样。最多就是变量名不一样。

然后我们再看一下我们要展示出来的表格

我们的表格期数是从1期到N期，这有点像数组中的从0到N。数组可以是任意长度，可以有N个元素。

每一行的数据我们可以把它当成一个对象，有N行，那就有N个对象。然后把这N个对象装到我们的数组中。

然后就像这样

OBJ1,OBJ2,OBJ3代表的是对象，arr代表这个表格是数组

一行里面需要展示4个变量，所以，OBJ里面需要有4个属性。正好代表期数，利息，累计利息和累计本息和

比如一个表格的数据可以是这样表示

let arr = [{
      index: 1,
      perInterest: 1000,
      totalInterest: 1000,
      total: 11000
    }, {
      index: 2,
      perInterest: 1100,
      totalInterest: 2100,
      total: 12100
    }, {
      index: 3,
      perInterest: 1210,
      totalInterest: 3310,
      total: 13310
    }, {
      index: 4,
      perInterest: 1331,
      totalInterest: 4641,
      total: 14641
    }]

然后我们只需要新增一个arr属性到data属性中去就行了，也就是说不需要定义无数个变量了

具体怎么写呢？

首先我们要把这个数组的数据给计算出来。

打开index.js文件

由于每一期的计算方法都是大同小异，唯一的区别是期数在变 ，期数是从1到N。

这就可以用for循环来解决，我们需要计算多少期，那么我们就需要循环多少次。每一次计算的结果我们都把它放到数组里。

那，怎么写呢？

首先我们需要一个容器来装这些每期的计算结果，也就是一个数组变量

let arr = []

然后我们需要一个通过for循环，把每一期的计算结果都放到arr中

for (let index = 1; index < n + 1; index++) {
 
}

这里的n就是用户输入的期数，index是从1开始的，循环的次数正好是n次

循环体里面我们该写什么代码呢？

第一次循环，index等于1，也就是第一期

第一期我们之前是怎么写来着？

let perInterest = p * (1 + i / 100) ** 1 - p * (1 + i / 100) ** 0
let totalInterest = p *(1 + i / 100) ** 1 - p
let total = p * (1 + i / 100) ** 1

这几行代码中，哪些数字是会随着期数的变化而变化？把那些数字全部用期数index来表示。

let perInterest = p * (1 + i / 100) ** index - p * (1 + i / 100) ** (index-1)
let totalInterest = p * (1 + i / 100) ** index - p
let total = p * (1 + i / 100) ** index

这就是我们的计算过程，当index等于1的时候，是不是和之前的计算过程是一样的？

的确是

当index等于2的时候呢？

也是和之前的计算过程是一样的。

也就是说 ，我们最终重复的就是这个计算过程。

现在的问题是，我们计算出结果了，需要把这个结果转换为对象，然后放到数组arr中

怎么做呢？

我们可以定义一个对象，然后这个对象包含4个属性

let obj = {
  index: index,
  perInterest: perInterest,
  totalInterest: totalInterest,
  total: total
}

然后我们就可以把这个对象放到数组中去了

怎么放进去 ？

用数组对象自带的push方法

也就是

arr.push(obj)

于是整个计算过程就是这样

let arr = []

for (let index = 1; index < n + 1; index++) {
  let perInterest = p * (1 + i / 100) ** index - p * (1 + i / 100) ** (index - 1)
  let totalInterest = p * (1 + i / 100) ** index - p
  let total = p * (1 + i / 100) ** index
  let obj = {
    index: index,
    perInterest: perInterest,
    totalInterest: totalInterest,
    total: total
  }
  arr.push(obj)
}

然后我们可以打印出arr的结果，看看是不是符合我们的预期，在for循环外面添加如下代码

console.log(arr)

然后保存 ，我们试试，我们输入本金10000，期数10期，然后利率10

点击计算后 ，我们发现，这个数组的长度有100，也就是说它装了 100个对象 。

但我们理论循环的次数是 10次，所以，这很明显不对。因此肯定是哪里错了 ？

为什么是 100次，那我们要检查一下我们的循环次数计算的地方是不是 有问题。

我们的index初始值是1，如果n是10，那么n+1等于11，每计算一次，index就会加一

到第11次的时候就退出循环，这逻辑没问题

我们可以打印看看n是什么，以及n是否等于是

console.log(n, n === 10)

我们发现n输出的是10，但是并不等于10

那就说明n是一个字符串的10，所以它才不等于。

因为n是一个字符串，所以n+1也会变成一个字符串，变成了字符串的101

当和index进行比较的时候 ，字符串会自动转化为数字，于是就循环了100次

所以我们需要提前把n转为数字，才能实现n+1等于数字

n = Number(n)

我们再试一试，我们发现打印出来的数组长度为10，我们可以展开看看这个数组内部长什么样

我们可以发现，里面装的是10个对象。

这10个对象都有相同的属性，但是值不同

我们还发现这里面的数据有的带了很多个小数，这很难看，所以我们要统一转化为带两位小数的字符串

然后我们再试一下，发现结果符合我们的预期，那数据就得到了。

现在的问题是，我们怎么把这个数组展示到页面上呢？

请听下回分解

记得提交代码

作业

跟着教程写出代码，然后尝试用while循环来计算出这个数据

参考

提示代码

while (index < n + 1) {
  index++
}