发表于： 2019-11-23 23:02:05
1 1089
今日完成:
函数的意义:
ex:求两个数的和,之后在乘以10,除以2
var x=10+10;
x=x*10;
x=x/2;
这时候,如果改变初始相加的两个数,后面两个步骤不变
var x=11+12;
x=x*10;
x=x/2;
发现,x=x*10;x=x/2;是冗余代码,如果需要更多次计算,就会有更多x=x*10;x=x/2;的冗余代码;
这时候,就需要函数,用函数的目的,把求两个数的和,之后在乘以10,除以2这一过程给封装起来,减少页面冗余代码,需要直接调用,
这时,只需要把两个值给出,函数就会按照指定的逻辑,运行,算出出结果
--------
引申:什么时候需要用到函数?
想要实现某个功能,并且这个功能运行不止一次,可能需要执行多次,每次都重写一遍,就会产生大量冗余代码,
这时就需要用到函数,把这一过程给封装起来
ex:还是上述例子,设置函数
//求两个数的和,求完后乘以10再除以2
//n/m是形参,是变量,用来储存执行函数时传递的实参,
//可以理解为,就算没有实参,但是,函数的一开始运转需也要两个假象值(类似假想敌)参与,才能形成一个完整的计算流程,这个计算过程才能正常的运转,形参不用加引号,中间用逗号(,)隔开,
//n和m就是这个假象值,也可以用其他任意字符串作为假想值,函数名sum同样如此
function sum(n,m){
var x=n+m;
x=x*10;
x=x/2;
console.log(x);//目的为了看是否输出了运算结果,如果代码正确,这个写不写都对代码无影响
}
把这一过程封装
sum;和sum()代表的含义
sum代表当前函数本身
function sum(n,m){
var x=n+m;
x=x*10;
x=x/2;
console.log(x);//目的为了看是否输出了运算结果,如果代码正确,这个写不写都对代码无影响
}
sum;//这样不算执行函数,它代表当前函数,类比洗衣机,它就是洗衣机的名字,代表整个洗衣机本身(代表当前函数本身)
console.log(sum);//控制台显示,测试sum在js中的实际含义(类似实际的输出,显示)
显示:
sum()代表函数执行
function sum(n,m){
var x=n+m;
x=x*10;
x=x/2;
console.log(x);//目的为了看是否输出了运算结果,如果代码正确,这个写不写都对代码无影响
}
sum()//加小括号代表函数执行,代表的是函数执行返回的结果,不加小括号代表函数本身
//函数执行的目的,就是传两个值,值是传给自己的,让函数进行运算
sum(10,20);//10/20、25/27这都是传递给形参变量的值(实参)
sum(25,27);
显示:
总结:
1.仅仅设置
unction sum(n,m){
var x=n+m;
x=x*10;
x=x/2;
console.log(x);//目的为了看是否输出了运算结果,如果代码正确,这个写不写都对代码无影响
}
函数是不会运行的(或者说运行了,没有任何出口也显示不出来)
2.sum()代表运行(或者说提供了出口,把运行的结果,输出出来,小括号中就是添加的实参,没有就是默认值的n和m,显示NaN)
3.思考为什么sum(xx,xx),sum(),没有在外面给它添加console.log(),在控制台却显示了运行结果?
纠正思维误区:
之前一直认为,如sum(10,20),就是把实参10和20,传递给一开始声明的函数function sum(n,m)里,给n和m赋值,然后运算,
然后一想console.log(sum)的显示结果,sum本身就是这个函数,相当于重新又写了这个函数,括号里的参数,它是给自己赋值,自然包括
一开始给函数封装中的console.log(x),不需要再来一次console.log(sum())
sum(xx,xx)中的实参,不是给谁传递参数,而是给自己赋值(传给自己),
----------------------------------------------------------------------------------------------------
形参的细节
function sum(n, m) {
var x = n + m;
x = x * 10;
x = x / 2;
console.log(n, m); //查看不同情况下传入的n和m的值,都是多少
}
sum()
sum(10)
sum(10, 20)
sum(10, 20, 30)
显示:(console.log控制台显示)
总结:
1.创建函数时设置了形参变量,但是如果在执行的时候并没有给传递对应的实参值,那么形参变量的默认值是:undefined(未定义)(实参少于形参的情况)
2.创建函数时设置了形参变量,形参与实参一一对应,多出的实参,无效(实参多于形参的情况)
ps:➕号的作用,一个是字符串的拼接,一个是求和
------------------------------------------------------------
传入不同的n和m的值,运算结果是多少
function sum(n, m) {
var x = n + m;
x = x * 10;
x = x / 2;
console.log(x); //查看不同情况下传入的n和m的值,运算结果都是多少?
}
sum()
sum(10)//n=10,m没有传值,就是undefined
sum(10,undefined)//跟sun(10),是一样的,为了验证效果
sum(10,null)//验证null变成数字为0
sum(10, 20)
sum(10, 20, 30)
显示:(console.log控制台显示)
总结:
1.数值运算,只要其中有一个的值为undefined,(或者说undefined变成数字就是NaN,和NaN运算的结果都是NaN),那么运算结果就是NaN
2.null变为数值就是0
3.null==undefined但是null!===undefined,所以当代码中需要,比如条件语句中,为了严谨性,用"==="
console控制台中显示:
--------------------------------------------------------------------------------------------------------------------------------------------------------
如果没有传递形参值,给与一个默认值,目的:为了不显示NaN
function sum(n, m) {
//形参默认值处理:如果没有形参值,给与一个默认值,为了不显示为NaN
if (n===undefined){ //n可以是nul,为了严谨,用"==="绝对相等
n=0;
}
if(typeof m==="undefined"){//两种写法同样的效果,typeof检测m的类型,返回的结果都是字符串,所以要加引号,意为字符串undefined
m=0;
}
var x = n + m;
x = x * 10;
x = x / 2;
console.log(x); //查看不同情况下传入的n和m的值,运算结果都是多少,这是在函数体内部执行结果
}
sum()
sum(10)//n=10,m没有传值,就是undefined
sum(10, 20)
sum(10, 20, 30)
显示:(console.log控制台显示)
------------------------------------------------------------------------------
return,返回值得用法
function sum(n, m) {
var x = n + m;
console.log(x)
}
sum(10, 20)
如上述代码console.log是在函数体中执行,
显示:(console.log控制台显示)
如果想把这个值拿到外部使用,如sum(10,20)执行完成后再用时,
代码:
function sum(n, m) {
var x = n + m;
}
sum(10, 20)
console.log(x);//报错:Uncaught ReferenceError: result is not defined,本身目的是验证外部是做什么值,具体显示什么
代码:
function sum(n, m) {
var x = n + m;
}
sum(10, 20)
console.log(sum(10,20));
两种句式显示不一样,大意是一样的就是未定义,通俗讲就是找不到括号中目标的值
结论:函数执行的时候,函数体内部创建的变量是无法获取和操作的(这里指的是var x = n + m;),中的x,(闭包)
如果想要获取内部信息,需要基于return返回机制,把信息返回才可以
sum(n, m)通过设置返回值还是可以获取和操作的,(整个函数的值)
代码:
function sum(n, m) {
var x = n + m;
return x;//return一定是值:此处是把x的变量储存的值返回给外面,return 30,返回的是30给外面
}
sum(10, 20)
console.log(sum(10,20)); //sum(10,20),这个函数的整体是30,向控制台传输这个整体,显示30
console.log(x);//无法获取和操作,显示未定义,找不到
显示:(console.log控制台显示)
总结:什么时候用返回值(return)?
一个函数执行完,函数体内部的变量不能直接用,当想用到内部处理后的值拿到外部来用,只能同过return把它拿出来
总结: 什么时候用形参?
创建一个函数,函数执行需要告诉确定的参数才能执行,需要用到形参
整体函数的总结:
1.因为js无法像html和css那样直观的表现出来(正常html页面不显示js的运行),所以需要用到console.log(),括号中,是目标对象,把它传到控制台,
然后通过控制台就可以直观的看到,这个目标对象,具体是以什么形态在js语句中运行的,它对实际js语句的运行无影响,但是对调试js语句,有很大的帮助.
2.(入口,洗衣机,实物)声明一个变量,暂且理解为创造一个洗衣机,变量名后的小括号,就是入口,如果设定了形参,就是限定了几个入口,实参就是需要加进去的衣物,水等(什么样的衣服,多少的水),
根据实际选择来,应用,在有参数的情况下,形参实参对应,之前已有限定了入口的总结
3.(窗口,出口)在函数体内部,就是运算过程的内部,添加代码console.log(代表运算结果的变量名),就相当于,是在原本看不到结果的洗衣机侧面,开了一个透明的窗口,可以直观的看到,
洗衣机中的衣物,是否洗干净了,(函数体是按照所想否运行了,看到结果),没有的话,再进行调试修改等,
所以例子中sum(10,20),会在控制台看到结果30,这是通过窗口看到的结果,
但是在外部设置console.log(sum(10,20))时,控制台显示未定义,而return x返回值,就是函数体的出口,把x的运算结果调到外部,(把洗衣机中的衣物拿出来)这时console.log(sum(10,20))就显示出结果30,
也可以理解为sum(n,m)={x},x是一整个的运算结果,内部设置console,仅仅只能看,然后在{}内调试,不能拿出来,这种情况下,有{}的阻挡,x对于sum(n,m)是未知的,直到return x,把x调到{}外部,
也可以看做是把{}摘掉,sum(n,m)=x,这时候在验证console.log(sum(n,m))相当于...log(x),显示即x的值,之前是log({x}),有{}阻挡,就是undefined,未知未定义
也就是说想要用函数sum()所代表的的值,就一定要返回值返回(return)函数,把值调到外面赋予sum()
4.当参数(一次拿出的衣物过多)过多时,也可以再次声明一个变量
var a=num(n,m, ...),用a代替num(...)来带入下次运用,(相当于拿个盆接住所有的衣物,没实际意义,就是为了方便)
完整的就是,var a=num(n,m,...)=x,间接把x的值带入a,(因为函数体内部的值不能直接调用)
ps;以上全是js语句中运行的结果,影响不到html的页面,要想建立关系,还需要用到其它的代码
-----------------------------------------------------------------------------------------------
return返回值返回值扩展:
接上述例子,if语句不显示NaN的另一种方法(表现形式)
代码:
function sum(n, m) {
//形参默认值处理:如果没有形参值,给与一个默认值,为了不显示为NaN
if (n === undefined) { //n可以是nul,为了严谨,用"==="绝对相等
n = 0;
}
if (typeof m === "undefined") { //两种写法同样的效果,typeof检测m的类型,返回的结果都是字符串,所以要加引号,意为字符串undefined
return;
}
var x = n + m;
x = x * 10;
x = x / 2;
console.log(x)
}
sum()
sum(10)
sum(10, 20)
sum(10, 20, 30)
显示:
总结:return的作用;当m绝对等于undefined时,就会终止整个函数的执行,(既然代码不再运行,自然就不会有什么结果)
所以显示的只有,m不为undefined时代码运行的两个结果
ps:
return定义:语句会终止函数的执行并返回函数的值。
因为是写在html中的代码,从上往下,边编译边呈现,也可以理解为return以后的代码都不会运行,
所以,一定要把需要运行的代码放到retuen返回值的上面,放下面就会失效
-------------------------------------------------------------------------------------------------------------------------
根据任务一,总结
遇到问题:
控制台,没有显示结果值
解决:
代码不能写在return的下面
代码:
function numbox(){
var num = [0, 1, 2, 3, 4, 5, 6, 7, 8]; //声明一个叫做num的数组,数字从0到8,数组必须从0开始,声明数字不需要引号
var newnum = []; //声明一个新的空的数组,用于接收判断语句后的3个随机数
var a = 3; //一个阀值,循环语句循环一次,随机取一个数字,任务要求3个,所以循环三次,名称任意,无含义,就是为了调用
for (var b = 0; b < a; b++) //括号内就是循环机制,一定条件下,{}中的代码运行几次,随意命名无含义,
//起始前b=0,b<a循环条件,b++代码执行后,意思为加一,值传入语句一,b=1再次判定,是否执行{}中的代码,直到b>=a,不再执行
{
var ran = Math.round(Math.random() * (num.length - 1));//这个用四舍五入round()取整,就需要blocks.length - 1,也就是乘以8,
//最大整数为8,取整从0~8中选取
//第二步,保证数组输出的值不重复
newnum.push(num[ran]);//选取随机值对应的num数组中的数值,抓取到newnum空数组中
num.splice(ran, 1);//splice删除数组num的数值,括号中两个两个值,前面是索引值,后面是删除的个数,包含自身,从0开始计算
//ex:随机的是ran随机的是2,索引值也是2,就是从num第三个值(2)开始删除,后面的数值1是删除一个,如果是2,就删除第三(2)和第四(3)个数值
}
return b;//输出的值,返回到newnum数组中,一共3次,数组中就包含三个随机数
return ran;//上面有一个return,所以这个无效了
}
遇到问题:
当一个函数内声明多个变量时,调用这个函数给函数的是哪个值?
解决:
return后面的代码会失效,所以给函数赋值的,返回的第一个值,在上述代码中就是b
扩展:当需要用到函数内部其他变量时怎么办?
解决:
通过返回值是不行的,它只能生效一次,即函数只能有一个值,
需要用到函数内部的其他变量,就把这个变量设置在函数外面,使这个变量成为全局变量,函数内部或者外部需要都可以直接调用
扩展:当函数的返回值是一个多次运转的变量,函数的值会如何显示?
解决:函数的值就变量最后一次运转显示的值
所以根据任务需求
return newnum;//根据任务需求返回随机数组newnum,把newnum的值调到外部,为函数赋值
}
console.log(numbox());//控制台显示的就是随机的三个数字的数组
console.log(numbox()[2]);//把函数numbox()看成一个完整的数组整体,[2]的意思为这个数组中序号为2的随机数字,控制台显示的就是这个数字
console.log(document.getElementsByClassName('box1')[numbox()[0]])//看成两部分,1.局部[numbox()[0]]含义同上,一个随机数字,
//2.整体,九宫格也是一个数组,合起来就是绑定一个随机序号的九宫格
document.getElementsByClassName('box1')[numbox()[1]];
document.getElementsByClassName('box1')[numbox()[2]];
</script>
显示:
遇到问题:同上
收获:
1.碰到不会的,或者不理解的知识,就多看,什么不理解就反复的看,就慢慢了解了
2.学习时代码写注释,越详细越好,碰到错误,看到注释当时的目的或者思路,再请教或者自己思索时,就能很快找到思路,去解决问题
3.解决了一直纠结混淆的地方,从0到1,算是正式入门了
明日计划:
任务一还剩下的问题:
1.改变颜色
1.改变颜色
2.计时器
3.开始闪烁和停止闪烁
按照顺序解决
返回列表
评论