JavaScript学习第四天

励志做一名码农_

已于 2023-05-25 20:45:47 修改

阅读量470

点赞数

文章标签：学习前端 javascript 开发语言 ecmascript

于 2023-05-25 20:43:27 首次发布

本文链接：https://blog.csdn.net/qq_58791266/article/details/130871473

版权

1.3.2 封装一个函数，计算1-100之间所有数的和

1. 函数

1.1 为什么需要函数

1.1.1 作用

可以实现代码复用，提高开发效率

1.1.2 函数

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

1.2 函数使用

1.2.1 函数的声明语法

1.2.2 函数名命名规范

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

1.2.3 函数的调用语法

1.2.4 函数体

1.2.5 练习：写一个打招呼的函数 hi~

 <script>
        // 1. 函数的声明   
        function sayHi() {
            document.write('hi~')
        }
        // 2. 函数调用   函数不调用，自己不执行
        sayHi()
        sayHi()
        sayHi()
    </script>

1.2.6 练习：把99乘法表封装到函数里面，重复调用3次

<script>
function sheet99() {
      // 1. 外层循环控制行数
      for (let i = 1; i <= 9; i++) {
        // 2. 里层循环控制列数
        for (let j = 1; j <= i; j++) {
          document.write(`<span>${j} X ${i} = ${i * j}</span>`)
        }
        // 换行
        document.write('<br>')
      }
    }
    // 调用
    sheet99()
    sheet99()
    sheet99()
    sheet99()
  </script>

1.3 函数案例

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

<script>
        //    1. 封装一个函数，计算两个数的和
        function getSum() {
            let num1 = +prompt('请输入第一个数：')
            let num2 = +prompt('请输入第一个数：')
            console.log(num1 + num2);
        }
        getSum()
    </script>

1.3.2 封装一个函数，计算1-100之间所有数的和

 <script>
// 2. 封装一个函数，计算1 - 100之间所有数的和
        function getSum100() {
            let sum = 0
            for (let i = 1; i <= 100; i++) {
                sum += i
            }
            console.log(sum);
        }
        getSum100()
    </script>

1.4 函数传参

1.4.1 声明语法

1.4.2 调用语法

1.4.3 形参、实参

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

1.4.4 练习：函数封装求和

<script>
        // 函数求和
        function getSum(num1, num2) {
            document.write(num1 + num2)
        }
        getSum(1, 3)
    </script>

1.5 函数传参-参数默认值

形参：可以看做变量，但是如果一个变量不给值，默认是什么？ undefined

但是如果做用户不输入实参，刚才的案例，则出现 undefined + undefined 结果是什么？ NaN

我们可以改进下，用户不输入实参，可以给形参默认值，可以默认为 0, 这样程序更严谨，可以如下操作：

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

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

<script>
        // 1. 封装函数
        function getArrSum(arr = []) {
            // console.log(arr);
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            console.log(sum);
        }
        // 2. 调用函数
        getArrSum([1, 2, 3, 4, 5])
        getArrSum([11, 22, 33])
        getArrSum()
    </script>

1.5 函数返回值

1.5.1 语法

1.5.2 注意点

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

 <script>
        // // 函数的返回值
        // function fn() {
        //     return 20
        // }
        // //    相当于执行了  fn() 是调用者 fn() = 20
        // // console.log(fn());
        // let re = fn()
        // console.log(re);

        // 求和函数的写法
        function getTotalPrice(x, y) {
            return x + y
            // return 后面的代码不会被执行
        }
        // console.log(getTotalPrice(1, 2))
        // console.log(getTotalPrice(1, 2))
        let sum = getTotalPrice(1, 2)
        console.log(sum);
        console.log(sum);

        function fn() {

        }
        let re = fn()
        console.log(re)  // undefined
    </script>

1.5.3 练习：函数返回值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 求任意2个数中的最大值, 并返回
        // 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])
        // 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]
        }
        let newArr = getArrValue([12, 1, 55, 7, 9])
        console.log(`数组的最大值是：${newArr[0]}`);    //55
        console.log(`数组的最小值是：${newArr[1]}`);    //1
    </script>
</body>

</html>

1.5.4 函数细节补充

两个相同的函数后面的会覆盖前面的函数
在Javascript中实参的个数和形参的个数可以不一致

如果形参过多会自动填上undefined (了解即可)
如果实参过多那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)

函数一旦碰到return就不会在往下执行了函数的结束用retur

<script>
        // function getSum(x, y) {
        //   return x + y
        //   // 返回值返回给了谁？ 函数的调用者  getSum(1, 2)
        //   // getSum(1, 2) = 3
        // }
        // // let result = getSum(1, 2) = 3
        // // let num = parseInt('12px')
        // let result = getSum(1, 2)
        // console.log(result)
        // 1. 函数名相同， 后面覆盖前面

        // function fn() {
        //   console.log(1)
        // }
        // function fn() {
        //   console.log(2)
        // }
        // fn()
        // 2. 参数不匹配

        function fn(a, b) {
            console.log(a + b)
        }
        // (1). 实参多余形参   剩余的实参不参与运算
        // fn(1, 2, 3)
        // (2). 实参少于形参   剩余的实参不参与运算
        fn(1)   // 1 + undefined  = NaN 
    </script>

1.6 作用域

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

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

在JavaScript中，作用域可以分为：

全局作用域：全局有效

作用于所有代码执行的环境(整个 script 标签内部) 或者一个独立的 js 文件

局部作用域：局部有效

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

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

全局变量 ：函数外部let 的变量

全局变量在任何区域都可以访问和修改

局部变量：函数内部let的变量

局部变量只能在当前函数内部访问和修改

<script>
        let num = 10  // 1. 全局变量
        console.log(num)
        function fn() {
            console.log(num)
        }
        fn()

        // 2. 局部变量
        function fun() {
            let str = 'pink'
        }
        console.log(str)  // 错误
    </script>

 <script>
         let num = 20
        function fn() {
          num = 10  // 全局变量来看  强烈不允许
        }
        fn()
        console.log(num)

        function fun(x, y) {
          // 形参可以看做是函数的局部变量
          console.log(x)
        }
        fun(1, 2)
        console.log(x)  // 错误的
    </script>

1.7 匿名函数

函数可以分为两种：

具名函数

声明：function fn() {} 调用：fn()

匿名函数

function() {}

1.7.1 函数表达式

语法：

函数表达式和具名函数的不同 function fn() {}

1. 具名函数的调用可以写到任何位置

2. 函数表达式，必须先声明函数表达式，后调用

1.7.2 立即执行函数

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

  <script>
// 1. 第一种写法
    (function (x, y) {
      console.log(x + y)
      let num = 10
      let arr = []
    })(1, 2);
    // (function(){})();
    // 2.第二种写法
    // (function () { }());
    (function (x, y) {
      let arr = []
      console.log(x + y)
    }(1, 3));
  </script>

2. 综合案例

2.1 转换时间案例

<script>
        // 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 : h
            m = m < 10 ? '0' + m : m
            s = s < 10 ? '0' + s : s
            // console.log(h, m, s);
            return `转换完毕后是${h}小时${m}分${s}秒`
        }
        let str = getTime(second)
        document.write(str)
    </script>

2.2 逻辑中断

2.2.1逻辑运算符里的短路

原因：通过左边能得到整个式子的结果，因此没必要再判断右边

// console.log(false && 22)     //false
    // console.log(false && 3 + 5)
    // let age = 18
    // console.log(false && age++) // age++ 不执行  一假则假
    // console.log(age)

    // console.log(true || age++)
    // console.log(age)


    // console.log(11 && 22)  // 都是真，这返回最后一个真值
    // console.log(11 || 22)  //  输出第一个真值

2.2.2 转换为Boolean类型

1. 显示转换

记忆： ‘’ 、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true

<script>
        console.log(Boolean('pink'))
        console.log(Boolean(''))
        console.log(Boolean(0))
        console.log(Boolean(90))
        console.log(Boolean(-1))
        console.log(Boolean(undefined))
        console.log(Boolean(null))
        console.log(Boolean(NaN))

        console.log('--------------------------')
        let age
        if (age) {
            console.log(11)
        }
    </script>

2. 隐式转换

有字符串的加法 “” + 1
减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串 "" 转换为 0
null 经过数字转换之后会变为 0
undefined 经过数字转换之后会变为 NaN

励志做一名码农_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习第四天

说明：这个默认值只会在缺少实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参, 否则默认为 undefined。通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。但是如果做用户不输入实参，刚才的案例，则出现 undefined + undefined 结果是什么？作用于函数内的代码环境，就是局部作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。2. 函数表达式，必须先声明函数表达式，后调用。
复制链接

扫一扫