函数
为什么需要函数
- 目标:能说出为什么需要函数
- 函数:
function
,是被设计为执行特定任务的代码块🧐。- 函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,有利于精简代码方便复用😎。
- 比如我们前面使用的
alert()
、prompt()
和console.log()
都是一些js
函数,只不过已经封装好了,我们直接使用。
- 总结:
- 为什么需要函数?
- 可以实现代码复用,提高开发效率。
- 函数是什么?
function
执行特定任务的代码块。
- 为什么需要函数?
函数使用
-
目标:掌握函数语法,把代码封装起来
-
函数的声明语法:
function 函数名() { 函数体 }
例如:
function sayHi() { document.write('hai~~') }
-
函数名命名规范:
- 和变量命名基本一致。
- 尽量小驼峰式命名法。
- 前缀应该为动词🎯。
- 命名建议:常用动词约定
动词 含义 can 判断是否可执行某个动作 has 判断是否含义某个值 is 判断是否为某个值 get 获取某个值 set 设置某个值 load 加载某些数据 -
函数的调用语法:
- 函数一次声明可以多次调用,每一次函数调用函数体里面的代码会重新执行一次。
- 声明(定义)的函数必须调用才会真正被执行,使用
()
调用函数。 - 例如:
sayHi() sayHi()
- 我们曾经使用的
alert()
,parseInt()
这种名字后面跟小括号的本质都是函数的调用。
-
函数体:
- 函数体是函数的构成部分,它负责将相同或相似代码“包裹”起来,直到函数调用时函数体内的代码才会被执行。
- 函数的功能代码都要写在函数体当中。
- 例如:
//打招呼 function sayHi() { console.log("嗨~"); } sayHi() sayHi()
-
总结:
- 函数是用那个关键字声明的?
function
- 函数不调用会执行吗?如何调用函数?
- 函数不调用自己不执行。
- 调用方式:
函数名()
- 函数的复用代码和循环重复代码有什么不同?
- 循环代码写完即执行,不能很方便控制执行位置。
- 随时调用,随时执行,可重复调用。
- 函数是用那个关键字声明的?
函数传参
- 思考:这样的函数只能求
10 + 20
,这个函数功能局限非常大。function getSum() { let num1 = 10 let num2 = 20 console.log(num1 + num2) } getSum()
- 解决办法:把要计算的数字传到函数内。
- 结论:
- 若函数完成功能需要调用者传入数据,那么就需要用有参数的函数。
- 这样可以极大提高函数的灵活性😃。
- 声明语法:
例如:function 函数名(参数列表) { 函数体 }
- 单个参数:
function getSquare(num1) { document.write(num1 * num1) }
- 多个参数:
function getSum(num1, num2) { document.write(num1 + num2) }
- 参数列表:
- 传入数据列表。
- 声明这个函数需要传入几个数据。
- 多个数据用逗号隔开。
- 调用语法:
例如:函数名(传递的参数列表)
getSquare(8) getSum(10, 20)
- 调用函数时,需要传入几个数据就写几个,用逗号隔开。
- 形参和实参:
- 形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)。
- 实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数)。
- 形参可以理解为是在这个函数内声明的变量(比如
num1 = 10
)实参可以理解为是给这个变量赋值。 - 开发中尽量保持形参和实参个数一致。
- 我们曾经使用过的
alert('打印')
,parseInt('11')
,Number('11')
本质上都是函数调用的传参。
- 参数默认值:
- 形参:可以看做变量,如果一个变量不给值,默认是
undefined
。 - 但是如果做用户不输入实参,会出现
undefined + undefined
结果是NaN
。 - 我们可以改进下,用户不输入实参,可以给形参默认值,可以默认为
0
,这样程序更严谨,例如:
function getSum(x = 0, y = 0) { document.write(x + y) } getSum() //结果是0,而不是NaN getSum(1, 2) //结果是3
- 说明:这个默认值只会在缺少实参参数传递时才会被执行,所以有参数会优先执行传递过来的实参,否则默认为
undefined
。
- 形参:可以看做变量,如果一个变量不给值,默认是
- 总结:
- 函数传递参数的好处是?
- 可以极大的提高了函数的灵活性。
- 函数参数可以分为那两类?怎么判断他们是那种参数?
- 函数可以分为形参和实参。
- 函数声明时,小括号里面的是形参,形式上的参数。
- 函数调用时,小括号里面的是实参,实际的参数。
- 尽量保持形参和实参的个数一致。
- 参数中间用什么符号隔开?
- 逗号。
- 函数传递参数的好处是?
函数返回值
- 提问:什么是函数?
- 函数是被设计为执行特定任务的代码块。
- 提问:执行完特定任务之后,然后呢?
- 把任务的结果给我们。
- 缺点:把计算后的结果处理方式写死了,内部处理了。
- 解决:把处理结果返回给调用者。
- 有返回值函数的概念:
- 当调用某个函数,这个函数会返回一个结果出来,这就是有返回值的函数。
- 例如:
function getSum(num1, num2) { document.write(num1 + num2) } getSum(10, 20)
- 其实我们前面已经接触了很多的函数具备返回值:
let result = prompt("请输入你的年龄?") let result2 = parseInt('111')
- 只是这些函数是
JS
底层内置的,我们直接就可以使用。 - 当然有些函数,则没有返回值,例如:
alert('我是弹框,不需要返回值')
- 所以要根据需求,来设定需不需要返回值。
- 只是这些函数是
- 当函数需要返回数据出去时,用
return
关键字:- 语法:
return 数据 return 20
- 怎么使用呢?
function getSum(x, y) { return x + y } let num = getSum(10, 30) document.write(num) document.write(num)
- 有返回值的函数细节:
- 在函数体中使用
return
关键字能将内部的执行结果交给函数外部使用。 return
后面代码不会再被执行,会立即结束当前函数,所以return
后面的数据不要换行写。return
函数可以没有return
,这种情况函数默认返回值为undefined
。
- 在函数体中使用
- 总结:
- 为什么要让函数有返回值
- 函数执行后得到结果,结果是调用者想要拿到的(一句话,函数内部不需要输出结果,而是返回结果)。
- 对执行结果的扩展性更高,可以让其他的程序使用这个结果。
- 函数有返回值用那个关键字? 有什么注意事项呢?
- 语法:
return 数据
。 return
后面不接数据或者函数内不写return
,函数的返回值是undefined
。return
能立即结束当前函数, 所以return
后面的数据不要换行写。
- 语法:
- 为什么要让函数有返回值
作用域
- 通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。
- 作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。
- 在
JavaScript
中,根据作用域的不同,变量可以分为:- 全局变量:函数外部
let
的变量。 - 局部变量:函数内部
let
的变量。 - 全局变量在任何区域都可以访问和修改,局部变量只能在当前函数内部访问和修改。
- 全局变量:函数外部
- 变量有一个坑,特殊情况:
- 如果函数内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐。
- 但是有一种情况,函数内部的形参可以看做是局部变量。
- 变量的访问原则:
- 只要是代码,就至少有一个作用域。
- 写在函数内部的局部作用域。
- 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域。
- 访问原则:在能够访问到的情况下,先局部,局部没有在找全局。
- 案例:
- 案例 1:
function f1() { let num = 123 function f2() { console.log(num) } f2() } let num = 456 f1()
- 案例 2:
function f1() { let num = 123 function f2() { let num = 0 console.log(num) } f2() } let num = 456 f1()
- 案例 3:
let a = 1 function fn1() { let a = 2 let b = '22' fn2() function fn2() { let a = 3 fn3() function fn3() { let a = 4 console.log(a) //a的值? console.log(b) //b的值? } } } fn1()
- 作用域链:采取就近原则的方式来查找变量最终的值。
- 总结:
JS
中作用域分为哪2种?- 全局作用域。函数外部或者整个
script
有效。 - 局部作用域。也称为函数作用域,函数内部有效。
- 全局作用域。函数外部或者整个
- 根据作用域不同,变量分为哪2种?
- 全局变量。
- 局部变量。
- 有一种特殊情况是全局变量是那种?我们提倡吗?
- 局部变量或者块级变量没有
let
声明直接赋值的当全局变量看。 - 我们强烈不提倡。
- 还有一种特殊情况,函数内部的形参可以当做局部变量看。
- 局部变量或者块级变量没有
匿名函数
- 目标:了解匿名函数的使用方式
- 函数可以分为:
- 声明:
function fn() {}
- 具名函数
- 匿名函数:
function() {}
- 声明:
- 调用:
fn()
- 匿名函数:
- 没有名字的函数, 无法直接使用。
- 使用方式:
- 函数表达式。
- 立即执行函数。
- 函数表达式:
- 将匿名函数赋值给一个变量,并且通过变量名称进行调用,我们将这个称为函数表达式。
- 语法:
let fn = function() { //函数体 }
- 调用:
fn() //函数名()
- 其中函数的形参和实参使用跟具名函数一致。
- 使用场景:
- 后期
web API
会使用:目前没有, 先认识。
<body> <button>点击我</button> <script> let btn = document.querySelector('button') btn.addEventListener(function() { }) alert("弹出") </script> </body>
<body> <button>点击我</button> <script> let btn = document.querySelector('button') btn.onclick = function() { alert("我是匿名函数") } </script> </body>
- 后期
- 立即执行函数:
- 场景介绍:避免全局变量之间的污染。
- 语法:
//方式1 (function() { console.log(11) })(); //方式2 (function() { console.log(11) }());
- 不需要调用,立即执行,其实本质已经调用了。
- 多个立即执行函数之间用分号隔开。
- 总结:
- 立即执行函数有什么作用?
- 防止变量污染。
- 立即执行函数需要调用吗? 有什么注意事项呢?
- 无需调用,立即执行,其实本质已经调用了。
- 多个立即执行函数之间用分号隔开。
- 立即执行函数有什么作用?
综合案例
- 转换时间案例:
- 需求:用户输入秒数,可以自动转换为时分秒。
- 分析:
- 用户输入总秒数(注意默认值)。
- 计算时分秒(封装函数),里面包含数字补0。
- 打印输出。
- 计算公式:计算时分秒。
- 小时:
h = parseInt(总秒数 / 60 / 60 % 24)
。 - 分钟:
m = parseInt(总秒数 / 60 % 60 )
。 - 秒数:
s = parseInt(总秒数 % 60)
。
- 小时:
function convertSecondsToTime(totalSeconds) {
let h = parseInt(totalSeconds / 60 / 60 % 24);
let m = parseInt(totalSeconds / 60 % 60);
let s = parseInt(totalSeconds % 60);
// 数字补0
h = h < 10? '0' + h : h;
m = m < 10? '0' + m : m;
s = s < 10? '0' + s : s;
return `${h}:${m}:${s}`;
}
let totalSeconds = prompt("请输入总秒数:");
if (totalSeconds === null || totalSeconds.trim() === '') {
totalSeconds = 0;
} else {
totalSeconds = parseInt(totalSeconds);
}
let time = convertSecondsToTime(totalSeconds);
console.log(time);