【问题标题】:How to concatenate two numbers into a Stack in Javascript如何在Javascript中将两个数字连接成一个堆栈
【发布时间】:2019-09-19 13:09:43
【问题描述】:

所以如果为真,我想连接两个数字。例如,如果用户单击按钮编号“2”和按钮编号“3”,则应将其存储在堆栈中作为 ["23"] 而不是 ["2", "3"]。无论是 23 还是只有 2,当您点击一个运算符(“+”、“-”、“*”、“/”、“=”)时,您应该点击第二个数字。它用于 Javascript 中的计算器。

示例: 用户单击 23、+、7,然后单击 =。那应该在堆栈中存储为 ["23", "+", "7", "="],希望你明白这一点。

更新

var stack = new Array();
for (let i = 0; i < length; i++)
                {
                    buttons[i].addEventListener("click", handle);
                }

        var prevop = '';

        function handle(event)
        { 
            const value = event.target.value;
            var myFirstInput =+ value;

我被困在这里了。

            if(prevop == '+' || prevop == '-' || prevop == '*' ||prevop == '/')
            {
                var mySecondInput =+ value;
                var input = "" + myFirstInput + myFirstInput;
                stack.push(input);
            }

            if (prevop == '=') {
                document.getElementById("textfield").value = "";
            }

            prevop = value;

            switch(value)
            {   
                case "+":
                    console.log("+ was clicked");
                    document.getElementById("textfield").value += value;
                    break;
                case "-":
                    console.log("- was clicked");
                    document.getElementById("textfield").value += value;
                    break;
                case "*":
                    console.log("* was clicked");
                    document.getElementById("textfield").value += value;
                    break;
                case "/":
                    console.log("/ was clicked");
                    document.getElementById("textfield").value += value;
                    break;
                case "=":
                    var tmp = eval(document.getElementById("textfield").value);
                    document.getElementById("textfield").value += value + tmp;
                    break;
                default:
                    console.log("%s was clicked", value);
                    document.getElementById("textfield").value += value;
            }
        }

【问题讨论】:

  • 这里放一些代码供我们调整...
  • 你的代码在哪里,你在什么时候卡住了?
  • @MKougiouris 发布了我的代码
  • @Stuart 发布了我的代码
  • 您是否总是只有 2 个数字(例如 55 + 22、3 + 4 等)?或者你会在用户推送=时进行更复杂的计算,比如 55 + 22 * 3 吗?

标签: javascript arrays stack calculator


【解决方案1】:

没有代码有点难以回答,但据我了解,您的问题是我的建议:

只要没有点击计算器的 + 号,您就可以将“字符串数字”与 + 号(不是计算器的 + 号)连接起来。

数组第一个元素的示例:

"2" + "3" // "23" when 2 and 3 are clicked

通过这样做,您可以继续向数组的第一个元素添加字符串。

然后,当单击计算器的 + 符号或任何其他计算符号时,将“+”(或单击的符号)作为字符串添加到数组中;在索引 1。 这样,您的数组的前 2 个元素将是 ["23", "+"]

您可以有一个逻辑来检查数组索引 1 处的元素是否与“+”或“-”或“*”或“/”不匹配。如果尚未选择,您可以继续将数字添加到索引 0。 只要索引 3 不等于 =,索引 2 也是如此。 这就是我理解你想要做的。这有意义吗?

归根结底,如果您想返回结果,您可以将所有内容存储为字符串,而不必担心将其设为数组(除非您想跟踪在单独元素中键入的内容)。以下是计算结果的方法:

function mathEval(mathString) { // this hack evaluates your math function and immediately returns a result.
  return new Function('return ' + mathString)();
}

console.log(mathEval("23+7")); // 30. You can trigger the eval when the = sign is clicked

【讨论】:

  • 所以是的,我认为我们的想法相同,伙计。基本上只是把它想象成一个正常的计算器工作。我只需要将数字存储在堆栈中,无论我想要 23、3、1、55。它应该相应地存储。因为现在我的问题是这个。当我想要“23”、“+”、“55”时。我在堆栈中得到“2”、“3”、“+”、“5”、“5”。
  • @Zagros 我还更新了我的回复,以防你真正想要的是操作的结果:) 我认为它可能有用。
  • 抱歉,我没有看到您的代码包含与将元素推入堆栈相关的任何内容?我错过了什么吗?
  • 通过上面的逻辑,您可以决定何时将值推送到堆栈数组。您只需在逻辑中执行两次stack.push 即可做到这一点。 var stack = []; stack.push("23", "+") 按下符号时。然后stack.push("7", "=") 当 = 被按下时。它给你 ["23", "+", "7", "="]
【解决方案2】:

我实现了最小的“计算器”,它将按照您的描述进行堆栈操作。

https://jsbin.com/maberic/5/edit?html,js,output

window.onload = function() {
    var stack = [];
    var inputField = document.querySelector('#textfield');
    var buttons = [];
    var buttonsContainer = document.querySelector('#buttons');
    var actions = {
        'add': '+',
        'sub': '-',
        'mul': '*',
        'div': '/' // you can use custom symbols e.g. "÷" U+00F7 Division Sign Unicode Character
    };
    var buttonsHandler = function(event) {
        var button = event.target;
        var action = button.getAttribute('action');
        switch (action) {
            case 'input':
                var value = button.getAttribute('value');
                if (stack.length <= 0 || isNaN(parseInt(stack[stack.length - 1], 10))) {
                    // if empty stack or last is sign we can just push
                    stack.push(value)
                } else {
                    // else we need to concat last *number*
                    stack[stack.length - 1] += '' + value; // make sure we have a string
                }
                inputField.value += value;
                break;
            case 'action':
                var op = button.getAttribute('op');
                switch (op) {
                    case 'bs':
                        // implement here backspace logic
                        // e.g. remove last char from number or remove operator entirely
                        break;
                    case 'eq':
                        // implement here logic for "=" button
                        // avoid using eval: https://medium.com/mail-online/eval-is-evil-but-not-why-you-may-think-25961f9b01bb
                        break;
                    case 'cl':
                        stack = [];
                        inputField.value = '';
                        break;
                    default:
                        stack.push(actions[op]);
                        inputField.value += actions[op];
                        break;
                }
                break;
            default:
                break;
        }
        // here you can apply "post" actions for your stack
    };
    /* Buttons "generator" */
    [ {type: 'input', value: 1 },
      {type: 'input', value: 2 },
      {type: 'input', value: 3 },
      {type: 'linebreak' },
      {type: 'input', value: 4 },
      {type: 'input', value: 5 },
      {type: 'input', value: 6 },
      {type: 'linebreak' },
      {type: 'input', value: 7 },
      {type: 'input', value: 8 },
      {type: 'input', value: 9 },
      {type: 'linebreak' },
      {type: 'dummy' },
      {type: 'input', value: 0 },
      {type: 'dummy' },
      {type: 'linebreak' },
      {type: 'action', sign: actions.add, action: 'add'},
      {type: 'action', sign: actions.sub, action: 'sub'},
      {type: 'linebreak' },
      {type: 'action', sign: actions.mul, action: 'mul'},
      {type: 'action', sign: actions.div, action: 'div'},
      {type: 'linebreak' },
      {type: 'action', sign: '=', action: 'eq'},
      {type: 'linebreak' },
      {type: 'action', sign: '< Backspace', action: 'bs'},
      {type: 'action', sign: 'Clear', action: 'cl'} ]
    .forEach(function(elem) {
        switch(elem.type) {
            case 'input':
                var button = document.createElement('button');
                button.innerText = elem.value.toString();
                button.setAttribute('action', 'input');
                button.setAttribute('value', elem.value);
                button.onclick = buttonsHandler;
                buttonsContainer.append(button);
                buttons.push(button);
                break;
            case 'dummy':
                var dummy = document.createElement('button');
                dummy.innerText = '_';
                buttonsContainer.append(dummy);
                break;
            case 'action':
                var action = document.createElement('button');
                action.innerText = elem.sign.toString();
                action.setAttribute('action', 'action');
                action.setAttribute('op', elem.action);
                action.onclick = buttonsHandler;
                buttonsContainer.append(action);
                buttons.push(button);
                break;
            case 'linebreak':
                var br = document.createElement('br');
                buttonsContainer.append(br);
                break;
            default:
                break;
      }
    });
    /* end */
}
<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="Simple calc template">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width"/>
    <title>Example</title>
</head>
<body>
    <input id="textfield" type="text" readonly="readonly"/>
    <br/>
    <div id="buttons"></div>
</body>
</html>

另外,我建议你不要使用 eval:https://medium.com/@epoberezkin/eval-is-evil-but-not-why-you-may-think-25961f9b01bb

您可以使用您的堆栈。但是您需要记住有关操作顺序的乘法、除法等。

【讨论】:

  • 您的示例确实有效。请您解释一下 if 语句是如何工作的。
  • 为什么要记住它?他可以问一个关于如何连接并构建整个程序的模糊问题。
  • @Zagros 当然。它由两部分组成:第一个是检查stack.length &lt;= 0,所以如果我们的堆栈为空,则此语句为真,第二个是检查堆栈中的最后一个对象是否可以被视为以 10 为底的数字(例如,如果你尝试解析不是数字(“+”、“-”等),它将返回 NaN,因此内置函数会判断它是否为 NaN)。
  • @Matt,如果没有这样的例子,我很难解释算法,所以我找到了展示最小原型的最简单方法。
  • @Zekfad 随意添加有关如何连接和推送到堆栈的解释部分。
【解决方案3】:

您可以检查键值是否为数字,并据此做出选择:

let fooArray = ["2", "3", "+", "7", "=" ]

function testFunction(keyVal) {
    let someArray = [];
    fooArray.forEach((f, i) => {
        if (i != 0) {
            let toBeInserted = fooArray[i - 1];
            if ( isNumeric(f) && isNumeric(toBeInserted)) {
                someArray.push(`${toBeInserted}${f}`);
            } else {
                someArray.push(f);
            }
        } else {
            someArray.push(f);
        }
    });

    return someArray;
}

function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

console.log(testFunction(fooArray));

【讨论】:

    猜你喜欢
    • 2020-02-21
    • 1970-01-01
    • 1970-01-01
    • 2020-02-27
    • 1970-01-01
    • 2017-03-30
    • 2021-12-29
    • 1970-01-01
    • 2015-08-07
    相关资源
    最近更新 更多