重新梳理JScript基础知识之函数篇

1.函数

1.为什么使用函数？

如果想要多打印昨天案例中的九九乘法表该怎么做呢？难道把那么多代码多复制几遍吗？

接下来体验函数的魅力：代码的复用。

2.函数的使用

函数：

function 是可以执行特定任务的代码块。

本质上是把已经写好的代码封装起来再进行调用就可以重复使用这些代码。

这样做有利于精简我们的代码提高效率。

函数的语法：

function

function 函数名() {函数体
}

函数名的命名规范同变量的一样但是开头应该用动词比如：get 得到 set 设置 say 说等

函数调用的语法：

函数名()

注意：当函数声明时只有被调用了，才能执行里面的代码，并且可以重复调用

案例：

封装一个函数，计算两个数的和

function getSum() {let num1 = 10let num2 = 20console.log(num1 + num2)}
getSum()

这样函数有什么缺陷？

可以发现在函数里面打印结果是很有局限性的只能打印10和20的和那么这就需要参数

参数声明语法：

function 函数名(参数列表) {函数体
}

有参数的函数调用语法：

函数名(传递的参数列表)

例如：

  <script>function fn(num1, num2) {document.write(num1 + num2) //30}fn(10, 20)</script>

就是调用函数把10传给num1 把20传递给num2 执行函数体的代码，如果是多个数据中间用逗号隔开。

3.函数传参

形参和实参

像num1，num2 这种在声明函数小括号里面的叫形参，形式上的参数，

像10,20 这种在调用函数小括号里面的叫实参，实际上的参数。

形参可以理解为是在这个函数里面声明的变量，就如 let num1 = 10 所以形参也是局部变量后面会讲到。

实参可以理解为是在给这个形参赋值把值给形参

尽量形参和实参的个数保持一致

逻辑中断在函数中的使用：

    function getSum(num1, num2) {// 利用逻辑中断让代码更完美 如果用户不传递任何数据就是undefined 就默认0num1 = num1 || 0num2 = num2 || 0console.log(num1 + num2);}getSum()// 更好用的方法：// ES6新出的给函数的参数添加了默认值 来解决当用户不传参时让num1 和num2 默认值0// 当有多个形参列表，默认值应放在形参列表的最后面    a 如果是默认值function getSum(num1 = 0, num2 = 0, a) {return num1 + num2}getSum()

undefined 表示未定义的数
undefined + undefined = NaN
Number(null) //null转换成数字类型为0
null 表示空的所以是0
null + null = 0

案例：

需求：学生的分数是一个数组,计算每个学生的总分

  <script>// 声明一个数组function getSum(arr) {// 声明一个变量 和 的变量let sum = 0// 遍历数组for (let i = 0; i < arr.length; i++) {sum += arr[i]}document.write(sum) //217}// 调用函数  随便写一组数组getSum([12, 42, 22, 6, 83, 52])</script>

这几个案例把输出结果都写在函数体里面，就不够灵活哪能写到函数体的外面吗？

4.函数的返回值

当函数执行完并不需要内部输出，而是应该把结果返回给调用者任他怎么使用结果，满足用户

返回值语法：

return 返回值

    function getSum(num1, num2) {return num1 + num2 //30}// 在外面接收 声明一个变量let sum = getSum(10, 20)document.write(sum)

注意一些细节：

return可以将内部执行的结果返回给调用者
函数内部只能使用一次return，并且return后面的代码不再执行，直接退出整个函数，所以return后面不能换行
return也可以省略，当没有return时此时的函数返回值是undefined

案例：

1. 求任意数组中的最大值并返回这个最大值和最小值

2. 求任意2个数中的最大值, 并返回

  <script>案例1function getMaxAndMin(arr) {// 声明一个最大值和最小值把数组的第一个元素赋值给它 让其与此后面的元素相比较let max = arr[0]let min = arr[0]// 遍历数组 因为把一个元素给了最大/小值所以i从1开始for (let i = 1; i < arr.length; i++) {// 第一个元素与第二个元素比较 如果后面的大于这个最大值就把这个值给这个最大值if (max < arr[i]) {max = arr[i]}// 两个判断条件而不是写在一个if语句里面if (min > arr[i]) {min = arr[i]}}// 返回值 返回数组形式就得到最大值和最小值return [max, min]}// 调用函数  随便写一组数组 声明一个变量接收结果打印出来let result = getMaxAndMin([12, 42, 22, 6, 83, 52])document.write(result) //83,6案例2：// 声明函数 和两个形参function getMax(num1, num2) {return num1 > num2 ? num1 : num2}// 调用函数 赋值给一个变量打印结果let result = getMax(12, 8)console.log(result) //12</script>

5.作用域

作用域就是一段代码限制在哪里可以使用的区域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

作用域分为全局作用域、局部作用域、块级作用域

全局作用域就是整个script便签里都可以使用，全局都有效
局部作用域就是在函数里使用，也叫做函数作用域，局部有效
块级作用域就是在{} 里面的像if for 语句里面使用，{}里有效

因为有作用域的存在，那么变量也分为全局变量、局部变量、块级变量

全局变量就是let在外部声明的变量，在全局作用域里都可以访问
局部变量就是在函数内部声明的变量，在函数的内部才能访问
块级变量只能在{}里使用和访问，跨块和跨函数都是不可以的

函数的形参是局部变量因为形参就相当于在函数的内部声明了这个变量。

6.匿名函数

将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式

语法：

let fn function() {//函数体
}
fn()  //函数的调用

到以后面的webAPI时会使用到匿名函数。

综合案例：

需求：用户输入秒数，可以自动转换为时分秒，并能满足不为10的数补0

  <script>// format  //格式化  dataFormat// 1.准备一个变量接收用户输入的秒数let time = +prompt('请输入秒数')// 2.定义一个函数用于将用户输入的时间转换为时分秒function dataFormat(t) {let h = parseInt(t / 60 / 60 % 24)let m = parseInt(t / 60 % 60)let s = parseInt(t % 60)// 调用补零函数体h = padZero(h)m = padZero(m)s = padZero(s)// 4. 返回结果return `计算后的时间是${h}小时${m}分${s}秒`}// 3.补零// 封装补零函数function padZero(n) {return n < 10 ? '0' + n : n}// 注意调用函数里面的实参就是用户输入结果，用time变量接收let res = dataFormat(time)document.write(res)</script>