JavaScript:如何从一个函数返回两个值并在另一个函数中调用这两个变量? [英] JavaScript: How do I return two values from a function and call those two variables in another function?

查看:91
本文介绍了JavaScript:如何从一个函数返回两个值并在另一个函数中调用这两个变量?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

JavaScript:

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()函数中;函数来创建一个值.

What I'm creating is a calculator that gets the values from input boxes. What I'm having trouble with is how am I supposed to call the variables I declare in the getValue(); function in my add(); function to create a value.

感谢您的帮助.

推荐答案

您不能返回两个这样的值:

You can't return two values like this:

return (num1, num2);

JavaScript不能那样工作.如果您尝试执行类似Python的元组,则Javascript没有使用该语法的数据结构.

Javascript doesn't work that way. If you're trying to do a Python-like tuple, Javascript doesn't have a data structure with that syntax.

您可以在数组中放置两个值,然后在一个对象中返回该数组,或者在对象中返回两个值.

You can put two values in an array and return the array or two values in an object and return the object.

然后,当您调用该函数时,必须将结果分配给某些对象才能使用返回的结果.

And, then when you call the function, you have to assign the result to something in order to use the returned result.

这是返回数组的一种方法:

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

或者,您可以将两个值放入具有命名属性的对象:

Or, you could put both values into an object with named properties:

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

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

The object syntax is more descriptive and verbose because each property has a relevant name rather than just a numeric index, but it's also less compact. In this particular case, you could use either the object or the array.

ES6解构更新

在数组或对象中返回两个值时,还可以使用ES6语法来缩短代码来实现.例如,当返回一个对象时,可以使用速记语法将属性名称分配为与变量相同的名称,如下所示:

When returning two values in an array or an object, you can also use ES6 syntax to shorten the code to do that. For example, when returning an object, you can use the shorthand syntax that assigns the property name as the same name as the variable as in:

return {num1, num2};

这实际上返回的对象是这样的:

This actually returns an object that is like this:

{ num1: num1, num2: num2 }

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

And, then when you call that function, you can use destructuring to assign both values to variables:

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

或者,您可以类似地对数组使用解构:

Or, you can use destructuring similarly with an array:

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

这篇关于JavaScript:如何从一个函数返回两个值并在另一个函数中调用这两个变量?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆