学习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);//2let num3 = 0;let num4 = 1;console.log(num3 && num4);//0//逻辑或中断左侧为真则返回左侧，左侧为假则返回右侧let num5 = 1;let num6 = 2;console.log(num5 || num6);//1let num7 = 0;let num8 = 5;console.log(num7 || num8);//5</script>

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

 function getSum(a, b) {a = a || 0b = b || 0console.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:ssfunction 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>