当前位置：首页 > news >正文

前端学习笔记-JS篇-04

news 来源：原创 2024/9/20 21:40:42

函数

为什么需要函数？

函数:function,是被设计为执行特定任务的代码块
说明:函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。比如前面使用的alert()、prompt()和console.log()都是一些 js 函数，只不过已经封装好了，我们直接使用的。

函数使用

先声明后调用

声明语法：

function 函数名(){函数体
}

函数名命名规范

和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词
命名建议:常用动词约定

函数的调用语法：

注意:声明(定义)的函数必须调用才会真正被执行，使用()调用函数

函数一次声明可以多次调用，每一次函数调用函数体里面的代码会重新执行一次

//函数调用，这些函数体内的代码逻辑会被执行
函数名()

函数体
函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。

函数的复用代码和循环重复代码的区别

循环代码写完即执行，不能很方便控制执行位置
随时调用，随时执行，可重复调用

案例

//1.求2个数的和
function getSum(){Let num1 = +prompt('请输入第一个数’)let num2 = +prompt('请输入第二个数’)console.log(num1 + num2)
}
//2.求 1~100 累加和
function getsum(){let sum =0for(let i=1;i<= 100; i++){sum += i}console.log(sum)
}
getSum()

函数传参

思考:这样的函数只能求10+20，这个函数功能局限非常大

解决办法:把要计算的数字传到函数内
结论:若函数完成功能需要调用者传入数据，那么就需要用有参数的函数，这样可以极大提高函数的灵活性。

声明语法：

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

参数列表

传入数据列表
声明这个函数需要传入几个数据
多个数据用逗号隔开

调用语法：

调用函数时，需要传入几个数据就写几个，用逗号隔开

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

形参和实参：

形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)
实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数)
形参可以理解为是在这个函数内声明的变量(比如num1=10)实参可以理解为是给这个变量赋值
开发中尽量保持形参和实参个数一致
alert(打印’)，parseInt(11’)，Number(11’)本质上都是函数调用的传参

参数默认值：

形参:可以看做变量，但是如果一个变量不给值，默认是undefined
但是如果做用户不输入实参，则出现undefined+undefined 结果是NaN
用户不输入实参，可以给 形参默认值，可以默认为0，这样程序更严谨，可以如下操作:

function getSum(x=0,y=0){document.write(x+y)
}
getsum()//结果是0 ，而不是 N
getSum(1，2)// 结果是 3

说明:这个默认值只会在缺少实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参，否则默认为undefined

案例:

函数封装-求学生总分
需求:学生的分数是一个数组,计算每个学生的总分

<body><script>// 1. 封装函数// 给一个参数的默认值function getArrSum(arr = []) {// console.log(arr)let sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}console.log(sum)}getArrSum([1, 2, 3, 4, 5])getArrSum([11, 22, 33])getArrSum()  // 0</script>
</body>

函数返回值

执行完特定任务之后，然后把任务的结果给我们
缺点:把计算后的结果处理方式写死了，内部处理了

解决:把处理结果返回给调用者
有返回值函数的概念:

当调用某个函数，这个函数会返回一个结果出来
这就是有返回值的函数

其实我们前面已经接触了很多的函数具备返回值，只是这些函数是JS底层内置的.我们直接就可以使用，当然有些函数，则没有返回值，要根据需求，来设定需不需要返回值。

函数执行后得到结果，结果是调用者想要拿到的（一句话，函数内部不需要输出结果，而是返回结果）。对执行结果的扩展性更高,可以让其他的程序使用这个结果。

当函数需要返回数据出去时，用return关键字

语法：return 返回值

有返回值的函数

细节：

在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写
return函数可以没有 return，这种情况函数默认返回值为 undefined

案例：

求任意2个数中的最大值，并返回
求任意数组中的最大值并返回这个最大值
求任意数组中的最小值并返回这个最小值

<body><div></div><script>// 1. 求最大值函数// function getMax(x, y) {//   return x > y ? x : y// }// let max = getMax(11, 234)// console.log(max)// //  2. 求任意数组的最大值，并且返回// function getArrValue(arr = []) {//   // (1)先准备一个max变量存放数组的第一个值//   let max = arr[0]//   // (2) 遍历比较//   for (let i = 1; i < arr.length; i++) {//     if (max < arr[i]) {//       max = arr[i]//     }//   }//   // (3) 返回值//   return max// }// // let max = getArrValue([1, 3, 5, 7, 9])// // let num = prompt('请输入')// let max = getArrValue([11, 3, 55, 7, 29])// console.log(max)//  3. 求任意数组的最大值和最小值，并且返回function getArrValue(arr = []) {// (1)先准备一个max变量存放数组的第一个值let max = arr[0]let min = arr[0]  // 最小值// (2) 遍历比较for (let i = 1; i < arr.length; i++) {// 最大值if (max < arr[i]) {max = arr[i]}// 最小值if (min > arr[i]) {min = arr[i]}}// (3) 返回值  返回的是数组return [max, min]// return min}let newArr = getArrValue([11, 3, 55, 7, 29])console.log(`数组的最大值是: ${newArr[0]}`)console.log(`数组的最小值是: ${newArr[1]}`)</script>
</body>

函数细节补充

两个相同的函数后面的会覆盖前面的函数
在Javascript中实参的个数和形参的个数可以不一致
- 如果形参过多会自动填上undefined (了解即可)
- 如果实参过多那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)
函数一旦碰到return就不会在往下执行了函数的结束用return

break的结束和return结束有什么区别?

break结束的是循环【for】或者是witch。
return结束的是函数。

作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

在JavaScript中，根据作用域的不同，变量可以分为：

变量有一个坑，特殊情况：

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

但是有一种情况，函数内部的形参可以看做是局部变量

在不同作用域下，可能存在变量命名冲突的情况，到底该执行谁取决于就近原则

let num = 10
function fn(){let num= 20console.log(num)
}
fn()

变量的访问原则

只要是代码，就至少有一个作用域，写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
访问原则：在能够访问到的情况下先局部，局部没有在找全局【就近原则】

匿名函数

没有名字的函数, 无法直接使用

使用方式

函数表达式，立即执行函数

函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用

语法：

let fn = function(){//函数体
}

调用:其中函数的形参和实参使用跟具名函数一致。【具名函数的调用可以写到任何位置】

fn() // 函数名()

使用场景：后期web API会使用到

立即执行函数

无需调用，立即执行，其实本质已经调用了

场景介绍: 避免全局变量之间的污染

语法：【注意：多个立即执行函数要用 ; 隔开，要不然会报错】

//方式1
(function(){ console.log(11)})();
//方式2
(function(){ console.log(11)}());
//不需要调用，立即执行

转换时间案例

需求:用户输入秒数，可以自动转换为时分秒

分析：

①：用户输入总秒数（注意默认值）

②：计算时分秒（封装函数）里面包含数字补0

③：打印输出

计算公式：计算时分秒

小时： h = parseInt(总秒数 / 60 / 60 % 24)

分钟： m = parseInt(总秒数 / 60 % 60 )

秒数: s = parseInt(总秒数 % 60)

<script>// age = age + 1// 1. 用户输入let second = +prompt('请输入秒数:')// 2.封装函数function getTime(t) {// console.log(t)  // 总的秒数// 3. 转换// 小时：  h = parseInt(总秒数 / 60 / 60 % 24)// 分钟：  m = parseInt(总秒数 / 60 % 60)// 秒数: s = parseInt(总秒数 % 60) let h = parseInt(t / 60 / 60 % 24)let m = parseInt(t / 60 % 60)let s = parseInt(t % 60)h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : s// console.log(h, m, s)return `转换完毕之后是${h}小时${m}分${s}秒`}let str = getTime(second)document.write(str)console.log(h)</script>