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

问题描述 投票：0回答：10

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() 中的函数；创造价值的功能。

我很感谢您的帮助。

javascript function parsing return
10个回答
20
投票

你不能像这样返回两个值：

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);
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;
}
2
投票

在 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/

1
投票

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

  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;
  }
1
投票

您可以在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;
}

1
投票

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

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

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

                return result;
            }

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

1
投票

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

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

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

1
投票

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

return {num1: num1, num2: num2};

然后：

var values = getValue();

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

等等..

0
投票

我认为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;
            }
0
投票
如果您不想使用索引，那么使用返回的数组可以轻松地“分配多个变量名称”。方法如下：

编写一个返回数组的函数
    foobar()
  1. ：

    return [foo, bar]

    

    使用 
    2. let [myFoo, myBar] = [foo, bar]
  2. 将返回值分配给变量。
    

    现在您可以在代码中的其他地方使用 
    3. myFoo
  3.  和 
    myBar
    。
    

    

    使用您的代码得出结果。 （我使用 ECMAScript6 又名 ES6 
    4. const
 而不是 
var
。您也可以使用 
let
）：


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

      return [num1, num2];
  }

  function add(){
      const [num1, num2] = getValue();
      const result = parseFloat(num1) + parseFloat(num2);

      return result;
  }


    





      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.