基于JS实现计算24点算法代码实例解析


Posted in Javascript onJuly 23, 2020

前言

休息的时候无意间看到群里有人发出了华为的校招题,一开始看题目的时候觉得很简单,于是晚上就试着写了一下,结果写的过程中打脸,不断的整理逻辑不断的重写,但我的性格又是不做出来晚上睡不好的那种,于是在做出来的时候就分享给大家(快凌晨三点了有木有,这校招题难度都达到这级别了?o(???)o)

题目描述

基于JS实现计算24点算法代码实例解析

审题要注意:1+2+3*4是前面三个已经相加为6再乘4,没有括号!!

代码:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>21点</title>
 <script>

   // 牌和对应的权重
   const pokerBox = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];//下标+1刚好就是对应的分值
   let calcSym = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];//0,1,2 3,4 5,6,7 8,9分别对应+-*/

   function Calculate(a, b, c) {
    if (c <= 2) return a + b;
    if (c <= 4) return a - b;
    if (c <= 7) return a * b;
    if (c <= 9) return a / b;
    return -1;
   }

   function filter(c) {
    if (c <= 2) return "+";
    if (c <= 4) return "-";
    if (c <= 7) return "*";
    if (c <= 9) return "/";
    return;
   }

   let answer = "NONE";//回复的字符串 默认回复NONE,表示无解
   function Calculate24(a, b, c, d, C1, C2, C3) {
    let sum = Calculate(Calculate(Calculate(a, b, C1), c, C2), d, C3);
    if (sum === 24) answer = `公式为:${a} ${filter(C1)} ${b} ${filter(C2)} ${c} ${filter(C3)} ${d} = ${sum}`;
    return sum;
   }

   // 全排列
   //这里的全排序就是把原先的数组复制一个出来,然后新数组代替原先数组删除该值,temp数组添加该值,当新数组的长度为0,说明转移完成,就把temp数组放入matrix数组中
   function permutation(pokers) {
    let matrix = [];
    const subFunc = (arr, temp) => {
     if (temp.length > 4) temp.length = 4;//为了避免过长
     if (arr.length === 0) matrix.push(temp);
     arr.forEach((elem, i) => {
      subFunc([...arr.slice(0, i), ...arr.slice(i + 1)], [...temp, elem]);
     });
    }
    subFunc(pokers, []);
    return matrix;
   };

   // 计算总数为24
   function Count24(a, b, c, d) {
    calcSym.sort((x, y) => x - y);//升序排序
    if (Calculate24(a, b, c, d, calcSym[0], calcSym[1], calcSym[2]) === 24) return true;//第一次判断如果符合就不需要执行下面的循环了
    let i = 1;//上面判断了一次,因此这里从1开始
    if (calcSym.length <= 10) calcSym = [...new Set(permutation(calcSym).flatMap(item=>item.join()))].map(item=>item.split(","));//二维数组去重,并获取全排的数组(即每一种可能性)
    while (true) {
     if (Calculate24(a, b, c, d, calcSym[i][0], calcSym[i][1], calcSym[i][2]) === 24) return true;
     if (i < calcSym.length - 1) i++;
     else return false;//如果数组遍历完都没
    };
    return false;
   }

   function init() {
    if (calcSym.length === 12) calcSym = permutation(calcSym);//获取全排的数组(即每一种可能性)
   }
   init();//初始化就立即执行

   // 对输入的数字进行一次全排
   function calcNumber(arr) {
    if (Count24(arr[0], arr[1], arr[2], arr[3])) return true;//这一步满足那么下面就不用执行permutation了,因为底层是递归,很消耗性能
    let i = 1;
    if (arr.length <= 4) arr = [...new Set(permutation(arr).flatMap(item=>item.join()))].map(item=>item.split(","));//二维数组去重
    if (arr.length > 1) {
     while (true) {
      if (Count24(arr[i][0], arr[i][1], arr[i][2], arr[i][3])) return true;
      if (i < arr.length - 1) i++;
      else return answer = "NONE";
     }
    };
    return answer = "NONE";
   }

   // 当我输入完光标离开的时候就开始判断并计算
   function pokers(event) {
    let arr = event.value.trim().split(" ");
    if (arr.length > 4) {
     arr.length = 4;
     document.getElementById("poker").value = arr.join(' ');
     alert("您输入的牌数大于4张,这边自动帮您删除");
    }
    if (arr.some(item => !pokerBox.includes(item))) alert("ERROR");
    else {
     let arrNew = arr.map(item => { return pokerBox.indexOf(item) + 1 });//计算权重
     calcNumber(arrNew);//执行计算
    }
   }
   function dialog() { alert(answer) };
 </script>
</head>

<body>
 <!-- 这里设置为失去焦点就开始计算是为了尽量减少用户等待的时间,但注意不要设置为输入就开始计算,否则浏览器会卡到崩溃 -->
 <!-- 由于是遍历数组获取结果,如果用户输入的值不为24,那么系统会查询的很慢,这个时候的优化方案有:
 一、每次用户输入的值和对应的回复保存在一个数组内,下次用户输入时先判断是否在该数组内,不在的时候再执行计算
 二、我们可以先排除一部分不可能的值放入数组,比如用户输入2 2 2 2或A A A A,这种怎么算都不可能为24,如果用户输入的为这一类就直接Pass
 三、先把最耗时的calcSym数组的全排改为用户一进入页面就先异步加载计算 -->
 <input type="text" onblur="pokers(this)" name="21" id="poker">
 <input type="button" onclick="dialog()" value="confirm" />
</body>

</html>

实现的效果:

基于JS实现计算24点算法代码实例解析

基于JS实现计算24点算法代码实例解析

基于JS实现计算24点算法代码实例解析

总结思路:

题目第一眼看到就应该想到递归,之前我是把加减乘除都设为一个方法,想采用面向切面的方式进行计算,但是这种方式逻辑复杂且无法计算复杂一点的公式,因此就改为直接把所有可能出现的结果都拿出来一一比对,只要其中一个为24就终止循环,否则循环结束之后返回NONE;

calcSym=[0,1,2,3,4,5,6,7,8,9];//0,1,23,45,6,78,9分别对应+-*/,这里为三个+,两个-,三个*,两个除,大家可以推理得出,6+6+6+6,1*2*3*4,2*13-1-1,13*13/13+11等等,除号和减号最多只可能有两个,而加号和乘号最多可以为三个;

至于全排列方法permutation,是借鉴了STL的next_permutation函数(C++),之所以二维数组去重也是封装的方法可能出现多个数组重复的情况,要知道每多一个数组,底层是用递归查询一遍,浏览器会非常卡;

最后就是我在代码中提到的优化方法,有兴趣的小伙伴可以去试一下,代码还有优化的空间。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
javascript递归函数定义和用法示例分析
Jul 22 #Javascript
简单了解vue 插值表达式Mustache
Jul 22 #Javascript
详解node.js 事件循环
Jul 22 #Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 #jQuery
详解vue中v-on事件监听指令的基本用法
Jul 22 #Javascript
使用vue实现通过变量动态拼接url
Jul 22 #Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 #Javascript
You might like
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
就业自荐信
2013/12/04 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
安全技术说明书
2014/05/09 职场文书
校外活动方案
2014/08/28 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
刮痧观后感
2015/06/05 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书