JavaScript函数

Posted 橘猫吃不胖~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript函数相关的知识,希望对你有一定的参考价值。

1 函数概述

在编写代码时,可能会出现非常多的相同代码,或者功能类似的代码,这些代码可能需要大量重复使用,此时就可以使用JavaScript中的函数。

函数是一个独立的功能模块,可以重复使用,维护方便。

2 函数的使用

函数在使用时分为两步,声明函数和调用函数

2.1 声明函数

声明函数就是定义函数

语法为:

function 函数名([参数])
    //函数体语句;

注意:
1、“function”:是关键字,必须小写
2、“函数名”:用户标识符,建议采用驼峰命名(第一个单词是动词,后面的单词首字母大写),要做到“见名知义”
3、“参数”:函数可以有参数也可以没有参数,“()”不能省略
4、“”:表示函数的作用范围
5、函数定义后并不会执行,只有当函数调用后才会执行

2.2 函数的调用

1、直接调用

语法为:

函数名(参数);

2、触发事件调用

事件名 = 函数名(参数)

3 函数的参数

函数的参数:即参入运算的数据

函数的参数分为形参和实参:
形参(形式参数):在声明函数时,在函数名称后面的小括号中添加的一些参数,在函数定义时出现在函数首部的参数,只是占位符,没有实际的数据
实参(实在参数):当函数调用的时候,需要传递相应的参数,这些参数称为实参,在函数调用时出现在函数首部的参数,是有确定值的变量或常量

示例:

function 函数名(形参1,形参2,...)//函数声明的小括号中的是形参
    //函数体代码

函数名(实参1,实参2...);//函数调用的小括号中的是实参

参数之间的数据传递:实参将数据传递给形参(按值传递),传递的方向是单向的(实参–>形参),数据传递时实参和形参按从左到右一一对应匹配,与名称无关

4 函数参数的数量

函数的参数允许形参和实参的个数不同:
1、当实参数量多于形参数量时,函数正常执行,多余的实参会被忽略
2、当实参数量小于形参数量时,多出来的形参类似于一个已声明未赋值的变量,其值为undefined

示例:

function getSum(num1, num2) //定义一个函数,获取两个参数值
    console.log(num1, num2);//输出获取的参数值

getSum(1, 2, 3);//调用函数,实参数量大于形参数量
getSum(1);//调用函数,实参数量小于形参数量

结果为:
1 2
1 undefined

5 函数的返回值

函数的返回值可以将函数的处理结果返回,用于根据函数的执行结果来决定下一步要做的事情,函数的返回值通过return语句实现。函数可以有返回值,也可以没有返回值。

语法为:

function 函数名() 
    return 要返回的值;// 利用return返回一个值给调用者

1、有返回值的函数:函数体中通过return语法返回一个值,这个决定程序下一步操作
2、无返回值的函数:函数只实现某种功能,不需要返回值(函数体中没有return语句)

6 arguments的使用

当不确定函数中接收到了多少个实参的时候,可以用arguments来获取实参。这是因为arguments是当前函数的一个内置对象,所有函数都内置了一个arguments对象,该对象保存了函数调用时传递的所有的实参。

示例:

function jm() 
    console.log(arguments); //输出所有的实参
    console.log(arguments.length); //输出实参的个数
    console.log(arguments[1]); //输出第二个实参

jm(2021, "橘猫", "吃不胖")

结果为:
[Arguments] ‘0’: 2021, ‘1’: ‘橘猫’, ‘2’: ‘吃不胖’
3
橘猫

以上是关于JavaScript函数的主要内容,如果未能解决你的问题,请参考以下文章

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

jQ选择器学习片段(JavaScript 部分对应)

几个关于js数组方法reduce的经典片段

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象