【72】JS(6)——函数①基础

★文章内容学习来源:拉勾教育大前端就业集训营


本篇学习目标:
1.掌握函数的概念;
2.掌握函数定义的基础语法;
3.理解函数参数的设置及优点;
4.会灵活运用返回值。


目录

  • 一、概念
    • 1. 为什么要有函数
    • 2. 概念及作用
  • 二、声明/定义
    • 1. 声明/定义函数的语法
    • 2. 特点
    • 3. 注意
  • 三、调用
    • 1. 含义及语法
    • 2. 特点
    • 3. 举例
  • 四、参数
    • 1. 为什么有参数
    • 2. 含义及注意事项
    • 3. 参数类型
    • 4. 传参
    • 5. 优点
  • 五、返回值
    • 1. 含义
    • 2. return关键字作用
    • 3. 注意
    • 4. 应用


一、概念

1. 为什么要有函数

  • 如果要在多个地方求某个数的约数个数,应该怎么做?

比如6的约数个数:有3个(1,2,3),如果要在多个地方用“3个”这个结果,难道我们要每次都写一遍求约数并且算出约数个数的代码吗?


2. 概念及作用

  • 函数(function),也叫作功能方法
  • 函数可以将一段代码一起封装起来,被封装起来的函数具备某一项特殊的功能,内部封装的一段代码作为一个完整的结构体,要执行就都执行,要不执行就都不执行。
  • 函数的作用就是封装一段代码,将来可以重复使用

比如之前常用的alert();prompt();,都是函数,我们不知道其中具体实现其功能的代码是什么,我们只需知道用了相应的语句会实现对应的功能。



二、声明/定义

1. 声明/定义函数的语法

(本篇幅仅讲解基础的定义函数方法,下篇会讲解函数表达式的定义方法);

  • 函数声明又叫函数定义;
  • 函数声明语法:
function 函数名(参数){
     
	封装的结构体;
}

2. 特点

  • 函数声明的时候,函数体并不会执行;
  • 只有当函数被调用的时候才会执行。

3. 注意

  • 函数名的命名规则与变量的命名规则一致:

可以使用字母、数字、下划线、$;
区分大小写;
不能以数字开头;
不可以使用关键字、保留字。

  • 函数必须先定义然后才能使用
  • 如果没有定义函数直接使用,会出现一个引用错误。


三、调用

1. 含义及语法

  • 函数调用也叫作函数执行,调用时会将函数内部封装的所有的结构体的代码立即执行。
   函数名();

2. 特点

  • 函数内部语句执行的位置,与函数调用位置有关,与函数定义的位置无关。
  • 函数可以一次定义,多次执行

3. 举例

     //定义一个函数fun1,实现控制台依次输出12345的功能
    function fun1 () {
     
        console.log(1);
        console.log(2);
        console.log(3);
        console.log(4);
        console.log(5);
    }
    //函数调用
    fun1 ();
    console.log("上面定义了一个函数,并且调用了它,下面再次调用");
    //一次定义,多次调用
    fun1 ();

【72】JS(6)——函数①基础_第1张图片



四、参数

1. 为什么有参数

  • 我们希望函数执行结果不是一成不变的,可以根据自定义的内容发生一些变化。
  • 函数预留了一个接口,专门用于让用户自定义内容,使函数发生一些执行效果变化。
//定义一个函数sum,实现两数相加功能
//其中a,b就是两个参数/接口
function sum (a,b) {
     
    console.log(a + b);
}
//函数调用
sum (5,7); //12

2. 含义及注意事项

  • 接口:就是函数的参数;
  • 函数参数的本质就是变量,可以接收任意类型的数据,导致函数执行结果根据参数不同,结果也不同。
  • 一个函数可以设置 0 个或者多个参数,参数之间用逗号分隔。

3. 参数类型

  • 函数的参数根据书写位置不同,名称也不同:
  • 形式参数定义的 () 内部的参数,叫做形式参数,本质是变量,可以接收实际参数传递过来的数据。简称形参。
  • 实际参数调用的 () 内部的参数,叫做实际参数,本质就是传递的各种类型的数据,传递给每个形参,简称实参。

4. 传参

  • 函数执行过程,伴随着传参的过程
    【72】JS(6)——函数①基础_第2张图片

5. 优点

  • 不论使用自己封装的函数,还是其他人封装的函数,只需要知道传递什么参数,执行什么功能,没必要知道内部的结构什么

一般自己封装的函数或者其他人封装的函数需要有一个 API 接口说明,告诉用户参数需要传递什么类型的数据,实现什么功能。



五、返回值

1. 含义

  • 函数能够通过参数接收数据,也能够将函数执行结果返回一个值
  • 利用函数内部的一个 return 的关键字设置函数的返回值。

2. return关键字作用

①函数内部如果结构体执行到一个 return 的关键字,会立即停止后面代码的执行

     //函数定义
     function fun1 () {
     
        console.log(1);
        console.log(2);
        console.log(3);
        return;  //会立即停止后面代码的执行
        console.log(4);
        console.log(5);
    }
    //函数调用
    fun1 ();
    console.log("上面定义了一个函数,并且调用了它,下面再次调用");
    //一次定义,多次调用
    fun1 ();

【72】JS(6)——函数①基础_第3张图片

②可以在 return 关键字后面添加空格,空格后面任意定义一个数据字面量或者表达式,函数在执行完自身功能之后,整体会被 return 矮化成一个表达式,表达式必须求出一个值继续可以参与程序,表达式的值就是 return 后面的数据。

//return作用②矮化成表达式
//定义一个函数sum,实现两数相加功能
function sum (a,b) {
     
    return a + b;
}
//函数调用
console.log(sum (5,7));  //12

3. 注意

  • 如果函数没有设置 return 语句 ,那么函数有默认的返回值 undefined
  • 如果函数使用 return 语句,但是 return 后面没有任何值,那么函数的返回值也是 undefined。

4. 应用

  • 函数如果有返回值,执行结果可以当成普通数据参与程序。
  • 函数如果有返回值,可以作为一个普通数据赋值给一个变量甚至赋值给其他函数的实际参数
//函数返回值的应用
function sum(a,b) {
     
    return a+b;
}
//将返回值赋值给变量
var n = sum(3,4);
console.log(n); //7
//将返回值赋值给函数实参
console.log(sum(2,sum(3,4))); //9


下篇继续:【73】JS(6)——函数②进阶

你可能感兴趣的:(前端学习中,函数,javascript,js)