基于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 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 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
杏林同学录(二)
2006/10/09 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Python绘制组合图的示例
2020/09/18 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
采购员的工作职责
2013/12/26 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
十八大演讲稿
2014/05/22 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
事业单位聘任报告
2015/03/02 职场文书
写给导师的自荐信
2015/03/06 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
MySQL 服务和数据库管理
2021/11/11 MySQL