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.

(function(形参){执行代码})(实参)
2.

(function(形参){执行代码}(实参))
1. 立即执行函数有什么作用?
 防止变量污染
2. 立即执行函数需要调用吗? 有什么注意事项呢?
 无需调用,立即执行,其实本质已经调用了
 多个立即执行函数之间用分号隔开

逻辑运算符里的短路

短路:只存在于 && 和 || 中,当满足一定条件会让右边代码不执行
 原因:通过左边能得到整个式子的结果,因此没必要再判断右边
 运算结果:无论 && 还是 || ,运算结果都是最后被执行的表达式值,一般用在变量赋值
逻辑与左边代码为假中断,逻辑或代码为真就中断

2. 转换为Boolean型

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

版权声明:
作者:zhuim521
链接:https://zhuimwl.com/85.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
JavaScript 基础第四天-函数
1. 掌握函数的基本使用,让代码具备复用能力 2. 理解封装的意义,能够具备封装函数的能力 函数 • 为什么需要函数 可以把公共的代码封装起来,谁用直接调用 1.……
<<上一篇
下一篇>>