JS第四天

1.函数

1.1 为什么需要函数

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

总结

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

1.2函数的使用

a.函数的声明语法

function(函数名)
{
    函数体
}

b.函数名命名规范
Ø 和变量命名基本一致
Ø 尽量小驼峰式命名法
Ø 前缀应该为动词
Ø 命名建议:常用动词约定
c.函数的调用语法

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

注意:声明(定义)的函数必须调用才会真正被执行,使用 () 调用函数
我们曾经使用的 alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用
d. 函数体
函数体是函数的构成部分,它负责将相同或相似代码“包裹”起来,直到函数调用时函数体内的代码才会被执行。函
数的功能代码都要写在函数体当中

总结

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

1.3 函数传参

Ø 若函数完成功能需要调用者传入数据,那么就需要用有参数的函数
Ø 这样可以极大提高函数的灵活性
a.声明语法

function 函数名(参数列表)
{
    函数体
}

···参数列表
传入数据列表 声明这个函数需要传入几个数据
`多个数据用逗号隔开
b.调用语法

函数名(传递的参数列表)

getSquare(8)
getSquare(10,20)

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

总结

  1. 函数传递参数的好处是?
    Ø 可以极大的提高了函数的灵活性
  2. 函数参数可以分为那两类?怎么判断他们是那种参数?
    Ø 函数可以分为形参和实参
    Ø 函数声明时,小括号里面的是形参,形式上的参数
    Ø 函数调用时,小括号里面的是实参,实际的参数
    Ø 尽量保持形参和实参的个数一致
  3. 参数中间用什么符号隔开?
    Ø 逗号

1.3(后续)

形参: 可以看做变量,但是如果一个变量不给值,默认是什么?
Ø undefined
但是如果做用户不输入实参,刚才的案例,则出现 undefined + undefined 结果是什么?
Ø NaN
我们可以改进下,用户不输入实参,可以给 形参默认值,可以默认为 0, 这样程序更严谨,可以如下操作:
说明:这个默认值只会在缺少实参参数传递时 才会被执行,所以有参数会优先执行传递过来的实参, 否则默认为
undefined

1.4 函数返回值

a.函数是被设计为执行特定任务的代码块
· 缺点:把计算后的结果处理方式写死了,内部处理了
· 解决:把处理结果返回给调用者
b.有返回值函数的概念:
Ø 当调用某个函数,这个函数会返回一个结果出来,这就是有返回值的函数的概念
其实我们前面已经接触了很多的函数具备返回值:

let result=prompt('请输入你的年龄')
let result2=parseInt('111')

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

alert('弹框')

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

c.当函数需要返回数据出去时,用return关键字
语法

return 数据

怎么使用呢

 function getTotalPrice(x, y) {
            return x + y
        }
        getTotalPrice(1,2)
        let sum=getTotalPrice(1,2)
        console.log(sum)

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

总结

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

1.4 函数细节补充

· 两个相同的函数后面的会覆盖前面的函数
· 在Javascript中 实参的个数和形参的个数可以不一致
Ø 如果形参过多 会自动填上undefined (了解即可)
Ø 如果实参过多 那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)
·函数一旦碰到return就不会在往下执行了 函数的结束用return

1.5 作用域

a.通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名
字的作用域。
作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

全局作用域
全局有效
作用于所有代码执行的环
境(整个 script 标签内部)
或者一个独立的 js 文件
局部作用域
局部有效
作用于函数内的代码环境,就是
局部作用域。 因为跟函数有关系,
所以也称为函数作用域

b.在JavaScript中,根据作用域的不同,变量可以分为:

全局变量
函数外部let 的变量
全局变量在任何区域都
可以访问和修改

局部变量
函数内部let的变量
局部变量只能在当前函
数内部访问和修改

注:变量有一个坑, 特殊情况:
如果函数内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐
但是有一种情况,函数内部的形参可以看做是局部变量

总结

  1. JS 中作用域分为哪2种?
    Ø 全局作用域。函数外部或者整个script 有效
    Ø局部作用域。也称为函数作用域,函数内部有效
  2. 根据作用域不同,变量分为哪2种?
    Ø 全局变量
    Ø局部变量
  3. 有一种特殊情况是全局变量是那种?我们提倡吗?
    Ø 局部变量或者块级变量 没有let 声明直接赋值的当全局变量看
    Ø 我们强烈不提倡
    Ø 还有一种特殊情况,函数内部的形参可以当做局部变量看

变量的访问原则
·只要是代码,就至少有一个作用域
·写在函数内部的局部作用域
·如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
·访问原则:在能够访问到的情况下 先局部, 局部没有在找全局

总结

  1. 变量访问原则是什么?
    Ø采取就近原则的方式来查找变量最终的值

1.6匿名函数

函数可以分为:

具名函数
声明:function fn(){}
调用:fn()
匿名函数
function(){}

1.6.1匿名函数

没有名字的函数, 无法直接使用。
使用方式:
Ø 函数表达式
Ø 立即执行函数

1.函数表达式

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

let fn = function (x, y) {
            // console.log('我是函数表达式');
            console.log(x + y);
        }

其中函数的形参和实参使用跟具名函数一致。
使用场景
目前没有, 先认识
后期 web API 会使用

2. 立即执行函数

场景介绍: 避免全局变量之间的污染
语法

 // 第一种写法
    (function (x,y) { console.log(x+y);})(1,2)
    // 第二种写法
    (function(x,y){console.log(x+y);}(1,2)) 

总结

  1. 立即执行函数有什么作用?
    Ø 防止变量污染
  2. 立即执行函数需要调用吗? 有什么注意事项呢?
    Ø 无需调用,立即执行,其实本质已经调用了
    Ø 多个立即执行函数之间用分号隔开
1. 逻辑运算符里的短路

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

2. 转换为Boolean型

显示转换:
1.Boolean(内容)
记忆:
‘’、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true

  1. 转换为Boolean型
    显示转换:
    1.Boolean(内容)
    记忆: ‘’、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值