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

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() 中运行；创造值(value)的功能。

感谢您的帮助。

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