学习javascript的函数

1.什么是函数？

可以重复被使用的代码块

作用：函数可以把具有相同或者相似逻辑的代码“包裹起来”，有利于代码的复用。

2.函数的基本使用

1.定义函数

利用关键字Function 定义函数（声明函数）

function 函数名(){
    函数体
}

函数命名与变量名一致，采用小驼峰命名，函数的 名字常常采用动词。

2.调用函数

定义一个函数不会自动执行，需要去调用它。

函数名();

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

<script>
        function getSum(){
            let num1 =10;
            let num2 =15;
            console.log(num1+num2);
        }
        getSum();
    </script>

3.参数

语法：

function 函数名(参数1,参数2,....){
    return 结果；
}

说明：

函数参数，如果可以有多个则用逗号分隔，用于接受传递过来的数据。

return 关键字可以把结果返回调用者。

<script>
        function getSum(a, b) {
            return a + b;
        }
        console.log(getSum(11,22));
</script>

4.demo:计算两个数之间的和

 <script>
        function getFromTo(a, b) {
            let sum = 0;
            for (let i = a; i <= b; i++) {
                sum += i;
            }
            return sum;
        }
        let num1 = +prompt('请输入第一个数');
        let num2 = +prompt('请输入第二个数');
        let num = getFromTo(num1, num2);
        document.write(`${num1}到${num2}之间的和为${num}`);
    </script>

5.形参与实参

形参：声明函数时小括号里面的叫做形参（形式上的参数）

实参：调用函数时小括号里面的叫做实参（实际上的参数）

执行过程：会把实参里面的参数传递给形参，从而提供给函数内部使用，我们可以把形参理解为变量。

在JavaScript中，实参的个数和形参的个数可以不一致

如果形参过多，会自动填充undefined

如果实参过多，那么多余的实参就会被忽略

所以：在开发中实参的个数和形参的个数保持一致

6.逻辑中断

存在于逻辑运算符&&和||中，左边如果满足一定条件会中断代码执行，也被称为逻辑短路

解读：

false%%anything //逻辑与 左边false则中断，如果左边为true，则返回右边代码的值
true||anything //逻辑或，左边true则中断，如果左边是false，则返回右边代码的值

<script>
        //逻辑与中断,左侧为真则返回右侧，左侧为假则返回左侧
        let num1 = 1;
        let num2 = 2;
        console.log(num1 && num2);//2

        let num3 = 0;
        let num4 = 1;
        console.log(num3 && num4);//0

        //逻辑或中断左侧为真则返回左侧，左侧为假则返回右侧

        let num5 = 1;
        let num6 = 2;
        console.log(num5 || num6);//1

        let num7 = 0;
        let num8 = 5;
        console.log(num7 || num8);//5
    </script>

主要是用来解决函数的参数

 function getSum(a, b) {
            a = a || 0
            b = b || 0
            console.log(a + b);
        }
getSum(1, 10);

7.函数的默认参数

可以给形参设置默认值。

function sum(x=0,y=0){
    return x + y;
}

说明：这个默认值只会在缺少实参传递或者实参是undefined才会被执行。

默认参数和逻辑中断使用场景区别：

默认参数主要处理函数形参（处理参数要比逻辑中断更简单）

逻辑中断除了参数还可以处理更多的需求

8.demo求数组的和

需求：用户可以给不同数组（里面是数字型数据），求数组和并且返回。

<script>
        //创建函数，接收一个数组作为参数
        function getArrSum(arr = []) {
            let sum = 0;
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            return sum;
        }


        //函数调用，传递一个数组

        console.log(getArrSum([1, 2, 3, 4, 5]));
        //函数内部处理数组的和，返回这个结果
    </script>

9.函数返回值return

返回值：把处理结果返回给调用者

作用：

结束函数：return会立即结束当前函数，所以后面的代码不会被执行。

不要换行：在return关键字和被返回的表达式之间不允许使用换行符，否则内部执行相当于会自动补充分号。

默认返回：函数可以没有return ，这种情况函数默认返回值为undefined

10.demo 判断数组中是否存在某个元素，如果有则返回true，没有则返回false

 <script>
        function getArrOne(item =0 ,arr =[]){
            for(let i=0;i<arr.length;i++){
                if(arr[i]===item){
                    return true;
                }else {
                    return false;
                }
            }
        }

        console.log(getArrOne(1,[0,5,6,9,4,25,11]));
    </script>

11.demo 查找索引

 <script>
        function findIndex(item, arr = []) {
            //定义一个初始值用来保存索引
            let index = -1;
            //遍历元素，查找符合条件的
            for (let i = 0; i < arr.length; i++) {
                //查找符合条件
                if (item === arr[i]) {
                    //修改索引
                    index = i;
                }
            }
            return index;
        }
        console.log(findIndex(1, [1, 5, 2, 5, 4, 8, 5, 3, 6]));
    </script>

12.作用域

变量或者值在代码中的可用性范围。

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

全局作用域：（全局有效）作用于所有代码执行的环境（整个script标签内部）或者一个独立的js文件。

局部作用域：（局部有效）函数作用域。作用于函数内的代码环境。块级作用域、{}大括号内部。

13.函数表达式

具名函数：带有名字的函数

匿名函数：没有名字的函数，function(){};

btn.onclick=function(){
    alert('弹出');
}

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

let fun =function(){}

区别：函数声明可以在任意位置调用，函数表达式不能在表达式之前调用。

立即执行函数：IIFE

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

多个立即执行函数之间用分号隔开。

好处：避免全局变量之间的污染。

立即执行函数前后要有；分号

语法：

//1.方式一
(匿名函数)();
//2.方式二
(匿名函数());

<script>
        (function (){
            console.log('立即执行函数写法一');
        })();

        (function(){
            console.log('立即执行函数写法er');
        }());
    </script>

14.转换时间案例

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

<script>
        //1.用户输入总秒数
        let second = +prompt('请输入一个秒数');
        //2.创建函数 用函数来格式化时间 hh:mm:ss
        function gettime(time) {
            let h = parseInt(time / 60 / 60 % 24);
            let m = parseInt(time / 60 % 60);
            let s = parseInt(time % 60);
            //补零
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            document.write(h + "小时", m + "分", s + "秒")
        }
        gettime(second);
    </script>

15.总结

本文章是笔者的学习笔记，如果您在浏览此文章发现了错误，还请您在评论区留言，笔者看到后会在第一时间解决，谢谢。