返回值

JavaScript 函数返回值免费看

函数返回值的使用、函数中能否包含多个return语句、

2020-06-13侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 8     0     1446

本节我们学习函数的返回值,那么什么是返回值呢?我们来看下面这个函数:

function show(){
  return "侠课岛";
}

console.log(show());  // 输出: 侠课岛

上述代码中,return 关键字后面接的就是函数的返回值。 return 关键字后面可以是任意类型的值,也可以是表达式,例如aa+b 等,像上代码中的"侠课岛"就是一个字符串。

函数返回值的使用

JavaScript 语言中,在函数体内,使用 return 语句可以设置函数的返回值,一旦执行 return 语句,将停止函数的运行,并运算和返回 return 后面的表达式的值。如果函数不包含 return 语句,则执行完函数体内每条语句后,返回 undefined 值。

示例:

我们先来看不带 return 语句的函数,下面是一个自定义的 num()

function num(){
  var a = 10;
}
console.log(num());  // 输出:undefined

在这个 num() 函数中,我们仅定义了一个变量 a,并没有指定 return 语句,所以当我们使用 console.log()输出函数时,得到一个 undefined。从这里我们可以知道当函数中没有指定 return 语句时,默认返回值为undefined。

然后我们看一下带参函数,在这个带参函数中,我们指定一个 return 语句,并且这个 return 语句后面还有代码,先看代码:

function num(){
  var a = 10;
  var b = 20;
  return a + b;
  console.log("return语句后面的代码不会执行。")
}
console.log(num());  // 输出:30

我们执行上述代码,会发现代码执行结果输出为 30,但是 return 语句后面的代码并没有执行,这就是说一旦执行 return 语句,将停止函数的运行,不管return 语句后面有多少代码都不会再执行。

还有一点需要注意的是,执行代码时虽然 return 语句能返回函数返回值,但是并不能将结果输出在控制台,要想输出结果,还需要用到 console.log() 方法。

示例:

下面这个函数,运行后不会输出任何东西,这是因为函数中没有任何用于输出的语句,return 的功能仅仅是返回函数的值,并不会输出这个值:

function num(){
    var a = 10;
    return a;
  }
num();

大家有没有发现,return 语句的作用还和 break 语句有点类型呢,不过 break 语句主要用于退出循环,而return 语句用于退出函数,终止函数的执行。

函数中能否包含多个return语句

我们知道一旦执行 return 语句,函数将停止运行。那么一个函数中能否有多个 return 语句呢?

一个函数体内可以同时包含多个 return 语句,但是只会执行其中一个return 语句。

示例:
function show(){
    return "xkd";
    return "summer";
    return "mark";
  }
console.log(show());

// 输出:xkd

如果函数真的需要多个返回值,我们可以将值组合成一个对象或数组进行返回。

示例:

例如下面这个函数:

function num(a, b, c){
    return [a, b, c];
}

console.log(num(2, 5, 7));

// 输出:[ 2, 5, 7 ]

我们使用将多个返回值组成了一个数组,通过逗号将返回值隔开,最终输出的结果也为一个数组。

可能有人会觉得,既然可以放到数组或对象中,那么直接将值通过逗号返回可不可以,我们来试一下:

function show(){
    var a = 1;
    var b = 2;
    var c = 3;
    return a, b, c;
  }
console.log(show());   // 输出:3

从输出结果可以看出,单纯的通过逗号将返回值隔开,只会返回最右边的那个值。

还有一种情况,我们可以在函数体内可以使用分支结构决定函数返回值,或者使用 return 语句提前终止函数运行。

示例:

定义一个函数,函数中有两个参数a、b,当 a 大于 b 时,返回 “a-b” 的值,当 a 等与 b 时,返回 “a + b”,当 a 小于 b 时,返回 “b-a”:

function compute(a, b){
    if(a > b){
      return a - b;
    }else if(a == b){
      return a + b;
    }else{
      return b - a;
    }
}

console.log(compute(9, 2));  // 输出:7
console.log(compute(5, 5));  // 输出:10
console.log(compute(4, 7));  // 输出:3

我们在调用函数时,给参数赋值,然后根据 if 判断语句返回不同的返回值。

或者我们将返回值赋值给一个变量,然后再输出,也是一样的结果:

var r1 = compute(9, 2);
var r2 = compute(5, 5);
var r3 = compute(4, 7);

console.log(r1);  // 输出:7
console.log(r2);  // 输出:10
console.log(r3);  // 输出:3

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

8

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?