一起自学前端开发!

JavaScript基本语法:函数function---JavaScript入门笔记

来源:原创    更新时间:2017-07-27 20:45:12    编辑:前端网编辑    浏览:1726

函数的定义

 

1. 怎么定义一个函数?

语法:

function 函数名(参数)

{

执行代码

}

说明:

1). function是定义函数的关键字,必不可少。

2). 函数名是函数的名字。自定义的。函数命名遵循命名规则,具体见下一小节。

3). 在调用函数时,您可以向其传递值,这些值被称为参数,参数是可以为空的。

4). 在函数定义处的参数我们称为形参,在我们调用函数时传递给函数的实际参数我们称为实参。形参与实参必须以一致的顺序出现。第一个变量值就是第一个被传递的参数的给定的值,以此类推

执行代码是在调用该函数的时候,所做的操作,也称为函数体。

相信有了刚刚的说明,同学们已经大概知道怎么定义一个函数了吧?下面我们来看例子吧。

例子1:

<!DOCTYPE html>

<html lang="en">

<head>

    < charset="UTF-8">

</head>

<body>

<button ="add(1,4)">Try B</button>

</body>

< >

    function add(a,b) {

        alert(a+b);

    }

</ >

</html>

结果为:

图片12.png 

总结:按语法定义函数,直接通过函数名调用对应函数。

 

2. 函数名

函数名就是函数的名字。

例子2:定义一个函数名为function_name的函数,没有参数。

function function_name()

    {

        alert("Hello World!");

    }

    

 

函数命名规则

1). 区分大小写。

2). 允许包含字母、数字、下划线、美元符号($),但是第一个字符不能是数字。

3). 不允许使用其他字符以及关键字和保留字命名。

 

3. 参数(形参)

函数参数就是在调用函数时,你向其传递的值,参数是可以为空的。

例子3:定义一个函数,参数为a,b

<!DOCTYPE html>

<html lang="en">

<head>

    < charset="UTF-8">

    < > </ >

</head>

<body>

    <button ="alert(add(1,4))">Try B</button>

</body>

< >

    function add(a,b) {

        return a+b;

    }

</ >

</html>

说明

1). 在函数定义处的参数我们称为形参,在我们调用函数时传递给函数的实际参数我们称为实参x形参与实参必须以一致的顺序出现。第一个变量值就是第一个被传递的参数的给定的值,以此类推

执行代码是在调用该函数的时候。

2). 参数既可以是变量也可以是常量。常量就是值不会变的量。但是参数为常量就不能发挥函数的灵活性,没有太大的实际意义。

 

 

函数的调用

 

函数的调用就是在我们定义一个函数之后,我们应该如何使用这个函数。

语法:

函数名(实参)

例子1:调用函数名为myfunction的函数,实际参数为name,sex.

myfunction(name,sex);

例子2:不同的参数实现同样的效果。

<!DOCTYPE html>

<html lang="en">

<head>

    < charset="UTF-8">

</head>

<body>

    <button =" myFunction('小明','男')">实参</button>

    <button ="myFunction(Name,Sex)">已赋值变量</button>

    <button ="myFunction(NAME,SEX)">已赋值常量</button>

</body>

< >

    var Name = "小明";

    var Sex ="男";

    const NAME ="小明";

    const SEX = "男";

    function myFunction(name,sex){

        alert("name is "+name+" , "+"sex is "+sex);

    }

</ >

</html>

说明:

1). 在我们定义函数时函数的参数称为形参,在我们调用函数时传递给函数的实际参数我们称为实参,值是唯一确定的,不可更改的量叫常量

2). 在函数调用时,形参与实参必须一一对应。

3). 实参可以是已经赋值的变量,也可以是赋值一个常量,就像上面的例子。

 

 

函数的返回值

当我们希望函数返回一个值到调用它的地方的时候,我们怎么办呢?

我们可以通过return来实现哦。

例子1:返回变量name的值。

function myFunction()

{

    var name="小明";

    return name;

}

说明:

1). 例子1返回的值是小明。

在使用 return 语句时,函数不会再执行return后面的语句,什么意思呢?我们看看后面的例子2就知道啦。

例子2:返回变量name的值

function myFunction()

{

    var name="小明";

    return name;

    name="小花";

}

说明:

1). 例子2返回的值还是小明。

2). 例子1与例子2的返回值是一样的,因为函数不会再执行return之后的语句。

 

函数的拆分

 

函数的拆分:是逻辑意义上的拆分。不是说非要将函数拆成多少个,而是为了方便使用而根据实际情况来做具体处理的。

 

什么情况下会用到函数拆分呢?

比如:

1). 函数体里面的代码很长的时候,可以按照不同的模块或者功能将代码拆分为多个功能较小的函数。

2). 函数里面某一段代码使用的次数特别多,而其他的并不是很多的时候,就可以将他们拆分掉。这样可以提高效率。

例子1:edit函数有添加、删除、保存功能。

function edit(){

        实现删除功能的代码

        实现保存功能的代码

        实现添加功能的代码

    }

说明:

1). 由于我们现在正在学习基础知识,我们这里就不写出具体实现代码,而是用文字代表。主要理解函数拆分的意义就好。

2). 函数edit是由3个功能组成的一个大的函数,代码量会很大。所以我们可以直接将他拆分为删除函数,保存函数,添加函数。这样就实现了函数的拆分。

例子2:

    function count(){

        var m=3;

        var n=6;

        var a =4;

        var b=5;

        var result_ab=a+b;

        var result_mn=m+n;

        var result=result_ab+result_mn;

        return result;

    }

说明:

可以看到上例中有很多加法计算,如果我们能将该函数进行拆分,将最常用的加法计算作为一个单独的函数,就会大大提高效率。

代码为:

function add(A,B) {

        return A+B;

    }

    function count(){

        var m=3;

        var n=6;

        var a =4;

        var b=5;

        var result_ab=add(a,b);

        var result_mn=add(m,n);

        var result=add(result_ab,result_mn);

        return result;

    }

说明:

由于举的例子很简单,所以不能明显看出拆分的好处,但是当重复操作变的复杂的时候,代码的缩减量就会大大增加,而且效率也会变高。

 

总结:

1). 函数拆分常用在函数体代码太多,函数中某一代码多次使用的情况下。

2). 函数拆分是视具体情况而定的,根据具体情况、要求不同,拆分的方式也会不同。

评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜