函数
为什么需要函数
- 目标：能说出为什么需要函数
- 函数：
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);
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
