喝下这碗鸡汤
“知识就是力量。” - 弗朗西斯·培根
1.三元运算符
目标:能利用三元运算符执行满足条件的语句
使用场景:其实是比if双分支更简单的写法,可以使用三元表达式
语法:条件 ? 满足条件的执行代码 : 不满足条件执行的代码
接下来用一个小案例来展示三元运算符
<script>//1.用户输入let num = +prompt('请输入一个数字:')//2.判断输出 小于10才补0num = num < 10 ? '0' + num : numalert(num)</script>
2.断点调试
2.1为什么要进行断点调试?
学习可以使用帮助更好的理解代码运行,工作时可以更快找到BUG
2.2如何使用断点调试?
1.按F12打开开发者工具
2.点sources一栏
3.选择代码文件
<script>let num = 18num = num + 1console.log(num)</script>
在console.log(num)打一个断点,刷新页面 num就会变成18啦 如果num加1,所以程序正确。
3.简易ATM取款机案例
需求:用户可以实现存钱,取钱,查看余额和退出功能
分析:
1.循环的时候,需要反复提示输入框,所以提示框写到循环里面
2.退出的条件是用户输入了4,如果是4,循环结束,不再弹窗
3.提前准备一个金额先存储一个金额
4.取钱则是减法操作,存钱则是加法操作,查看余额则是直接显示金额
5.输入不同的值,可以使用switch来执行不同的操作
<body><script>//1. 开始循环//3. 准备一个总金额let money = 100while (true) {let re = +prompt(`请你选择操作:1.存钱2.取钱3.查看余额4.退出`)//2. 如果用户输入的是4,退出循环 breakif (re === 4) {break}//4. 根据输入做操作switch (re) {case 1://存钱let cun = +prompt('请输入存款金额:')money += cunbreakcase 2:let qu = +prompt('请输入取款金额:')money -= qubreakcase 3:alert(`您的银行卡余额是:${money}`)break}}</script></body>
4.为什么需要函数?
函数:
function,是被设计为执行特定任务的代码块
函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用
比如我们前面使用的 alert()、prompt()和 console.log() 都是一些is 函数,只不过已经封装好了,我们直接使用的。
5.函数的使用
函数的语法声明:
function 函数名() {函数体
}
函数名命名规范
1.和变量命名基本一致尽量小驼峰式命名法
2.前缀应该为动词
3.命名建议:常用动词约定
接下来我们来写两个小案例吧~
需求:
1.封装一个函数,计算两个数的和
function getSum() {let num1 = +prompt('请输入第一个数字:')let num2 = +prompt('请输入第二个数字:')console.log(num1 + num2)}getSum()
2.封装一个函数,计算1-100之间所有数的和
<script>function getSum() {let sum = 0for (let i = 1; i <= 100; i++) {sum += i}console.log(sum)}getSum()</script>
6.函数传参
形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)
实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数)
形参可以理解为是在这个函数内声明的变量(比如 num1=10)实参可以理解为是给这个变量赋值
7.函数的返回值
为什么需要返回值的?其实我们可以理解为当我用洗衣机洗衣服的时候,洗完衣服(函数执行完毕),我们需要拿衣服(也就是返回值),也可以理解为当我们买东西的时候,我们不希望买一件就显示多少钱,我们希望到了结算的时候才告诉我们多少钱,也就是说我们希望做到随时可以使用返回值。
细节:
在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
return 后面代码不会再被执行,会立即结束当前函数,所以return 后面的数据不要换行写return函数可以没有 return,这种情况函数默认返回值为 undefined
<script>function fun() {return 20}//相当于执行 fun() 调用者 fun() = 20//console.log(fn())let re = fun()console.log(re)</script>
8.作用域
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突
全局作用域
全局有效
作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件
局部作用域
局部有效
作用于函数内的代码环境,就是局部作用域。因为跟函数有关系,所以也称为函数作用域。
9.匿名函数
9.1函数表达式
函数表达式和具名函数的区别是,函数表达式的调用需要先声明,再调用,具名函数可以任意位置调用。
9.2立即执行函数
10.逻辑中断
总结
学完这部分的知识点之后,大家对js的基础知识已经有一定的了解了,JS的基础知识还剩下最后一篇,学完接下来就可以学习JS的API相关知识啦!开头的鸡汤你喝了吗?喝完继续肝!