
JavaScript 函数的使用
- 函数的定义: 函数就是用来执行任务的代码块,函数需要通过调用的方式来完成代码的执行。函数的最大好处:包含在函数内容的代码块,可以重复执行
- 函数的作用: 将完成任务的代码块"封装”起来,供其他调用方 无限制 的使用。
- 函数的分类:
- 如果按照参数的个数来分:无参函数、有参函数
- 如果按照返回值来分:有返回值函数、无返回值函数
- 如果按照编写函数的对象来分:预定义函数(系统函数)和自定义函数
- 函数的优点:
- 代码灵活度高,通过传递不同的参数,可以取得不同的效果。
- 代码的复用性强,函数一旦定义,任何地方都可以调用,而不需要再次编写。
- JS 中的函数可以响应网页的事件,JS 中的事件驱动模型就是通过网页事件结合 JS 函数来做到的。
- 在 JS 中,定义函数有三种方式:函数声明(函数定义),函数表达式,箭头函数(此篇不作介绍)
- 函数的命名: 允许字母、数字、$、下划线
- 函数声明:
function Test([可选参数1],[可选参数2], ...){ // 函数体代码 }
function 是一个关键字 Test 叫函数名 ()是函数的特殊标志 { }叫函数体
在()中,可以给这个功能块一些数据,那么在{}中这个功能块可以给你返回一些数据示例: 定义一个函数,用来计算两个数的和
function add(x,y){ // x,y 为形式参数 // 你可以把形参当作在函数体中的局部变量 var sub = x+y; return sub; } add(1,2); // 1,2为实际参数 var m = add(1,2); console.log(m)
- 在函数调用时,可以给这个功能块传递真实的数据,调用时,传递的数据,叫实际参数,简称为实参
- 函数调用的过程就是实参向形参赋值的过程,就是把实参 copy 一份给形参
- return 表示函数的返回值 返回值是返回到函数的调用处(如果函数没有使用 return 返回内容,但是你依旧想得到函数的返回值,那么你得到的值,只能是 undefined)
- 使用 function 声明的函数,也是会提升的(和 变量 类似,具体查看我写的 《JavaScript 变量的使用》)
示例:
Test(); function Test(){ console.log("函数的提升..."); }
上面代码 相当于 如下代码
function Test(){ console.log("函数的提升..."); } Test();
定义一个函数,打印九九乘法表
function Table(){ let str = ""; // 计算出这个九九乘法表 // 外面的 for 循环表示多少行 for(let i = 1; i<=9; i++){ // 里面的 for 循环表示一行有多少个 for(let j=1; j<=i; j++){ str += j+"*"+i+"="+i*j+" "; // 拼凑 } str += "\n"; } console.log(str) } Table(); Table(); Table();
把这个函数封装起来,等到使用的时候,只需调用就可以 Table() 这个方法就是调用九九乘法表,并且可以无限制的调用,上面的例子调用了三次,所以输出了三个 九九乘法表
- 函数表达式 (在 js 中函数也是值,我们可以把一个函数赋给一个变量)
示例:
var Test = function(){ console.log("函数表达式..."); } Test();
注: 函数表达式之前调用函数,可以吗?答:不可以
原因:var Test; 会提升 本质是变量 它提升到最前面时 var Test; 然后 Test()
- 函数返回值
在 JS 中,如果一个函数没有指定返回值,那么这个函数返回 undefined
function f(){ return undefined; // 这行可写可不写 } console.log(f());
函数可以返回多个值吗?
示例:声明一个函数,这个函数的功能是求两个数的最大值,最小值,平均值
function f(m,n){ var max = m>n ? m:n; var min = m<n ? m:n; var avg = (m+n)/2; return max,avg,min; } console.log(f(1,9)); // 输出结果:1
return 语句只能返回一个值,不能返回多值,(如果返回多个值,则默认返回最后一个值)
函数内可以有多个 return 吗?
function f(m,n){ var max = m>n ? m:n; return max; var min = m<n ? m:n; return min; var avg = (m+n)/2; return avg; } console.log(f(1,9)); // 输出结果:9
在一个函数中如果遇到了 return 语句,那么 return 语句后面的代码都不会执行
如何解决上面的问题?
function f(m,n){ var max = m>n ? m:n; var min = m<n ? m:n; var avg = (m+n)/2; return [max,min,avg]; } console.log(f(1,9)); // 输出结果:9,1,5
因为 return 只能返回一个值,如果你要返回多个值,那么就把多个值放到一个容器中(数组,对象)
- 回调函数
在函数式编程中,你可以把一个函数当作另一个函数的参数
如果一个函数当作了另一个函数的参数,那么我们就称这个函数为**回调函数
示例:
// 计算两个数的和 function add(x,y){ return x+y; } // 计算两个数的差 function sub(x,y){ return x-y; } function Test(f,a,b){ return f(a,b); } console.log(Test(add,1,2)); 输出结果:3 console.log(Test(sub,1,2)); 输出结果:-1
你要封装一个函数,这个函数的功能是计算两个数的和或差
Test 这个函数有三个参数:
第一个参数是一个回调函数
第二个和第三个参数是形参
函数表达式
var add = function(x,y){ return x+y; } var sub = function(x,y){ return x-y; } function Test(f,a,b){ return f(a,b); } console.log(Test(add,1,2)); 输出结果:3 console.log(Test(sub,1,2)); 输出结果:-1
以后用这种方式多一点
function Test(f,a,b){ return f(a,b); } var m = Test(function(x,y){ return x+y; },1,2) console.log(m); 输出结果:3
如需了解更多,还需深入学习哦!
本站未注明转载的文章均为原创,并采用 CC BY-NC-ND 4.0 授权协议,转载请注明来源,谢谢!