js中的函数

1.函数的使用

 <script>
        //    1.声明函数
        // function 函数名() {
        //     // 函数体:真正去执行的代码
        // }

        // 1.声明函数
        function Hello() {
            console.log('hello');
        }
        // 2.调用函数  函数名()
        Hello()
        Hello()

        // 注意:默认是不执行,必须要调用才能执行
    </script>

2.函数案例练习

 <script>
        // 1.定义求和的函数
        function getSum() {
            let a = 10
            let b = 20
            console.log(a + b);
        }
        // 2.调用这个函数
        getSum()


        //  1.定义一个1-100之间求和函数
        function getSum100() {
            let sum = 0
            for (let i = 1; i <= 100; i++) {
                //    累加
                sum += i
            }
            console.log(sum);
        }
        // 2.调用函数
        getSum100()
    </script>

3.函数的参数

<script>
        // 1.定义求和的函数
        // 定义函数时参数叫形参,形式上的参数可以理解为我定义一个变量
        function getSum(x, y, z) {
            console.log(x, y, z);//5,8,undefined
            console.log(x + y);
        }
        // 2.调用这个函数
        // 实参:在调用函数时传递的参数,可以理解为在为上面形参赋值
        // getSum(1, 5) //6
        getSum(5, 8)//13

        // 参数的作用: 根据用户传递的实参,灵活的返回对应的结果

        // 注意点:实参和形参最好多应,不然多于的形参参数返回undefined
    </script>

4.函数的默认参数

 <script>
        // 函数的默认参数:一开始就给形参赋值,给他一个默认值防止程序出错
        // 原因:不给默认,形参默认是undefined

        let num1 = +prompt('请输入第一个值')
        let num2 = +prompt('请输入第2个值')
        function getSum(x = 0, y = 0) {
            // console.log(x, y);//0  0
            // 第一个值小于于第二个值
            console.log(x + y);// 0
        }
        // getSum(5, 4) // NaN
        getSum(num1, num2)

        // // 变量的重新赋值
        // let x = 0
        // x = 5
        // let y = 0
        // y = 4


    </script>

5.函数封装数组求和

<script>
        // 函数的默认参数:一开始就给形参赋值,给他一个默认值防止程序出错
        // 原因:不给默认,形参默认是undefined
        let a1 = [100, 50, 80, 90, 60, 40]
        let a2 = [120, 5, 80, 90, 60, 160]
        // 1.数组求和的功能,这个数组不固定,封装一个函数,把数组当参数传递
        // 设置默参数,防止用户没有传递参数,程序报错
        function getArrsum(Arr = []) {
            console.log(Arr);//默认不传值是undeined
            // 函数体:数组求和
            let sum = 0
            for (let i = 0; i < Arr.length; i++) {
                // console.log(i);//索引
                // console.log(Arr[i]);//数组里面的每一项数据
                sum += Arr[i]
            }
            console.log(sum);
        }
        // 2.调用函数的时候传递数组
        getArrsum()
        // 传递实参可以是一个变量
        getArrsum(a1)
        getArrsum(a2)

        // let Arr = []
        // let a1 = [100, 50, 80, 90, 60, 40]
        // Arr = a1 = [100, 50, 80, 90, 60, 40]
    </script>

6.函数的返回值

<script>
        // 函数的返回值:就是函数执行完毕,会返回一个结果,结果需要在外部输出,通过函数返回值返回出来

        function fn() {
            // return返回 值(结果)
            return 20
        }

        // 调用者
        console.log(fn());
        //fn() = 20

        // 返回值,最后到了调用者哪里


        // 1.定义一个求和函数
        function getSum(x = 0, y = 0) {
            //  结果返回出来
            return x + y
            // return结束函数,返回一个结果,后面的代码不在继续执行
            // alert(111)
        }

        // 2.调用函数
        // console.log(getSum(50, 80));// getSum(50, 80) =130

        let money = getSum(50, 80) // money=getSum(50, 80)=130
        let money2 = getSum(30, 40) //getSum(30, 40) =70
        // 3.拿到结果之后不同标签进行渲染
        document.write(`<a href='#'>${money}</a>`)
        document.write(`<button>${money2}</button>`)
    </script>

7.函数的细节

 <script>
        function fn(x, y) {
            // 函数没有retrun关键字返回的结果是undefined
            x + y
        }

        console.log(fn(2, 2));
    </script>

8.函数的作用域

 <script>
        // 作用域:代码的可应用范围,变量生效范围
        // 分3种:   1.全局作用域(全局变量)  生效范围(整个js文件整个script标签内)
        //          2.局部作用域(局部变量,函数作用域)  生效范围(函数内部)
        //          3.块级作用域 (块级变量)只能在循环或者判断语句使用let定义的变量,只能在花括号中生效

        //  1.全局作用域(全局变量)  生效范围(整个js文件整个script标签内)
        // let a = 10
        // function fn() {
        //     console.log(a);//10
        // }
        // fn()


        // if (true) {
        //     console.log(a);//10
        // }


        //2.局部作用域(局部变量,函数作用域)  生效范围(函数内部)
        function fn() {
            let a = 20
            console.log(a);//20
        }
        fn()
        console.log(a);//报错


        // 3.es6推块级作用域 (块级变量)只能在循环或者判断语句使用let或const定义的变量,只能在花括号中生效
        for (let i = 10; i <= 100; i++) {
            console.log(i);//10....100
        }
        // console.log(i);//报错

        if (true) {
            let a = 100

        }
        console.log(a);//报错
    </script>

9.变量的特殊情况

<script>
        // 1.函数内部变量没有声明,会默认当成全局变量使用
        function fn(x, y) {
            // 2.函数内部形参默认是局部变量
            console.log(x, y);//10 20
            a = 20
            b = 100
            let c = 200
            console.log(a, b, c);//20 100 200
        }
        fn(10, 20)
        console.log(x, y);//报错 x,y没有定义
        // console.log(a, b, c);//20 100 报错
    </script>

10.作用域链 就近原则

11.函数表达式

<script>


        // 具名函数
        function fn(x, y) {
            console.log(x, y);
            return 111
        }
        // 调用具名函数 函数名()
        console.log(fn(1, 5));

        // 匿名函数
        // 函数表达式:通过变量名调用匿名函数方式称之为函数表达式

        let handle = function (x, y) {
            console.log(x, y);
            return 222
        }
        console.log(handle(2, 6));

        //注意: 使用函数表达式,调用要放在函数下边,变量先定义在使用
    </script>

12.立即执行函数

<script>
        //    立即执行函数(非匿名函数)
        // 作用:解决全局变量污染问题,解决全局变量名重复的问题

        let a = 100;
        // 写法1 (())()
        (function fn(x, y) {
            console.log(x, y);
            let a = 10
            console.log(a)
        })(10, 100);


        // 写法2 (()())
        (function () {
            let a = 20
            console.log('这是自调用函数')
        }());

        // 注意点:自调用函数之间要使用分割符进行隔开,不然就报错
    </script>