一道笔试题(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