JavaScript实现计算器的四则运算功能

作者:Ashy996 时间:2024-04-16 10:36:16 

一、需求 + 最终实现

注:只是前端实现

1. 需求

需求来源是因为有一个做嵌入式 C/C++的 * 做了一个远程计算器。 需求是要求支持输入一个四则混合运算公式的字符串,返回计算后的结果。

想看看用 C/C++封装过的 JavaScript 如果要实现这样一个功能最终效果(文章后我会讨论这两种实现思路,还望各位看官可以提出一些优化方案以及建议之类的~)。

2. 说明:利用了字符串(split、replace)和数组(splice)的方法。

主要是用到字符串切分为数组的方法 split、以及数组中插入删除的方法 splice。 字符串正则 replace 方法是考虑到用户的输入习惯可能有所不同,例如 1+2*3/4 与 3 * 7 + 229。

支持:

  • 基础四则运算 3+6*5/6-3;

  • 小数四则运算 3.14 + 6 * 5 / 6 - 3.5;

  • 高位四则运算 99 * 94 - 6.35 + 100 / 1024;

  • 多次四则运算 3 * 3 + 3 * 16 - 7 - 5 + 4 / 2 + 22;

  • 以上综合

不支持:

  • 带括号的运算 1 * (2 - 3);

  • 其他数学运算

3. 代码实现

/**
* js四则混合运算计算器  功能实现(约20行+ 面条代码)
* @param {string} str 输入的四则运算字符串
* @return {number} 输出 结果
*/
const calculator = (str) => {
 // 定义添加字符函数
 const add = (arr, symbol) => {
   let length = arr.length;
   while (length > 1) {
     arr.splice(length - 1, 0, symbol); // 在每一项后面添加对应的运算符
     length--;
   }
   return arr; // 目的是得到一个改变长度的数组
 }
 const array = add(str.replace(/\s*/g,"").split('+'), '+').map(it => add(it.split('-'), '-').map(it => add(it.split('*'), '*').map(it => add(it.split('/'), '/')))).flat(3);;
 // 先运算乘除法
 ['*', '/'].map(it => {
   while (array.includes(it)) {
     const index = array.findIndex(o => o === it);
     index > 0 && it === '*' ? array.splice(index - 1, 3, (Number(array[index - 1]) * Number(array[index + 1]))) : array.splice(index - 1, 3, (Number(array[index - 1]) / Number(array[index + 1])));
   }
 })
 // 再执行加减法,即从左至右的计算
 while (array.length > 1) {
   array[1] === '+' ? array.splice(0, 3, (Number(array[0]) + Number(array[2]))) : array.splice(0, 3, (Number(array[0]) - Number(array[2])));
 }
 return Number(array[0]).toFixed(2);
}

如果对 ES6 语法还算熟悉的话,应该可以轻松阅读代码的。 想必你也注意到了,这也是其中令我比较纠结的:在日常开发中,是否该经常写一些面条代码呢?

二、实现步骤

(轻松理解的大佬可以直接跳到:步骤3)

1.实现最基础的加减乘除

2.支持高位数的运算

3.支持多次的运算

4.支持...

如果是初学者,建议跟着敲一下过程(或者 f12 验证 + 调试),编程能力某种角度下一定是建立在代码量之下的。

1. 版本一:实现基础加减乘除

// 版本一
const calculator = ((str) => {
 // 定义最基础的加减乘除
 const add = (a, b) => a + b;
 const sub = (a, b) => a - b;
 const mul = (a, b) => a * b;
 const div = (a, b) => a / b;
 // 将输入的字符串处理为 数组
 const array = str.split('');
 // **【处理基本四则运算】
 ['*', '/', '+', '-'].map(it => {
   const index = array.findIndex(o => o === it);
   if (index > 0) {
     switch (it) {
       case '*':
         array[index + 1] = mul(array[index - 1], array[index + 1]);
         break;
       case '/':
         array[index + 1] = div(array[index - 1], array[index + 1]);
         break;
       case '+':
         array[index + 1] = add(Number(array[index - 1]), Number(array[index + 1]));
         break;
       case '-':
         array[index + 1] = sub(Number(array[index - 1]), Number(array[index + 1]));
         break;
     }
     array.splice(index - 1, 2)
   }
 })
 // return array[0];
 console.log('返回值:', array[0]);
})('3+6*5/6-3')

// 返回值: 5

这样就实现了一个四则混合运算的计算器!

但是这个计算器很鸡肋,只是一个最基础的功能上的实现。即:只可以运行一位数数字的加减乘除混合运算。

其实第一步的想法是,利用数组的性质,通过操作数组来操作单次的四则运算。其中数组的遍历,我优先 *, / 法,紧接着是 +,- 法。 这其实是有问题的,乘除法在实际运算中的优先级并不明显,可以说是不怎么影响运算的结果(在文章最后一个版本实现涉及到性能上的讨论时会详谈),但是加减法就会有影响了:必须是从左至右的实现,否则影响运算的结果(这里不多赘述)。

【处理基本四则运算】

首先处理字符串为数组 const array = str.split('');这一步代码举例说明:

JavaScript实现计算器的四则运算功能

(图一)

  1. 在处理字符串的时候,可以看到 '3+6*5/6-3' 处理成了 ['3', '+', '6', '*', '5', '/', '6', '-', '3']。

  2. 然后在版本一代码中,可以看到我处理运算的执行顺序是 ['*', '/', '+', '-'],所以版本一只支持加减乘除一次运算;

  3. const index = array.findIndex(o => o === it); 这一步找到步骤 2 中的符号所在数组中的位置(说明一下,只用字符串的方法也可以实现,即找到字符串的位置,然后操作也可,只是数组更常用,也更容易理解)

  4. 观察处理后的数组,符号总是隔一位出现的,即便是优先级较高的 *、/ 法,也是符号所在的位置的前一项与后一项的运算结果。 array[index + 1] = mul(array[index - 1], array[index + 1]); 将符号所在的下一项的值为调用对应的操作函数的运算结果;

  5. 删除符号位与第一项:array.splice(index - 1, 2)

  6. 这时候可以看到最初定义的 array 数组一直在改变,以 node 环境下的打印结果为例(注意观察运算数组):

JavaScript实现计算器的四则运算功能

(图二)

可以看到每次打印都会打印初始数组以及通过 splice 方法处理之后的结果。

弊端:此版本不支持多次运算,即四则混合运算只能执行一次。同时,也不能够支持高位运算。

2. 版本二:实现高位数的运算

在图一中

JavaScript实现计算器的四则运算功能

如果是涉及高位(个位以上)的数值运算字符串的话,单纯的使用 split('') 方法会把两位数数值,处理成数组的两项,即影响运算结果。

所以我需要一个方法,在接收一个字符串以后,得到我想要的字符串:

JavaScript实现计算器的四则运算功能

(图三)

如图三所述, ary 即所需。

所以,图三中由 str 到 ary 的过程就是本次版本所需要实现的:

/**
* 实现字符串的数组化分割
* @param {string} strs 输入的字符串 : '12*33/3+9+10'
* @returns 数组 ['12', '*', '33', '/',  '3', '+', '9',  '+', '10']
*/
const split = () => {
 const result = str.split('+')  // 遇到 + 处理为数组
   .map(it => {
     return it.split('-') // 遇到 - 处理为数组
       .map(it => {
         return it.split('*') // 遇到 * 处理为数组
           .map(it => {
             return it.split('/') // 遇到 / 处理为数组
           })
       })
   })
 return result.flat(3);
}

我在设计这个算法的时候,一时间也没有太好的思路和想法,该函数处理字符串为一个多维数组,然后再将数组扁平化处理。如图四所示:

JavaScript实现计算器的四则运算功能

(图四)

图四中,执行该函数,得到一个多维数组(其实最高也只有三维数组),返回值 result 打印出来的结果可以看到,基本满足所需要的数组:['31', '+', '62', '*', '5', '/', '6', '-', '3'] 。

接下来,为其带上运算符:

/**
* 定义添加字符函数
* @param {string[]} result 传入的数组 ['31', '62*5/6-3']
* @param {string} symbol 传入的运算符
* @returns 数组 ['31', '+', '62*5/6-3']
*/
 const add = (result, symbol) => {
   let length = result.length;
   while (length !== 1) {
     result.splice(length - 1, 0, symbol); // 在每一项后面添加对应的运算符
     length--;
   }
   return result; // 目的是得到一个改变长度的数组
 }

比如传入 ['31', '62*5/6-3'] ,只需要在第一项之后补 '+' 即可。

实现的目的是考虑到多次运算的时候,为每一个因为 '+' 分割的数组中的项添加运算符,所以这里用到了 while 循环语句,并且由一个变量 length 控制(也可以遍历数组或者 for 循环数组实现这一步操作);

检验结果,如图五所示:

JavaScript实现计算器的四则运算功能

(图五)

这样就实现了这个任意长度数值数组输入时,返回带符号的数组。

【回顾一下】:

上面两个函数的整体实现就是,实现了根据符号分割数组,根据传入的数组与符号添加符号:

结合两个函数,并且简化一下代码(其实我个人还是喜欢写面条代码的,只是可能不利于阅读,但是看起来舒服一些~):

// 定义添加字符函数
 const add = (result, symbol) => {
   let length = result.length;
   while (length !== 1) {
     result.splice(length - 1, 0, symbol); // 在每一项后面添加对应的运算符
     length--;
   }
   return result; // 目的是得到一个改变长度的数组
 }
 const array = (strs = str) =>
   add(strs.split('+'), '+').map(it =>
     add(it.split('-'), '-').map(it =>
       add(it.split('*'), '*').map(it =>
         add(it.split('/'), '/')
       )
     )
   ).flat(3);

即,任意运算字符串的传入都可以处理为所需数组如图六所示:

JavaScript实现计算器的四则运算功能

(图六)

array 函数在后面直接把内部处理函数的返回值绑定了。

对于上述算法的设计如果有更好的实现还希望有朋友可以指出,大家互相之间可以学习一下。

3. 支持多次的运算

回到版本一,目前的实现只支持一次的四则混合运算,更合理的实现应该是先运算乘除法,再运算加减法,而且先出现的先执行。

完整运算代码:

const calculator = (str) => {
 const add = (result, symbol) => {
   let length = result.length;
   while (length > 1) {
     result.splice(length - 1, 0, symbol);
     length--;
   }
   return result;
 }
 const array = add(str.replace(/\s*/g, "").split('+'), '+').map(it => add(it.split('-'), '-').map(it => add(it.split('*'), '*').map(it => add(it.split('/'), '/')))).flat(3);;
 // 先运算乘除法
 while (array.includes('*') || array.includes('/')) {
   const itSymbol = array.find(o => o === '*' || o === '/');
   const index = array.findIndex(o => o === '*' || o === '/');
   index > 0 && itSymbol === '*' ? array.splice(index - 1, 3, (Number(array[index - 1]) * Number(array[index + 1]))) : array.splice(index - 1, 3, (Number(array[index - 1]) / Number(array[index + 1])));
 }
 // 再执行加减法,即从左至右的计算
 while (array.length > 1) {
   array[1] === '+' ? array.splice(0, 3, (Number(array[0]) + Number(array[2]))) : array.splice(0, 3, (Number(array[0]) - Number(array[2])));
 }
 return Number(array[0]).toFixed(2);
}

注:有必要说明一下,因为个人习惯不同,所以输入带有空格情况,所以这里在处理字符串之前首先用到了一个正则表达式 str.replace(/\s*/g, "") (去除空格)。
等等,我刚刚想到了什么?

JavaScript实现计算器的四则运算功能

如果大家都在输入的时候,自觉加一个空格隔开运算符与数值的话~

是不是我之前版本二中的字符串处理就可以省一下啦!!

所以作为开发者,一定要 注意规范,注意规范,注意规范!

上面完整代码中,

  1. 简化了调用加减乘除函数,改而用 array.splice(index - 1, 3, 运算) 运算直接可以操作两参数。

  2. 得到了可操作数组 array 后,先执行乘除法,再执行加减法。

  3. 乘除法里先判断 是否存在 * 或 / 两个符号,如果存在,则找到符号的位置,运算每一个乘除法,按数学的思维,谁在前先运算谁(但我依然规定了先运算所有的 *,再运算所有的 / 这种方式作为最终实现并放到了文章最开始。因为真正在运算的时候,乘除法的先后执行顺序得到的结果似乎并没有什么关系,而与我而言,我感觉在这套实现中,includes 与 find 的多次执行可能对性能上的损耗更大一些)

  4. 当所有的乘除法执行完毕后,就只剩下加减法了,这时候按顺序执行加减法即可。

  5. 最后保留两位小数。

其实这段代码更符合数学思维,先运算乘除法(谁在前先运算谁),再运算加减法。

如果大家有一些其他的想法,可以一起讨论一下~

三、思考

后端思维

1. 实现逆波兰表达式

1+2*3 这是一个中缀表达式,人脑很容易计算,结果为7。当然计算机也很容易处理这个表达式。

当我们输入1.2+(-1+3*1)*2,人脑需要思考一下,但计算机还是可以通过固定代码快速计算出结果。

但是,当我们随机输入中缀表达式 XXX 时,人脑可以手动计算出结果,计算机不可能一个表达式一个代码块,那么计算机怎么实现通用且快速的计算呢?答案就是后缀表达式。

中缀和后缀表达式在数据结构里有涉及到,我就不讲概念了,下面手动模拟一下计算机计算字符串表达式的过程。

2. 中缀表达式 => 后缀表达式

计算机易于计算的其实是后缀表达式,整个过程就是将已知的中缀表达式转换为后缀表达式。

2.1 定义【操作数栈】和【运算符栈】:

JavaScript实现计算器的四则运算功能

2.2 运算符栈出栈,操作数栈入栈,上式即可成为: 123*+ 这就是一个简单的后缀表达式

2.3 计算机在运算后缀表达式时:运算符栈读取 *,操作数栈读取 2,3 得到结果 6,;然后运算 1 + 6 = 7。

3. 较复杂的表达式计算

入栈:

( 后的- 作为负数进入操作数栈(如果作为符号位,后面计算会成1.1 - 30);

与上文一样,只是不同之处在于运算符栈,遇到 ( 以后先进入运算符栈;

JavaScript实现计算器的四则运算功能

直到遇到 )

JavaScript实现计算器的四则运算功能

3.1 使用 # 符号区分 负数、高位数、以及符号位

JavaScript实现计算器的四则运算功能

3.2 所以得到的后缀表达式为: #-1.1#3#10#*#+#2#/#

JavaScript实现计算器的四则运算功能

出栈过程:

  • 计算没有遇到符号位一 # 为准,依次取出

  • 直到遇到符号位之前,取出了三个数 -1.1 3 10

  • 遇到符号位以后,在结果栈中出栈,与符号计算结果 => 结果栈变为 -1.1 30

  • 依此计算:

JavaScript实现计算器的四则运算功能

  • 出栈完成后,就实现了对逆波兰表达式的求值运算。

前端思维

我拿到【实现一个支持四则混合运算的计算器】需求以后,首先想到的是字符串转数组,然后去操作数组,然后由于高级语言的特性,很多方法已经封装完成,所以实现起来相对容易一些。

当然,也可以采用前端的代码,用着后端的思维去实现也是一个选择。

结束

其实这个计算器与电脑中的常规计算器并无区别,后期可以考虑的升级方式

  • 实现 () 的优先级功能;

  • 其他数学计算等等...

总结一下就是,后端的实现在性能上无与伦比,尤其是代码的执行速度上,我这里没有测试数据,但是如果你有刷力扣的话,你可以看看同样的算法,JS 的空间复杂度【内存消耗】,是 C/C++ 等更底层的语言消耗数倍。

同样的,如果用 C/C++ 底层语言 + 后端思维 去实现【开辟内存】、将中缀表达式转换为后缀表达式所用定义的【操作数栈】、【运算符栈】;以及各种栈顶栈底的【指针操作】;外加如果交由用户使用涉及到的设置【代理】,网络协议封装等等... (最终总代码量数百行)

我将之称为业务复杂度(hhh)对比前端 20行+ 的代码实现~

更底层语言需要考虑的东西比较多,所以实现起来花费的人力相对更多,同样的收获的对电脑性能消耗性价比也是前端 JS 不可比拟的

不当之处还望各位指正~

来源:https://juejin.cn/post/7062000859378352164

标签:JavaScript,计算器,四则运算
0
投稿

猜你喜欢

  • 详解Mybatis逆向工程中使用Mysql8.0版本驱动遇到的问题

    2024-01-16 16:48:19
  • Pycharm远程连接服务器并实现代码同步上传更新功能

    2023-09-20 04:44:40
  • python+tifffile之tiff文件读写方式

    2022-03-16 13:17:41
  • MSSQL 监控数据/日志文件增长实现方法

    2024-01-22 14:05:34
  • Python中字符串对象语法分享

    2022-04-19 14:48:34
  • asp文章中随机插入网站版权文字的实现代码

    2011-04-15 11:11:00
  • iframe框架用JavaScript子页面控制父页面

    2009-01-19 13:43:00
  • 使用python 爬虫抓站的一些技巧总结

    2021-01-02 07:35:57
  • Python爬虫自动化爬取b站实时弹幕实例方法

    2023-03-21 04:45:42
  • Python 中类的构造方法 __New__的妙用

    2021-04-06 04:45:56
  • mysql部分替换sql语句分享

    2024-01-23 18:17:35
  • selenium.webdriver中add_argument方法常用参数表

    2023-12-05 13:39:38
  • python 剪切移动文件的实现代码

    2023-06-10 05:21:14
  • 安装Python和pygame及相应的环境变量配置(图文教程)

    2023-09-05 15:54:42
  • python实现画桃心表白

    2021-05-14 16:27:00
  • Keras搭建分类网络平台VGG16 MobileNet ResNet50

    2022-07-28 08:03:51
  • php中支持多种编码的中文字符串截取函数!

    2023-09-27 02:08:15
  • Python+seaborn实现联合分布图的绘制

    2022-06-14 01:23:53
  • python中最小二乘法详细讲解

    2022-02-12 22:33:07
  • 详解python实现线程安全的单例模式

    2021-05-02 08:57:02
  • asp之家 网络编程 m.aspxhome.com