JavaScript-DAY4学习笔记

最新推荐文章于 2024-10-09 11:50:38 发布

他是一棵杨树

最新推荐文章于 2024-10-09 11:50:38 发布

阅读量644

点赞数 26

文章标签：学习笔记 javascript

本文链接：https://blog.csdn.net/m0_58323724/article/details/136120531

版权

1. 函数

1.1 为什么需要函数

function，是被设计为执行特定任务的代码块。

有利于精简代码，方便复用。

1.2 函数使用

函数声明语法：

function 函数名(){
     函数体
}

函数命名规范：

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

函数调用:声明（定义）的函数必须被调用才会真正执行，使用（）调用函数

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

案例--求和

  <script>
    //求两个数和
    function getSum() {
      let num1 = +prompt('请输入第一个数')
      let num2 = +prompt('请输入第二个数')
      alert(`这两数和为${num1 + num2}`);
    }
    //求1到100的和
    function getSumform1to100() {
      let sum = 0
      for (let i = 1; i <= 100; i++) {
        sum += i
      }
      alert(`1到100的和为${sum}`)
    }
    getSum()
    getSumform1to100()
  </script>

1.3 函数传参

声明以及调用：

//声明
function 函数名(参数列表){
      函数体
}
//调用
函数名(参数列表)

形参：声明函数时写在函数右边小括号的叫形参（形式上的参数）
实参：调用函数时写在函数右边小括号的叫实参（实际上的参数）

案例--函数封装计算两个数的和

<script>
    function getSum(num1, num2) {
      alert(`和为${num1 + num2}`)
    }
    let number1 = +prompt('请输入第一个数')
    let number2 = +prompt('请输入第二个数')
    getSum(number1, number2)
  </script>

案例--函数封装求学生总分

  <script>
    function getSum(arr=[]) {
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      alert(`学生成绩和为${sum}`)
    }
    let Array = [123, 100, 132, 86, 56, 74]
    getSum(Array)
  </script>

1.4 函数返回值

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

案例--返回值

<script>
    //1.求两个数中的最大值
    function getMax(n = 0, m = 0) {
      return n > m ? n : m
    }
    alert(getMax(4, 5))

    //2.求任意数组中的最大值并返回最大值
    function getMax1(arr) {
      let max = arr[0]
      for (let i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
          max = arr[i]
        }
      }
      return max
    }
    let arr = [1, 4, 7, 88, 23, 54, 60]
    alert(getMax1(arr))

补：

两个相同的函数后面的会覆盖前面的函数
在JavaScript中实参的个数和形参的个数可以不一致。实参过多，多余的实参会被忽略；形参过多，会自动填上undefined
函数一旦碰到return就不会在往下执行

1.5 作用域

优点：旨在提高程序逻辑的局部性，增强程序的可靠性，减少名字冲突

分类：

全局作用域：全局有效，作用于所有代码执行的环境（整个script标签内部或一个独立的js文件）
局部作用域：局部有效，作用域函数内的代码环境，就是局部作用域。因为跟函数有关系，所有也称为函数作用域

特殊情况：如果函数内部，变量没有声明，直接赋值，也当全局变量看

1.6 匿名函数

具名函数：声明：function fn() {} 调用：fn()

匿名函数：function() {} 无法直接使用

匿名函数使用方式：

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

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

立即执行函数：避免全局变量之间的污染

//1.写法1
(function(){
//函数体
})();//两个立即执行函数中间必须加分号隔开
(function(){
//函数体
})();

//2.写法2
(function (){
//函数体
}()
)

1.7综合案例

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

<script>
    //用户输入秒数自动转换为时分秒
    let time = +prompt('请输入秒数')
    function getTime(t) {
      let hour = parseInt(t / 60 / 60 % 24)
      let minutes = parseInt(t / 60 % 60)
      let second = parseInt(t % 60)
      //补0
      if (hour < 10) {
        hour = '0' + hour
      }
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      if (second < 10) {
        second = '0' + second
      }
      return [hour, minutes, second]
    }
    result = getTime(time)
    document.write(`${time}秒是${result[0]}小时${result[1]}分钟${result[2]}秒`)
  </script>