一道笔试题(vue,react)

题目：

vue代码

 <template>
   <div class="colculate">
     <div>
       <select v-model="num1" placeholder="数字1">
         <option
           v-for="item in numLimitList"
           :key="item"
           :label="item"
           :value="item">
         </option>
       </select>
       <select v-model="checkOperate" placeholder="处理符">
         <option
           v-for="item in operateFlag"
           :key="item"
           :label="item"
           :value="item">
         </option>
       </select>
       <select v-model="checkNum2" placeholder="数字2">
         <option
           v-for="item in numLimitList"
           :key="item"
           :label="item"
           :value="item">
         </option>
       </select>
       <button class="colculate-btn" @click="colculateNum">Colculate</button>
     </div>
     <div>Answer: <span class="show-result"> {{value}} </span></div>
   </div>
 </template>

 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";

 const operateFlag = ['+', '-', '*', '/']
 const numLimitList = Array(100).fill('').map((_, v) => v)

 @Component
 export default class Colculate extends Vue {
   @Prop() private msg!: string;
   message: string = 'Hello!'
   operateFlag: string[] = operateFlag
   numLimitList: number[] = numLimitList
   num1: number = 0
   num2: number = 0
   operate: string = '+'
   value: any = ''
   set checkOperate(nVal: string) {
     if (this.num2 === 0 && nVal === '/') {
       this.value = '除数不能为0'
     } else {
       this.operate = nVal
     }
   }
   get checkOperate() {
     return this.operate
   }
   set checkNum2(nVal: number) {
     if (this.operate === '/' && nVal === 0) {
       this.value = '除数不能为0'
     } else {
       this.num2 = nVal
     }
   }
   get checkNum2() {
     return this.num2
   }
   colculateNum (): void {
     switch (this.operate) {
       case '+': this.value = this.num1 + this.num2; break
       case '-': this.value = this.num1 - this.num2; break
       case '*': this.value = this.num1 * this.num2; break
       case '/':
         if (this.num2 === 0) {
           this.value = '除数不能为0'
         }　else {
           this.value = this.num1 / this.num2;
         }
         break
       default: this.value = '错误的操作符'
     }
   }
 }
 </script>

 <style lang="scss" scoped>
 .colculate {}
 </style>

详解：

功能-->计算num1和num2不同操作[+-*/]的计算式的结果，

num1-->计算式的第一个值，不需要做任何处理

num2-->计算式的第二个值，注意点：当是除法时，num2不能为0，如果用户操作改为0，则会提示用户‘除数不能为0’

operate-->计算式的操作符，注意点：当num2为0时，如果用户改操作符为'/'时，则会提示用户‘除数不能为0’

点击计算Colculate按钮时计算组成式子的结果，并显示出来

代码：

1、准备操作符的改变时的检查

 set checkOperate(nVal: string) {
     if (this.num2 === 0 && nVal === '/') {
       this.value = '除数不能为0'
     } else {
       this.operate = nVal
     }
   }

2、准备num2值改变时的检查

 set checkNum2(nVal: number) {
     if (this.operate === '/' && nVal === 0) {
       this.value = '除数不能为0'
     } else {
       this.num2 = nVal
     }
   }

3、计算值的方法

 colculateNum (): void {
     switch (this.operate) {
       case '+': this.value = this.num1 + this.num2 + ''; break
       case '-': this.value = this.num1 - this.num2 + ''; break
       case '*': this.value = this.num1 * this.num2 + ''; break
       case '/':
         if (this.num2 === 0) {
           this.value = '除数不能为0'
         }　else {
           this.value = this.num1 / this.num2 + '';
         }
         break
       default: this.value = '错误的操作符'
     }
   }

实际操作：

计算实时处理验证为0的情况

单元测试：

 import { shallowMount } from "@vue/test-utils";
 import Colculate from "@/components/Colculate.vue";

 describe("Colculate.vue", () => {
   it("计算属性是否正确", () => {
     const wrapper = shallowMount(Colculate);
     wrapper.setData({ num1: 10 });
     wrapper.setData({ operate: "*" });
     wrapper.setData({ num2: 12 });
     const button = wrapper.find(".colculate-btn");
     button.trigger("click");
     expect(wrapper.vm.$data.value).toEqual("120");
   });
   // 一般情况下不会出现这种情况
   it("当除数为0时，返回结果是除数不能为0", () => {
     const wrapper = shallowMount(Colculate);
     wrapper.setData({ num1: 10 });
     wrapper.setData({ operate: "/" });
     wrapper.setData({ num2: 0 });
     const button = wrapper.find(".colculate-btn");
     button.trigger("click");
     expect(wrapper.vm.$data.value).toEqual("除数不能为0");
   });
   it("［改除数为0时］当除数为0时，返回结果是除数不能为0", () => {
     const wrapper = shallowMount(Colculate);
     wrapper.setData({ num1: 10 });
     wrapper.setData({ operate: "/" });
     wrapper.setData({ num2: 5 });
     const button = wrapper.find(".colculate-btn");
     button.trigger("click");
     expect(wrapper.vm.$data.value).toEqual("2");
     wrapper.setData({ num2: 0 });
     button.trigger("click");
     expect(wrapper.vm.$data.value).toEqual("除数不能为0");
   });
   it("［改操作符为除法时］当除数为0时，返回结果是除数不能为0", () => {
     const wrapper = shallowMount(Colculate);
     wrapper.setData({ num1: 10 });
     wrapper.setData({ operate: "*" });
     wrapper.setData({ num2: 0 });
     const button = wrapper.find(".colculate-btn");
     button.trigger("click");
     expect(wrapper.vm.$data.value).toEqual("0");
     wrapper.setData({ operate: "/" });
     button.trigger("click");
     expect(wrapper.vm.$data.value).toEqual("除数不能为0");
   });
 });

结果

react

import React, { Component } from 'react'

class App extends Component {
  constructor() {
    super()
    this.state = {
      showValue: '',
      operate: '+',
      num1: 0,
      num2: 0
    }
  }
  /**
   * 修改数字1
   */
  handleChangeNum1 = e => {
    this.setState({
      num1: Number(e.target.value)
    })
  }
/**
 * 修改操作符
 */
  handleChangeOperate = e => {
    this.setState({
      operate: e.target.value
    })
  }
/**
 * 修改数字2
 */
  handleChangeNum2 = e => {
    this.setState({
      num2: Number(e.target.value)
    })
  }
  /**
   * 计算计算式
   */
  colculateNum = () => {
    let showValue = ''
    let { num1, num2, operate } = this.state
    switch (operate) {
      case '+':
        showValue = num1 + num2
        break
      case '-':
        showValue = num1 - num2
        break
      case '*':
        showValue = num1 * num2
        break
      case '/':
        if (num2 === 0) {
          showValue = '除数不能为0'
        } else {
          showValue = num1 / num2
        }
        break
      default:
        showValue = '错误的操作符'
    }
    this.setState({
      showValue
    })
  }
  render() {
    const operateFlag = ['+', '-', '*', '/']
    const numLimitList = Array(100)
      .fill('')
      .map((_, v) => v)
    return (
      <div className="colculate">
        <div>
          <select title="数字1" value={this.state.num1} onChange={this.handleChangeNum1}>
            {numLimitList.map(function(item) {
              return <option value={item} label={item} key={item} />
            })}
          </select>
          <select title="操作符" value={this.state.operate} onChange={this.handleChangeOperate}>
            {operateFlag.map(function(item) {
              return <option value={item} label={item} key={item} />
            })}
          </select>
          <select title="数字2" value={this.state.num2} onChange={this.handleChangeNum2}>
            {numLimitList.map(function(item) {
              return <option value={item} label={item} key={item} />
            })}
          </select>
          <button style={{ marginLeft: '10px' }} onClick={this.colculateNum}>
            Colculate
          </button>
        </div>
        <div>
          Answer: <span className="show-result">{this.state.showValue}</span>
        </div>
      </div>
    )
  }
}

export default App