函数的作用就是保存某段功能代码,以便这段代码可以多次被复用

我们已经看到了内置函数的示例,如 alert(message)prompt(message, default) 。但我们也可以创建自己的函数。

1. 函数声明

使用 函数声明 创建函数。

看起来就像这样:

function showMessage() {
  alert( 'Hello everyone!' );
}

function 关键字首先出现,然后是 函数名,然后是括号之间的 参数 列表(用逗号分隔,在上述示例中为空),最后是花括号之间的代码(即“函数体”)。

function name(params) {
  ...body...
}

函数可以通过名称调用:showMessage()

例如:

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

调用 showMessage() 执行函数的代码。这里我们会看到显示两次消息。

这个例子清楚地演示了函数的主要目的之一:避免代码重复。

2. 函数表达式

另一种创建函数的语法称为 匿名函数表达式

通常会写成这样:

var sayHi = function() {
  alert( "Hello" );
};

在这里,函数被创建并像其他赋值一样,被明确地分配给了一个变量。函数就像一个存储在变量 sayHi 中的值。

我们可以复制函数到其他变量:

function sayHi() {   // (1) 创建
  alert( "Hello" );
}

var func = sayHi;    // (2) 将sayHi这个函数赋值给变量func

func(); // Hello
sayHi(); // Hello

3. 参数

我们可以使用参数(也称“函数参数”)来将任意数据传递给函数。

// 函数有两个参数:`from` 和 `text`
function showMessage(from, text) { // 参数:from 和 text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

// 当函数在 `(*)` 和 `(**)` 行中被调用时,给定值被复制到了局部变量 `from` 和 `text`。然后函数使用它们进行计算。

函数的参数包括形参和实参。来看下面的图就懂了:

形参:

  • 可以在函数的()中来指定一个或多个形参。

  • 多个形参之间使用,隔开,声明形参就相当于在函数内部隐式声明了对应的变量,但是并不赋值。

实参

  • 在调用函数时,可以在 ()中指定实参。

  • 实参将会赋值给函数中对应的形参。

举例:

sum(3, 4);
sum("3", 4);
sum("Hello", "World");

//函数:求和
function sum(a, b) {
    console.log(a + b);
}

控制台输出结果:

    7
    34
    helloworld

实参的数量:

  • 如果实参的数量多于形参的数量,多余实参不会被赋值

  • 如果实参的数量少于形参的数量,则没有对应实参的形参将是 undefined。例如:

4. 返回值

函数可以由开发人员指定一个值作为函数调用的结果,我们叫做函数的返回值。

返回值相当于就是函数调用完,开发人员暴露给外界的一个数据,供外界去使用。

最简单的例子是将两个值相加的函数:

function sum(a, b) {
  return a + b;
}

let result = sum(1, 2); // 使用result变量 接收sum函数暴露出来的的返回值
alert( result ); // 3
  1. 指令 return 可以在函数的任意位置。当执行到这时,函数停止,并将值返回给调用代码(分配给上述代码中的 result)。

  2. 只使用 return 但没有返回值也是可行的。但这会导致函数立即退出。

例如:

function showMovie(age) {
  if ( age < 18 ) {
    return;
  }

  alert( "Showing you the movie" ); // (*)
  // ...
}
// 在上述代码中,如果 `age<18` 返回 `true`,那么 `showMovie` 将不会运行到 `alert`。
  1. 空值的 return 或没有 return 的函数, 返回值默认为 undefined
function doNothing() {
  return;
}

alert( doNothing() === undefined ); // true
  1. 一个函数无法同时指定两个返回值,因为写了一个return,就会停止函数。

5. 函数作为参数和返回值

5.1 函数作为参数

因为函数也是一种类型,可以把函数作为一个函数的参数,在一个函数中调用。


    function func1(theFunc,c,d){
        var r1 = c;
        var r2 = d;
        theFunc(r1,r2);          
     }
     function func2(a,b){
            alert(a+"----"+b);
     }
      func1(func2,"不凡","前端"); 

5.2 函数做为返回值

因为函数是一种类型,所以可以把函数作为返回值从函数内部返回。

function fn(b) {
  var a = 10;
  return function () {
    alert(a+b);
  }
}
fn(15)();

6. 函数命名

函数就是行为(action)。所以它们的名字通常是动词。它应该简短且尽可能准确地描述函数的作用。这样读代码的人就能清楚地知道这个函数的功能。

一种普遍的做法是用动词前缀来开始一个函数,这个前缀模糊地描述了这个行为。团队内部必须就前缀的含义达成一致。

例如,以 "show" 开头的函数通常会显示某些内容。

函数以 XX 开始……

  • "get…" —— 返回一个值,
  • "calc…" —— 计算某些内容,
  • "create…" —— 创建某些内容,
  • "check…" —— 检查某些内容并返回 boolean 值,等。

这类名字的示例:

showMessage(..)     // 显示信息
getAge(..)          // 返回 age(gets it somehow)
calcSum(..)         // 计算求和并返回结果
createForm(..)      // 创建表格(通常会返回它)
checkPermission(..) // 检查权限并返回 true/false

有了前缀,只需瞥一眼函数名,就可以了解它的功能是什么,返回什么样的值。

6. 函数练习

6.1 函数 min(a, b)

写一个返回数字 ab 中较小的那个数字的函数 min(a,b)

例如:

min(2, 5) == 2
min(3, -1) == -1
min(1, 1) == 1

6.2 函数 pow(x,n)

写一个函数 pow(x,n),返回 xn 次方。换句话说,将 x 与自身相乘 n 次,返回最终结果。

pow(3, 2) = 3 * 3 = 9
pow(3, 3) = 3 * 3 * 3 = 27
pow(1, 100) = 1 * 1 * ...*1 = 1

6.3 函数 isZhi(n)

写一个函数 isZhi(n),返回true或者false

isZhi(7); // true
isZhi(true); // false
文档更新时间: 2023-07-18 14:12   作者:孙老师