【融职培训】Web前端学习 第3章 JavaScript基础教程6 函数基础

一、函数的基本概念

函数是一个可执行的语句块,定义的时候不执行,调用的时候执行,使用"函数名()"的形式可以调用函数,

语法如下所示:

1functionfun(){//定义函数,函数名为fun2//函数体3}4fun();//调用函数

我们先来编写第一个最简单的函数,当这个函数执行的时候会在控制台输出"hello function"

示例代码如下:

1function fun(){2console.log("hello function")3}4fun();

在上面的代码中我们定义了一个函数,并调用了一次,这样就会在控制台输出一次“hello function”。我们在编程的过程中,很多代码是需要多次使用的,我们可以把它们写在一个函数中,这样我们每次希望执行这些代码的时候,只需要调用这个函数,而不是复制-粘贴多次代码。

二、参数

下面编写一个函数sum,输出10和20两个数之和

示例代码如下:

1function sum(){2varnum1 = 10;3varnum2 = 20;4varresult = num1 + num2;5    console.log(result);6}7sum();

在上面例子中我们调用sum函数,可以成功在控制台输出计算结果,但是函数内部的代码是固定的,虽然可以多次使用,但是每次使用输出的都是10和20的加和,为了让函数更加灵活,我们希望实现一个函数可以计算任意两个数的加和,那么我们就需要了解函数是如何传递参数的。

下面一个简单的例子演示函数如何传递参数

示例代码如下:

1function fun(str){2console.log("hello" + str);3}4fun("world");

在定义函数的括号中,我们添加了一个参数str,这个参数叫做形参。它在函数内部像一个变量一样。但是在函数调用之前他是没有值的。当调用函数的时候,调用函数的括号中我们也添加了一个参数"world",这个参数叫做实参,他可以是任意数据类型的值。函数被调用后,形参str被赋予了实参"world"的值,然后执行console.log便会在控制台输出"helloworld"

上面的函数有一个形参和一个实参,函数可以传递多个参数,用逗号间隔

示例代码如下:

1function sum(num1,num2){2console.log(num1 + num2);3}4sum(10,20);

当我们调用函数的时候,实参和形参是一一对应的,10对应的是num1,20对应的是num2,函数执行后会在控制台输出10和20的加和。

下面我们来编写一个函数,它有一个正整数参数n,当我们调用函数时,函数会输出包括n在内,1~n所有正整数的加和

示例代码如下:

1function sum(n){2varsum = 0;3for(vari = 0;i<=n;i++){4sum += i;5    }6    console.log(sum);7}8sum(100);9sum(567);

我们通过一个函数规定了一种计算方式,我们使用函数的只要输入一个值,函数就会计算出一个准确的结果。

三、返回值

在上面的例子中,我们输入了一个参数,函数就可以在控制台输出我们希望得到的结果,但是在实际开发中,很多情况我们要的不是在控制台输出得到的结果,而单纯的只是为了获取这个值,那么我们就需要用到函数的返回值。

在函数中,我们可以通过return关键字指定一个返回值,函数有了return,当函数被调用的时候就可以把调用的结果赋值给另一个变量了

示例代码如下:

1function fun1(){ 2 3} 4 5function fun2(){ 6return"hello fun"; 7} 8 9varstr1 = fun1();10varstr2 = fun2();1112console.log(str1);//输出undefined13console.log(str2);//输出"hello fun"

在上面的例子中,函数fun1没有返回值,所有将fun1调用的结果赋值给str1,str1的值为undefined,函数fun2有返回值,返回值是"hello fun",所以当fun2被调用后,将函数运行的结果赋值给str2,str2的值就是"hello fun"

下面我们来编写一个函数,让函数来计算四则运算的结果

1function count(num1,sign,num2){ 2varresult = 0; 3switch(sign){ 4case"+":result = num1 + num2;break; 5case"-":result = num1 - num2;break; 6case"*":result = num1 * num2;break; 7case"/":result = num1 / num2;break; 8default:console.log("请输入真确的操作符") 9    }10return result;11}12console.log(count(10,"*",20));

四、函数表达式

1varfunctionName=function(arg){2//函数体3}

这种形式看起来好像是常规的变量赋值语句,即创建一个函数并将它赋值给变量functionName。这种情况下创建的函数叫做匿名函数。因为function关键字后面没有标识符。

函数表达式与其他表达式一样,在使用之前必须先赋值;如下面代码就会导致错误;

1helloworld();//错误,还未赋值,函数不存在23varhelloworld=function(){4console.log("hello world");5}

有了函数表达式,我们就可以给函数表达式赋值了;如下面代码:

1varhelloworld;//声明 2if(condition){//条件 3helloworld=function(){//赋值 4console.log("hello world");  5  } 6} 7else{ 8helloworld=function(){//赋值 9console.log("你好,世界");10    }11}

五、函数声明提升

1func()2function func () {3}

上例不会报错,正是因为 ‘函数声明提升’,即将函数声明提升(整体)到作用域顶部(注意是函数声明,不包括函数表达式),实际提升后结果同下:

1// 函数声明提升2function func () {3}4func()

六、作用域

在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

局部作用域

变量在函数内声明,变量为局部作用域。

局部变量:只能在函数内部访问。

1// 此处不能调用 carName 变量2function myFunction() {3varcarName = "Volvo";4// 函数内可调用 carName 变量5}

因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。

全局变量

变量在函数外定义,即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

1varcarName = " Volvo";23// 此处可调用 carName 变量4function myFunction() {5// 函数内可调用 carName 变量6}

如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。

以下实例中 carName 在函数内,但是为全局变量。

1// 此处可调用 carName 变量23function myFunction() {4carName = "Volvo";5// 此处可调用 carName 变量6}

七、课后练习

定义一个函数,参数为x,返回值为1至x(包括x)之间所有正整数的加和。

定义一个函数 参数为x, 返回值为1至x(包括x)之间所有奇数的加和。

【融职教育】在工作中学习,在学习中工作

你可能感兴趣的:(【融职培训】Web前端学习 第3章 JavaScript基础教程6 函数基础)