Question

JavaScript的：

                function getValue(){
                    var num1 = document.getElementById("firstNum").value;
                    var num2 = document.getElementById("secondNum").value;

                    return (num1, num2);
                }

                function add(){
                    getValue();

                    var result = parseFloat(num1) + parseFloat(num2);

                    return result;
                }

我正在创建的是一个从输入框中获取值的计算器。我遇到的问题是我应该如何调用我在getValue（）中声明的变量;函数在我的add（）;函数创建一个值。

我很感激帮助。

Answer 1

您无法返回两个值：

return (num1, num2);

Javascript无法正常工作。如果您正在尝试执行类似Python的元组，则Javascript没有具有该语法的数据结构。

您可以在数组中放入两个值，并在对象中返回数组或两个值，然后返回该对象。

然后，当你调用函数时，你必须将结果分配给某些东西才能使用返回的结果。

这是返回数组的一种方式：

function getValues(){
    var num1 = document.getElementById("firstNum").value;
    var num2 = document.getElementById("secondNum").value;
    // return array of two values
    return [num1, num2];
}

function add(){
   // get values and assign the returned array to a local variable named values
   var values = getValues();
   return parseFloat(values[0]) + parseFloat(values[1]);
}

或者，您可以将两个值都放入带有命名属性的对象：

function getValues(){
    var num1 = document.getElementById("firstNum").value;
    var num2 = document.getElementById("secondNum").value;
    // return array of two values
    return {firstNum: num1, secondNum: num2};
}

function add(){
   // get values and assign the returned array to a local variable named values
   var values = getValues();
   return parseFloat(values.firstNum) + parseFloat(values.secondNum);
}

对象语法更具描述性和冗长，因为每个属性都有一个相关的名称，而不仅仅是一个数字索引，但它也不那么紧凑。在这种特殊情况下，您可以使用对象或数组。

ES6解构更新

在数组或对象中返回两个值时，您还可以使用ES6语法缩短代码来执行此操作。例如，在返回对象时，您可以使用简写语法将属性名称指定为与变量相同的名称，如下所示：

return {num1, num2};

这实际上返回一个如下对象：

{ num1: num1, num2: num2 }

然后，当您调用该函数时，可以使用解构将两个值分配给变量：

function getValues(){
    var num1 = document.getElementById("firstNum").value;
    var num2 = document.getElementById("secondNum").value;
    // return array of two values
    return {num1, num2};
}

let {num1, num2} = getValues();
console.log(num1);
console.log(num2);

或者，您可以使用与数组类似的解构：

function getValues(){
    var num1 = document.getElementById("firstNum").value;
    var num2 = document.getElementById("secondNum").value;
    // return array of two values
    return [num1, num2];
}

let [num1, num2] = getValues();
console.log(num1);
console.log(num2);

Answer 2

简单地返回一个物体！对象是使JavaScript如此强大的东西之一。

function getValue() {
  return {
     firstNum:  document.getElementById("firstNum").value,
     secondNum: document.getElementById("secondNum").value
  };
}

function add() {
   var values = getValue();
   var result = parseFloat(values.firstNum) + parseFloat(values.secondNum);
   return result;
}

Answer 3

在ECMAScript 6（ES6）中，您可以使用对象解构，使用大括号来创建和解包对象（在您的情况下，它看起来像一个元组）。您还可以使用ES6中提供的属性值简写：

const getValues = () => {
  const num1 = document.getElementById("firstNum").value;
  const num2 = document.getElementById("secondNum").value;
  return { num1, num2 }; //note that this is the property value shorthand. 
  // It is a shorthand for { num1: num1, num2: num2 }
}

const add = () => {
  const { num1, num2 } = getValue(); //unpack using object destructuring
  return parseFloat(num1) + parseFloat(num2);
}

此处提供更多信息：http://www.benmvp.com/learning-es6-enhanced-object-literals/

Answer 4

尝试返回一个数组（，因为你只能从函数中返回一个值）

  function getValue() {
    var num1 = document.getElementById("firstNum").value;
    var num2 = document.getElementById("secondNum").value;

    return [num1, num2];
  }

  function add() {
    var values = getValue(),
        result = parseFloat(values[0]) + parseFloat(values[1]);

    return result;
  }

Answer 5

您可以返回一个对象并在添加函数中获取其值

＆＃13;

function getValue(){
  var num1 = document.getElementById("firstNum").value;
  var num2 = document.getElementById("secondNum").value;

  return {num1: num1, num2: num2};
}

function add(){
  var obj = getValue();

  var result = parseFloat(obj.num1) + parseFloat(obj.num2);

  return result;
}

＆＃13;

Answer 6

您可以将变量放入一个整洁的小对象中，如下所示：

return {num1: num1, num2: num2};

然后：

var values = getValue();

var result = parseFloat(values.num1) + parseFloat(values.num2);

等等..

Answer 7

您不需要在代码中返回多个值。

           function getValue(ID){
                return document.getElementById(ID).value;
            }

            function add(){
                var result = parseFloat(getValue("firstNum")) + 
                             parseFloat(getValue("secondNum"));

                return result;
            }

如果其中一个ID不存在，则上述代码将失败，但您的代码也将如此。

Answer 8

如果这两个返回值将由另一个函数使用，则将它们用作第二个函数的参数。

function getValue(){

    var num1 = document.getElementById("firstNum").value;
    var num2 = document.getElementById("secondNum").value;

    //return (num1, num2);
    //instead of returning the values, use them immediately to the consuming method
    var addedNumbers = add(num1, num2);
    return addedNumbers;
}

function add(num1, num2){

    var result = parseFloat(num1) + parseFloat(num2);

    return result;
}

回到你的问题，你不能因函数而返回两个变量，除非你把它作为数组返回。

Answer 9

我认为Javascript仅支持多个返回值作为具有解构的全局变量，因此不推荐使用。但是你可以返回一个数组，然后破坏那个数组，这有点不方便，但它做同样的事情。

          // global multiple returns
     function getValues(){
           let values=[]; 
            values.push(document.getElementById("firstNum").value);
           values.push(num2 = document.getElementById("secondNum").value);
          // return array of two values
          return [num1, num2]=values;
        }
         //recommended way without global variables requiring destructuring outside of function
            function getValue(){
                 let values=[];
                 values.push(document.getElementById("firstNum").value);
                values.push(document.getElementById("secondNum").value);

                return values ;
            }

           let[num1,num2]=getValues();//breaks array into multiple variables

      function add(){
                getValue();

                var result = parseFloat(num1) + parseFloat(num2);

                return result;
            }

JavaScript：如何从函数返回两个值并在另一个函数中调用这两个变量？

9 个答案: