不二如是 发表于 2018-4-3 15:31:31

0003 ¥ 用栈解决#十进制到二进制问题

本帖最后由 不二如是 于 2018-4-3 15:31 编辑

http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif



在上一节分析了栈的工作原理,栈的应用十分广泛。

在回溯问题中,它可以存储访问过的任务或路径、撤销操作(后面会介绍~)。

既然我们了解了Stack类的用法,用它来解决一下十进制转二进制的问题。



十进制到二进制



现实生活中,从9年义务教育开始,我们主要使用十进制。

但在计算机的世界中,二进制则是王道,因为计算机里面的所有内容都是用二进制数字表示的(0,1)。

要把十进制转换成二进制,可以用最常用的“满二进一”(十进制数字和2整除,直到结果为0),见上图所示。

我们用栈来实现上述过程。



开始前的准备

页面初始结构:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
    <meta name="description" content="《零基础入门学习Web开发》案例演示">
    <meta name="author" content="鱼C工作室">
    <title>鱼C-数据结构与算法(JavaScript)</title>
    <script src="js/stack.js"></script>
</head>
<body>

</body>
</html>

由于js本身没有栈,把咱们在01讲创建的栈,引入到页面中。

<script src="js/stack.js"></script>

stack.js:
function Stack() {

    let items = [];

    this.push = function(element){
      items.push(element);
    };

    this.pop = function(){
      return items.pop();
    };

    this.peek = function(){
      return items;
    };

    this.isEmpty = function(){
      return items.length == 0;
    };

    this.size = function(){
      return items.length;
    };

    this.clear = function(){
      items = [];
    };

    this.print = function(){
      console.log(items.toString());
    };

    this.toString = function(){
      return items.toString();
    };
}

直接通过“var xxx = new Stack()”即可使用。

现在进行html标签部分的设计(No Why):
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
    <meta name="description" content="《零基础入门学习Web开发》案例演示">
    <meta name="author" content="鱼C工作室">
    <title>鱼C-数据结构与算法(JavaScript)</title>
    <script src="js/stack.js"></script>
</head>
<body>
<p>输入十进制数字为:<span id="decimal"></span>等价于二进制:<span id="binary"></span></p>
<script>
    let decimal = prompt("请输入一个十进制数字");
    document.getElementById("decimal").innerHTML = decimal;
</script>
</body>
</html>

这样按照需要输入的十进制数字就会写入到id为decimal的span中:




十进制转二进制算法编写

先来创建一个转换函数:
function decimalToBinary(decNumber){
    }

decNumber是形参,接收输入的十进制数字。

现在初始化一个栈类和两个局部变量:
let remStack = new Stack(), rem, binaryString = '';

rem用来保存余数,binaryString用来保存转换后的结果。

循环条件默认decNumber(输入的十进制)大于0才可执行:
while (decNumber > 0){
rem = Math.floor(decNumber % 2);
remStack.push(rem);
decNumber = Math.floor(decNumber / 2);
      }

在这段while循环中,当输入值满足和2做整除的条件时,就会获得当前结果和2整除的余数(rem)。

然后放到(push)栈里。

接着让decNumber进行下一次整除。

上述过程中,我们通过JS自带的Math.floor函数让除法的操作返回整数部分。

现在可以进入收尾工作了:
while (!remStack.isEmpty()){
binaryString += remStack.pop().toString();
}
return binaryString;

最后用pop方法把栈中的元素都移除,利用后进先出原理,把出栈的的元素变成连续的字符串。

将转换的二进制输出:
let binary = decimalToBinary(decimal);
document.getElementById("binary").innerHTML = binary;

最终:


源代码:




如果有收获,别忘了评分{:10_281:} :

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油,如果喜欢本系列学习笔记,请订阅 专辑☞(传送门)(不喜欢更要订阅{:10_297:} )

http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
页: [1]
查看完整版本: 0003 ¥ 用栈解决#十进制到二进制问题