JavaScript 返回值

返回语句用于从函数中返回一个特定的值给函数的调用者。当调用返回语句时，函数将停止执行。返回语句应该是函数中的最后一条语句，因为返回语句之后的代码将无法被执行。

我们可以使用返回语句返回基本类型的值（例如布尔值、数字、字符串等）以及对象类型的值（例如函数、对象、数组等）。

我们还可以使用返回语句返回多个值。直接返回多个值是不可能的，我们必须使用一个数组或对象来从函数中返回多个值。

语法

return expression;

上述语法中的表达式是返回给函数调用者的值。它是可选的。如果未指定表达式，则该函数返回 undefined。

在 return 关键字和值之间不允许使用换行符。我们可以通过以下代码理解：

return
x + y;

然后，它将被转换为 –

return;
x + y;

在 return 语句之后自动插入了分号。在 return 语句之后编写的代码（ x + y; ）将被视为 不可访问的代码 。

我们可以使用括号来解决这个问题。可以写成 –

return (
x + y;
);

现在，让我们看一些使用 return 语句在JavaScript中的示例。

示例1

这是一个简单的使用 return 语句的示例。在这里，我们将返回两个数字的乘积的结果，并将值返回给函数调用者。

变量 res 是函数调用者；它正在调用函数 fun() 并传递两个整数作为函数的参数。结果将存储在变量 res 中。输出中的值 360 是参数 12 和 30 的乘积。

<!DOCTYPE html> 
<html> 

<head> 
</head> 

<body>

<h2> Welcome to the javaTpoint.com </h2>
<h3> Example of the JavaScript's return statement </h3>
    <script> 
var res = fun(12, 30);
function fun(x, y)
{
return x * y;
}
document.write(res);
    </script> 
</body> 

</html>

输出：

在执行以上代码之后，输出结果为 –

JavaScript 返回值

示例2

在这里，我们使用 return 语句中断一个函数。当调用 return 语句时，函数立即停止执行。

这里有一个无限循环 while 以及初始化为1的变量 i。循环会一直执行直到变量 i 的值达到 4 。当变量的值为4时，由于 return 语句，循环停止执行。循环后面的语句将永远不会执行。

这里的 return 语句没有使用表达式，所以返回的是 undefined。

<!DOCTYPE html> 
<html> 

<head> 
</head> 

<body>
<h2> Welcome to the javaTpoint.com </h2>
<h3> Example of the JavaScript's return statement </h3>
    <script> 
    var x = fun();
function fun() {
var i = 1;
  while(i) { 
    document.write(i + '<br>');
      if (i == 4) {          
        return;
      }
      document.write(i + '<br>');
      i++;
    }
  document.write('Hello world');
}
</script> 
</body> 

</html>

输出

在上述代码执行后，输出结果将是 –

JavaScript 返回值

现在，我们将看到如何使用 return 语句返回多个值。通常，JavaScript函数只返回一个值，但可以通过使用 array 或 object 来返回多个值。为了返回多个值，我们可以将这些值封装为对象的属性或数组的元素。

示例3 – 使用数组返回多个值

在这个示例中，我们使用 Array 返回多个值。在这里，我们使用 ES6 Array解构 语法来展开数组的值。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript return </title>
</head>
<body>
<h1> Welcome to the javaTpoint.com </h1>
<h3> This is an example of returning multiple values using array </h3>
<script>
function getData() {
let fname = 'John',
lname = 'Rickman',
age = '25',
occupation = 'Private Employee';

return [fname, lname, age, occupation];
}
const [fname, lname, age, occupation] = getData();

document.write("Name = " + fname + " " + lname + "<br>");
document.write("Age = " + age + "<br>");
document.write("Occupation = " + occupation);
</script>
</body>
</html>

输出

JavaScript 返回值

示例4 – 通过使用对象返回多个值

在这个示例中，我们通过使用对象来返回多个值。在这里，我们使用 ES6对象解构 语法来解包对象的值。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript return </title>
</head>
<body>
<h1> Welcome to the javaTpoint.com </h1>
<h3> This is an example of returning multiple values using object </h3>
<script>
function getData() {
let fname = 'John',
lname = 'Rickman',
age = '25',
occupation = 'Private Employee';

return {
fname,
lname,
age,
occupation
};
}
let {fname, lname, age, occupation} = getData();
document.write("Name = " + fname + " " + lname + "<br>");
document.write("Age = " + age + "<br>");
document.write("Occupation = " + occupation);
</script>
</body>
</html>

输出

JavaScript 返回值