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

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 两个像这样的值：

return (num1, num2);

Javascript 这样不行。如果你正在尝试做一个类似 Python 的元组，Javascript 没有具有该语法的数据结构。

您可以将两个值放在数组中，return 数组或将两个值放在对象中，return 对象。

然后，当您调用该函数时，您必须将结果分配给某些东西才能使用 returned 结果。

这是 return 一个数组的一种方法：

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 解构更新

当return对数组或对象中的两个值进行运算时，您还可以使用 ES6 语法来缩短代码来执行此操作。例如，当 returning 对象时，您可以使用 shorthand 语法将属性名称分配为与变量相同的名称：

return {num1, num2};

这实际上 return 是一个像这样的对象：

{ 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

尝试 return 数组（因为您只能 return 函数中的一个值）

  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 3

您可以 return 一个对象并在 add 函数中获取它的值

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;
}

Answer 4

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

return {num1: num1, num2: num2};

然后：

var values = getValue();

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

等等..

Answer 5

您不需要在您的代码中return多个值。

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

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

                return result;
            }

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

Answer 6

只是return一个对象！对象是让 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 7

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

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;
}

回到你的问题，你不能return两个变量作为一个函数的结果，除非你return将它作为数组。

Answer 8

我认为Javascript只支持多个return值作为解构的全局变量，所以不推荐。但是你可以 return 一个数组然后解构那个数组，这有点不方便，但是它做同样的事情。

          // 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;
            }

Answer 9

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

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/

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

JavaScript: How do I return two values from a function and call those two variables in another function?

javascript

parsing

return

function