Javascript函数
-
概念:
- 在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。此时使用JS 中的函数更加方便。 函数:
- 就是 封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。 函数的封装
- 把 一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
一、函数的使用
- 无参数
-
语法结构
-
//1.声明函数 function 函数名() { //函数体代码 } //2.调用函数 函数名();
执行思路:
- 1.调用函数名
- 2.返回声明函数找到对应的函数名
- 3.执行函数体 注意:
- 1.函数名一般用动词
- 2. 函数不调用自己不执行
- 有参数
-
语法结构
-
function 函数名(形参1, 形参2...) { //函数体代码 } 函数名(实参1, 实参2...);
执行思路:
- 1.调用函数名
- 2.返回声明函数找到对应的函数名
- 3.实参 将参数传递给 形参,并与形参一 一对应
- 4.执行函数体
- 形参与实参个数不同
-
语法结构
-
function getSum(num1, num2) { console.log(num1 + num2); } 1.实参个数 = 形参个数 则正常输出结果 getSum(1, 2);//输出结果:3 2.实参个数 > 形参个数 取形参的个数 getSum(1, 2, 3);//输出结果:3 3.实参个数 < 形参个数 多余的形参定义为undefined 最终的结果就是 NaN (形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值 结果就是undefined ) getSum(1); //输出结果:NaN 4.尽量让实参的个数和形参相匹配
注意:
- 1.函数可以带参数也可以不带参数
- 2. 声明函数时,函数名 括号里面的是形参,形参的默认值是undefined
- 3. 调用函数时,函数名 括号里面的是实参
- 4.形参简单理解为:不用声明的变量
二、函数的返回值
return 语句
- 返回函数
-
语法结构
-
function 函数名() { return ; } console.log(函数名());
执行思路:
-
1.首先执行:
console.log()
输出 - 2.第二步执行:调用函数名
- 3.第三步执行:返回声明函数找到对应的函数名
-
4.第四步执行:函数遇到
return
,把return
后面的结果返回给函数的调用者函数名()
-
5.第五步: 由
console.log()
输出结果
例: -
1. function num() { return 123; } console.log(num());//输出结果:123 2. function cook(str) { return str; } console.log(cook(123));//输出结果:123 3. function cook(str1,str2) { return str1+str2; } console.log(cook(1,2));//输出结果:3
- 终止函数
return 之后的代码不被执行
-
例:
-
function cook(str) { return str; console.log('456')//不被输出 } console.log(cook(123)); //输出结果:123
- 返回值
return 只能返回一个值。
如果用逗号隔开多个值,以最后一个值为准
-
例:
-
function cook(str1,str2) { return str1,str2;//返回str2 } console.log(cook(1,2)); //输出结果:2
- 若想输出 多个值可结合数组 例:
-
function cook(str1,str2) { return [str1,str2]; } console.log(cook(1,2)); //输出结果:(2)[1,2]
- 函数没有return时返回undefined
-
例:
-
function cook() { } console.log(cook());//输出结果:undefined
break ,continue ,return 的区别
- break :结束当前的循环体(如 for、while)
- continue :跳出本次循环,继续执行下次循环(如 for、while)
- return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码
三、arguments 使用
arguments 存储了传递的所有实参
使用条件:不确定有多少个参数传递的时
-
语法结构
-
function xxx() { console.log(arguments); //输出结果:(3)[1,2,3] } xxx(1,2,3);
执行思路:
-
1.执行调用函数名
xxx()
- 2.返回声明函数找到对应的函数名
-
3.执行函数体 (由于 arguments 存储了传递的所有实参 所以可以输出所有实参)
例 -
1. function fn1() { console.log(arguments); //输出结果:Arguments(3) [1, 2, 3, ] console.log(arguments.length); //输出结果:3 console.log(arguments[1]); //输出结果:2 } fn1(1, 2, 3); 2.按照数组的方式遍历arguments//arguments展示形式是一个伪数组,因此可以进行遍历 function fn() { for (var i = 0; i < arguments.length; i++) { console.log(arguments[i]); //输出结果: //1 //2 //3 //4 } } fn(1, 2, 3, 4);
注意:
- 只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments
伪数组
-
特点:
-
1.具有 length 属性(数组的长度)
-
2.按索引方式储存数据
-
3.不具有数组的 push() , pop() 等方法
注意:在函数内部使用该对象,用此对象获取函数调用时传的实参。
四、调用函数
在一组函数中调用另一组函数( 函数可以相互调用)
-
例:
-
function fn1() { console.log(11); fn2(); // 在fn1 函数里面调用了 fn2 函数 } function fn2() { console.log(22); } fn1(); //输出结果 //11 //22 执行思路: 先执行fn1(),输出11,由于fn1内包含fn2,所以在执行fn2(),输出22
五、函数的两种声明方式
- 定义函数方式(命名函数)
利用函数关键字 function 自定义函数方式
-
语法结构
-
//1.声明函数 function 函数名() { //函数体代码 } //2.调用函数 函数名();
- 函数表达式方式(匿名函数)
利用函数表达式方式的写法
-
语法结构
-
var 变量名 = function(){ //函数体代码 }; 变量名();
例:
-
var fu = function(str){ console.log(str);//输出结果:123 }; fu(123);
注意:
- 1.函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值 而 函数表达式里面存的是函数
- 2.函数表达式也可以进行传递参数