JavaScript 基础第四天-函数
1. 掌握函数的基本使用,让代码具备复用能力
2. 理解封装的意义,能够具备封装函数的能力
函数
• 为什么需要函数
可以把公共的代码封装起来,谁用直接调用
1. 99乘法表,页面需要打印多个怎么办?
2. 体验函数的魅力
代码复用
1.1 为什么需要函数
目标: 能说出为什么需要函数
函数:
function,是被设计为执行特定任务的代码块
说明:
函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。
比如我们前面使用的 alert() 、 prompt() 和 console.log() 都是一些 js 函数,只不过已经封装好了,我们直接使用的。
写一次播放按钮,然后利用函数进行调用
小结
1. 为什么需要函数?
可以实现代码复用,提高开发效率
2. 函数是什么?
function执行特定任务的代码块
函数使用
目标:掌握函数语法,把代码封装起来
函数的声明语法
function 函数名() {
函数体
}
例如
function sayHai () {
document.write(`hai~~~`)
}
函数名命名规范
和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词
命名建议:常用动词约定
函数的调用语法
//函数调用,这些函数体内的代码逻辑会被执行
函数名()
注意:声明(定义)的函数必须调用才会真正被执行,使用 () 调用函数
我们曾经使用的 alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用
函数体
函数体是函数的构成部分,它负责将相同或相似代码“包裹”起来,直到函数调用时函数体内的代码才会被执行。函数
的功能代码都要写在函数体当中。
小结:
1. 函数是用那个关键字声明的?
function
2. 函数不调用会执行吗?如何调用函数?
函数不调用自己不执行
调用方式: 函数名()
3. 函数的复用代码和循环重复代码有什么不同?
循环代码写完即执行,不能很方便控制执行位置
随时调用,随时执行,可重复调用
函数传参
思考:这样的函数只能求 10 + 20, 这个函数功能局限非常大
解决办法:把要计算的数字传到函数内
结论:
若函数完成功能需要调用者传入数据,那么就需要用有参数的函数
这样可以极大提高函数的灵活性
1.3 函数传参
声明语法
调用语法
调用函数时,需要传入几个数据就写几个,用逗号隔开
function getSum100(start, end) {
//形参,形参
let sum = 0
for (let i = start; i <= end; i++) {
sum += i
}
document.write(`${sum} <br>`)
}
getSum100(1, 50) //实参(小括号里面的数)-实际的参数
getSum100(1, 50) //实参-实际的参数
形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)
实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数)
形参可以理解为是在这个函数内声明的变量(比如 num1 = 10)实参可以理解为是给这个变量赋值
开发中尽量保持形参和实参个数一致
我们曾经使用过的 alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参
总结
1. 函数传递参数的好处是?
可以极大的提高了函数的灵活性
2. 函数参数可以分为那两类?怎么判断他们是那种参数?
函数可以分为形参和实参
函数声明时,小括号里面的是形参,形式上的参数
函数调用时,小括号里面的是实参,实际的参数
尽量保持形参和实参的个数一致
3. 参数中间用什么符号隔开?
逗号,
1.3 函数传参-参数默认值
形参: 可以看做变量,但是如果一个变量不给值,默认是什么?
undefined
但是如果做用户不输入实参,刚才的案例,则出现 undefined + undefined 结果是什么?
NaN
我们可以改进下,用户不输入实参,可以给 形参默认值,可以默认为 0, 这样程序更严谨,可以如下操作:
function getSum(x = 0,y = 0) {
//给形参添加默认值,如果调用函数时没有值的话则使用默认值
document.write(x + y)
}
getSum() //实参不给值的话,形参有赋值,结果为0,而不是NaN
getSum(1,2) //结果是3
说明:这个默认值只会在缺少实参参数传递时 才会被执行,所以有参数会优先执行传递过来的实参, 否则默认为 undefined。
函数返回值
提问:什么是函数?
函数是被设计为执行特定任务的代码块
缺点:把计算后的结果处理方式写死了,内部处理了
解决:把处理结果返回给调用者
有返回值函数的概念:
当调用某个函数,这个函数会返回一个结果出来
这就是有返回值的函数
其实我们前面已经接触了很多的函数具备返回值:
只是这些函数是JS底层内置的.我们直接就可以使用
当然有些函数,则没有返回值
所以要根据需求,来设定需不需要返回值
1. 函数很多情况下需要返回值如购物车的总金额
当函数需要返回数据出去时,用return关键字
语法
return 数据
return 20
使用方法
function getSum (x,y) {
return x + y
}
let num = getSum(1,2)
doument.write(num) // 3
细节:
在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
return 后面代码不会再被执行,会立即结束当前函数,所以 return 后面的数据不要换行写
return函数可以没有 return,这种情况函数默认返回值为 undefined
1. 为什么要让函数有返回值
函数执行后得到结果,结果是调用者想要拿到的(一句话,函数内部不需要输出结果,而是返回结果)
对执行结果的扩展性更高,可以让其他的程序使用这个结果
2. 函数有返回值用那个关键字? 有什么注意事项呢?
语法:return 数据
return后面不接数据或者函数内不写return,函数的返回值是undefined
return能立即结束当前函数, 所以 return 后面的数据不要换行写
函数:实参多余形参,多余的实参不参与,
实参小于形参,剩余的形参不参与运算
break和return有什么不同,break结束的是循环(swich)return结束的是循环
函数表达式(匿名函数)和具名函数的不同,
1,具名函数可以写到任意位置
2,函数表达式,必须先声明后调用
立即执行函数
写法:1.
防止变量污染
2. 立即执行函数需要调用吗? 有什么注意事项呢?
无需调用,立即执行,其实本质已经调用了
多个立即执行函数之间用分号隔开
逻辑运算符里的短路
运算结果:无论 && 还是 || ,运算结果都是最后被执行的表达式值,一般用在变量赋值
2. 转换为Boolean型
记忆: ‘’、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true
版权声明:
作者:zhuim521
链接:https://zhuimwl.com/85.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论