JavaScript基础Day4

函数-参数：







如果调用的时候，我们没有传递实参，则默认为0

 <script>
        // 求学生总分
        // 声明函数
        function getScore(arr) {
            // arr = [99,10,100]
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            document.write(sum)
        }
        

        // 调用函数
        getScore([99,10,100])
        document.write(`<br>`)
        getScore([99,100,100])
    </script>

函数返回值：（重点，难点）

有的时候函数名字比较长，就会用一个更简短的变量来代替它，如上述的re来代替值20。


return后面的代码不再执行，会直接结束当前函数


练习1：

 <script>
        function maxz(arr) {
            // 声明一个max变量
            // 把数组第一个值给 max
            let max = arr[0]
            // 开始遍历数组并比较
            for (let i = 1; i < arr.length ; i++) {
            if (max < arr[i]) {
                max = arr[i]
            }
        }
            // 返回这个最大值
            return max
        }
        let maxplus = maxz([10,66,33,25,12])
        document.write(`数组的最大值是${maxplus}`)
    </script>

练习2：

<script>
        function minz(arr) {
            // 声明一个max变量
            // 把数组第一个值给 max
            let min = arr[0]
            // 开始遍历数组并比较
            for (let i = 1; i < arr.length ; i++) {
            if (min > arr[i]) {
                min = arr[i]
            }
        }
            // 返回这个最大值
            return min
        }
        let minplus = minz([10,66,33,25,12])
        document.write(`数组的最小值是${minplus}`)
    </script>

函数-返回多个值

<script>
        // 求一个数组最大值和最小值
        function getArrMaxAndMin(arr) {
            // 1.声明一个最大值变量和最小值变量
            let max = min = arr[0]
            // 2.遍历循环 得到最大值和最小值
            for (let i = 0; i < arr.length;i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
                if (min > arr[i]) {
                    min = arr[i]
                }
            }
            // 3.返回值最大值和最小值
            return [max,min]
        }
        let re = getArrMaxAndMin([1,5,8,2,0])
        // return把max和min返回给了getArrMaxAndMin，而re = getArrMaxAndMin = [8,0]
        document.write(`数组的最大值是：${re[0]}，数组里面的最小值是：${re[1]}`)
    </script>

答疑：为什么不用if,else？ 因为if，else是用在同一个变量来做判断的，但是max和min是两个变量，不好做判断。

练习：

<script>
        // 求两个数的最大值
        let num1 = +prompt('请输入第一个数')
        let num2 = +prompt('请输入第二个数')
        // 比较函数 最大值
        function getMax(x, y) {
            if (x > y) {
                return x
            } else {
                return y
            }
        }
        getMax(num1,num2)
        let max = getMax(num1,num2)
        document.write(`最大值是${max}`)
    </script>

作用域：


全局作用域：

在script里面对num进行了定义，那么在所有script标签里这个定义都生效

局部作用域：（又称函数作用域）
一个函数就是一个作用域，在函数里写的代码只在函数里有效

块级作用域：
块作用域由{ }包括

局部变量：

函数包裹函数，子级可以使用父级的变量，因为在父级的作用域内，但是父级不能使用子级的变量，因为父级不在子级的作用域内。

块级变量：

注意：

Local：说明i是局部的
Script:是全局的

变量访问原则：

就近原则：先访问本作用域内有没有符合的变量，没有再往上找。



匿名函数：


ex:

<script>
        let fn = function() {
            console.log(111)
        }
        fn()
    </script>

ex2：形参实参也能放进去

<script>
        let fn = function(x, y) {
            console.log(x + y)
        }
        fn(1, 2)
    </script>

立即执行函数不需要调用，它是一个局部变量。可以避免跟别人写的变量产生冲突，因为我们自己的变量是放在立即执行函数里面的。

立即执行函数一定要有结尾，加分号，让每一个立即执行函数隔开。

综合案例：转换时间

<script>
        // 1.用户输入
        let time = +prompt('请输入总的秒数：')
        // 2.计算时间 封装函数
        function getTimes(t) {
            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
            return `计算之后的时间是${h}小时${m}分${s}秒`
        }
        // 3.打印输出
        let str = getTimes(time)
        document.write(str)
    </script>

知识点补充：只作为了解

尽管实参和形参的个数不匹配，但arguments可以负责充当一个数组直接表示出给的所有实参

课后练习：

练习题1：

• 显示用户输入内容
• 要求:
  1. 封装函数, 名字为printfInput
  2. 功能: 将用户输入的内容, 在页面中显示
  3. 测试: 写一个输入确认框, 调用该函数时将输入内容传入, 观察页面中的内容是否与输入内容一致。

function printfInput(content) { 
    // 将用户输入的内容, 在页面中显示
    let str = content
    document.write(str)
  }
  let constr = prompt('请输入内容')
  printfInput(constr)

练习题2：

求和函数

要求:

1. 封装函数, 名字为sum
2. 功能: 根据传入的两个数,求和并且返回求和的结果（函数必须有return返回值）
3. 测试: 调用该函数时获取结果后在控制台打印结果判断是否正确

参考答案：

function sum(x, y) {
  let res = x + y
  return res
  // return x + y
}
let te = sum(1, 2)
document.write(`两者的和是${te}`)

我的答案：

function sum(num1,num2) {
                let total = num1 + num2
                return total
            }
            let num1 = +prompt('请输入数字1')
            let num2 = +prompt('请输入数字2')
            let re = sum(num1,num2)
            document.write(re)

练习题3：

实现两个数的值交换(函数版本)

目的: 封装函数, 复习函数的基本写法

要求:

1. 函数名为 changeNum()
2. 调用函数时,在控制台输出a=1,b=2
3. 经过函数内部处理后,输出a=2,b=1
4. console.log的代码全部封装在函数内部
5. 准备代码如下, 在此基础上继续编写
6. 可以多调用两次

function changeNum(a,b) {
                    let c = a
                    a = b
                    b = c
                    document.write(`a的结果是${a} <br> b的结果是${b} <br>`)
                }
                changeNum(1,2)
                changeNum('pink','blue')

练习题4：

                封装余额函数

                目的: 复习函数的声明与调用

                要求:

                1. 运行程序后, 浏览器显示输入确认框(prompt)
                2. 第一个输入确认框提示输入银行卡余额
                3. 第二个输入确认框提示输入当月食宿消费金额
                4. 第三个输入确认框提示输入当月生活消费金额
                5. 输入完毕后,在页面中显示银行卡剩余金额
                6. 提示: 所有功能代码封装在函数内部（函数需要把余额返回）            

function card() {
                    let num1 = +prompt('输入银行卡余额')
                    let num2 = +prompt('本月食宿消费金额')
                    let num3 = +prompt('本月生活消费金额')
                    let sum = num1 - num2 - num3
                    return sum
                    }
                    let money = card()
                    document.write(`银行卡余额为：${money}`)

小练习：

                    1. 计算1-n之间所有数的和
                    2. 计算m-n之间所有数的和 
                    3. 学生的分数是一个数组,计算每个学生的总分

// 1. 计算1-n之间所有数的和
function sum(wei) {
                            let final = 0
                            for(let i = 1; i <= wei; i++) {
                                final += i
                            }
                            // return final
                            document.write(`1-${wei}的和为：${final}`)
                        }
                        sum(10)
//  2. 计算m-n之间所有数的和 
function sum(a,b) {
                            let final = 0
                            for(let i = a; i <= b; i++) {
                                final += i
                            }
                            return final
                            }
                            let bb = sum(2,5)
                            document.write(`2-5的和为：${bb}`)

//  3. 学生的分数是一个数组,计算每个学生的总分
function sum(arr) {
                let final = 0
                    for(let i = 0; i < arr.length; i++) {
                        final += arr[i]
                            }
                        return final
                        }
                        let last = sum([99,91,50])
                        document.write(`该学生总分为：${last}`)