JavaScript 基础第四天-函数

1. 掌握函数的基本使用，让代码具备复用能力
2. 理解封装的意义，能够具备封装函数的能力

函数

• 为什么需要函数

可以把公共的代码封装起来，谁用直接调用

1. 99乘法表，页面需要打印多个怎么办？
2. 体验函数的魅力
 代码复用

1.1 为什么需要函数
目标： 能说出为什么需要函数
 函数：
function，是被设计为执行特定任务的代码块
 说明：
函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。
比如我们前面使用的 alert() 、 prompt() 和 console.log() 都是一些 js 函数，只不过已经封装好了，我们直接使用的。

写一次播放按钮，然后利用函数进行调用

小结

1. 为什么需要函数？
 可以实现代码复用，提高开发效率
2. 函数是什么？
 function执行特定任务的代码块

函数使用

目标：掌握函数语法，把代码封装起来

 函数的声明语法

function 函数名() {
        函数体
}

例如

function sayHai () {
      document.write(`hai~~~`)
}

 函数名命名规范

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

函数的调用语法

//函数调用,这些函数体内的代码逻辑会被执行
函数名()

注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数

 我们曾经使用的 alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用

 函数体

函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数
的功能代码都要写在函数体当中。

小结：

1. 函数是用那个关键字声明的？
 function
2. 函数不调用会执行吗？如何调用函数？
 函数不调用自己不执行
 调用方式: 函数名()
3. 函数的复用代码和循环重复代码有什么不同？
 循环代码写完即执行，不能很方便控制执行位置
 随时调用，随时执行，可重复调用

函数传参

 思考：这样的函数只能求 10 + 20， 这个函数功能局限非常大

 解决办法：把要计算的数字传到函数内
 结论：
 若函数完成功能需要调用者传入数据，那么就需要用有参数的函数
 这样可以极大提高函数的灵活性

1.3 函数传参

 声明语法

 调用语法

 调用函数时，需要传入几个数据就写几个，用逗号隔开

function getSum100(start, end) {
                          //形参，形参
            let sum = 0
            for (let i = start; i <= end; i++) {
                sum += i
            }
            document.write(`${sum} <br>`)
        }
        getSum100(1, 50)  //实参（小括号里面的数）-实际的参数
        getSum100(1, 50)  //实参-实际的参数

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

总结

1. 函数传递参数的好处是？

 可以极大的提高了函数的灵活性

2. 函数参数可以分为那两类？怎么判断他们是那种参数？

 函数可以分为形参和实参
 函数声明时，小括号里面的是形参，形式上的参数

 函数调用时，小括号里面的是实参，实际的参数
 尽量保持形参和实参的个数一致

3. 参数中间用什么符号隔开？
 逗号,

1.3 函数传参-参数默认值

形参： 可以看做变量，但是如果一个变量不给值，默认是什么？
 undefined
但是如果做用户不输入实参，刚才的案例，则出现 undefined + undefined 结果是什么？
 NaN
我们可以改进下，用户不输入实参，可以给 形参默认值，可以默认为 0, 这样程序更严谨，可以如下操作：

function getSum(x = 0,y = 0) {
    //给形参添加默认值，如果调用函数时没有值的话则使用默认值
   document.write(x + y)
}
getSum() //实参不给值的话，形参有赋值，结果为0，而不是NaN
getSum(1,2)  //结果是3

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

 提问：什么是函数？
函数是被设计为执行特定任务的代码块
 缺点：把计算后的结果处理方式写死了，内部处理了
 解决：把处理结果返回给调用者
 有返回值函数的概念：
 当调用某个函数，这个函数会返回一个结果出来
 这就是有返回值的函数

 其实我们前面已经接触了很多的函数具备返回值：

 只是这些函数是JS底层内置的.我们直接就可以使用
 当然有些函数，则没有返回值

 所以要根据需求，来设定需不需要返回值

1. 函数很多情况下需要返回值如购物车的总金额

 当函数需要返回数据出去时，用return关键字

 语法

return 数据       

return 20

使用方法

function getSum (x,y) {
         return x + y
}

let num = getSum(1,2)

doument.write(num)   //  3

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

1. 为什么要让函数有返回值
 函数执行后得到结果，结果是调用者想要拿到的（一句话，函数内部不需要输出结果，而是返回结果）
 对执行结果的扩展性更高,可以让其他的程序使用这个结果
2. 函数有返回值用那个关键字？ 有什么注意事项呢？
 语法：return 数据
 return后面不接数据或者函数内不写return，函数的返回值是undefined
 return能立即结束当前函数, 所以 return 后面的数据不要换行写

函数：实参多余形参，多余的实参不参与，

实参小于形参，剩余的形参不参与运算

break和return有什么不同，break结束的是循环（swich）return结束的是循环

函数表达式（匿名函数）和具名函数的不同，

1，具名函数可以写到任意位置

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

立即执行函数

写法：1.

逻辑运算符里的短路

2. 转换为Boolean型

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