1.16 初识函数
2020-08-12 本文已影响0人
NULL_2022
函数:一个处理事情的方法。
函数的目的就是把实现一个功能的代码进行封装,以后再想实现这个功能,只需要执行该方法即可,无需再把代码写一遍。
“低耦合,高内聚”:减少页面中的冗余,提高代码的重复使用率
函数分两部分:定义函数、执行函数(光定义函数是没有用的,只有把函数执行,才能起到对应的作用)
创建函数:把实现某个功能代码封装在一起
function 函数名(形参1,……){
//函数体:实现具体功能的代码
}
执行函数:让函数执行,从而实现具体的功能
函数名(实参1,……)
函数中有一个形参和实参的概念:
形参:生产一个函数,想要实现一些功能,但实现功能需要原材料不确定(也就是形参该形参不确定),需要用户执行它的时候提供,形参(变量)
实参:执行函数的时候,给指定的入口(形参变量)传递的具体值(该具体的值就是实参),也就是提供的原材料。
函数的意义在于封装:把实现某一个功能的代码封装在一起,后期在想实现这个功能,只需执行函数即可,不需要重新编写这些代码了
项目中,发现一个功能要重新运行两次及两次以上,就可以把这个功能封装成为一个函数,以后再实现这个功能,直接调用函数执行即可。
//创建函数 函数名add 形参变量:x,y
function add(x,y){ //此时 x,y就是形参
let sum = x+y;
console.log(sum);
}
// 执行函数 实参:1,2
add(1,2); //此时实参:1,2 分别对应形参x:1 y:2
//若只传1个参数
add(4);// 此时x:1 y:undefined 定义了形参,但是执行的时候没传递实参,则形参为默认值undefined
//若传递的参数,超过了对应的形参
add(1,2,3);//此时,x:1,y:2 第三个实参并没有对应的形参来接收,但多出来的参数会传递给函数
//实参传递的是一个表达式传递给形参
add(11>10?'ok':'no');//需要把三元表达式运算的结果作为实参传递给形参
//实参应该都是值
let age = 20;
add(age);//此时x:20,实参永远都应该是值,此处虽然写了age,但是它会把age变量的值拿到,然后传递给形参x,而不是age本身传递过去
函数中的实参集合arguments
需求:实现任意数求和(不管传递几个实参值进来,都能输出对应的和)
function add(){
console.log(arguments);
/*
arguments是一个类数组(类数组不是数组,和元素集合HTMLCollection类似)
+ 根据索引记录了每一个传递进来的实参信息(和是否定义形参变量没有关系,arguments包含了所有传递进来的实参信息)
+ length属性代表传递实参的个数
*/
let sum = 0;
for(let i = 0 ; i < arguments.length; i++){
//把传递进来的实参信息都转换为数字,排除掉非有效数字或者字符串
let item = Number(arguments[i]);
if( !isNaN(item)){
// isNaN(item);如果item是有效数字 则返回false,所以取反为true
sum += item;
}
}
console.log(sum);
}
add(); //=>0
add(10); //=>10
add(10,20); //=>30
add(10,20,30);//=>60
add(10,20,30,'AA'); //=>60 自动过滤掉非有效数字
add(10,'20'); //=>30 如果是字符串,不能是字符串拼接,还应该是数学相加
ES6中的剩余运算符:实现任意数求和
function add(...args){
let sum = 0;
args.forEach((item,index)=>{
let flag = Number(item);
if(!isNaN(flag)){
sum += flag;
}
});
console.log(sum);
}
add(); //=>0
add(10); //=>10
add(10,20); //=>30
add(10,20,30);//=>60
add(10,20,30,'AA'); //=>60 自动过滤掉非有效数字
add(10,'20'); //=>30 如果是字符串,不能是字符串拼接,还应该是数学相加
函数中的返回值return
把函数中的私有值,需要暴露给外面使用,可以使用return来实现
如果函数中没有写return,默认的返回值是undefined
function add(...args){
let sum = 0;
args.forEach((item,index)=>{
let flag = Number(item);
if(!isNaN(flag)){
sum += flag;
}
});
return sum;
}
add(); //=>0
add(10); //=>10
add(10,20); //=>30
let total = add(10) + add(10,20);
console.log(total); //=> 40
return在函数中,处理返回值以外,还可以终止该函数继续往下执行
function func(x) {
//验证x是否为有效数字,如果不是有效数字,则不再继续执行下面的代码
if (isNaN(x)) {
return; //return在函数中除了返回信息以外,还可以告知函数体下面代码不再执行的作用,也就是终止运行该函数的
}
let result = x % 2;
return result;
}
func('XIAO'); //=> x:'XIAO' isNaN('XIAO');=> true 执行if语句块 return;直接终止运行该函数不再往下执行
func(10); //=> x:10 isNaN(10);=> false 不执行if语句块 往下执行,10%2 = 0 ;return 0 ;