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

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;
                }
我正在创造一个从输入框获取值的计算器。我遇到的问题是,我应该如何在我的add()函数中调用我在getValue()函数中声明的变量来创建一个值。
感谢帮助。

2
一个函数只能返回一个值。但是你当然可以让这个值成为一个数组或者一个对象,里面包含了多个值... - CBroe
也许更深入地学习JavaScript中的对象会有所帮助。一个想法是返回一个对象,如numbers.num1 = num1 numbers.num2 = num2,然后返回“nmbrs”。您还可以使用numbers[0] = num。 - Asher
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);

你现在可以在 ES6 中使用对象解构。这是我的答案:https://dev59.com/2F4b5IYBdhLWcg3wfxxI#47565814 - VIN

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/


2

在 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
你可以把变量放入一个整洁的小对象中,就像这样:
return {num1: num1, num2: num2};

然后:

var values = getValue();

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

等等,等等...


1

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

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

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

                return result;
            }

上面的代码将会在任一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
尝试返回一个数组(因为您只能从函数中返回一个值)
  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;
  }

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

如果你不想使用索引,使用返回的数组可以很容易地给多个变量赋值。以下是方法:

  1. 编写一个名为 foobar() 的函数,返回一个数组:return [foo, bar]

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

  3. 现在你可以在代码的其他地方使用 myFoomyBar

使用你的代码结果。(我使用 ECMAScript6,也称为 ES6 的 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;
  }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接