(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)
目录
一.运算符
1.1 赋值运算符
1.2 一元运算符
自增运算符的用法:
1.3 比较运算符
比较运算符的介绍
比较运算符的细节
1.4 逻辑运算符
1.5 运算符优先级
二.语句
2.1 表达式和语句
2.2 程序三大流程控制语句
顺序结构
分支结构
循环结构
2.3 分支语句
if语句
单分支使用语法:
双分支if语法:
多分支if语法:
三元运算符
switch语句
2.4 循环结构
断点调试
while循环
1. while 循环基本语法:
2. while 循环三要素:
循环退出
一.运算符
1.1 赋值运算符
目标: 能够使用赋值运算符简化代码
赋值运算符:对变量进行赋值的运算符已经学过的赋值运算符:= 将等号右边的值赋予给左边, 要求左边必须是一个容器
其他赋值运算符:
+=
-=
*=
/=
%=使用这些运算符可以在对变量赋值时进行快速操作
以前我们让一个变量加 1 如何做的?
现在我们有一个简单的写法啦~~~
1.2 一元运算符
众多的 JavaScript 的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符
二元运算符:
例:
一元运算符:
例: 正负号目标: 能够使用一元运算符做自增运算
自增:
符号:++
作用:让变量的值 +1
自减:
符号:--
作用:让变量的值 -1
使用场景:经常用于计数来使用。 比如进行10次操作,用它来计算进行了多少次了
自增运算符的用法:
前置自增:
每执行1次,当前变量数值加1
其作用相当于 num += 1后置自增:
每执行1次,当前变量数值加1
其作用相当于 num += 1
前置自增和后置自增单独使用没有区别
如果参与计算就有区别:
前置自增:先自加再使用(记忆口诀:++在前 先加)
后置自增:先使用再自加(记忆口诀:++在后 后加)
思考:
答案为7,因为i先后置++变成2,然后又前置++变成3,所以原式为:1+3+3=7
1.3 比较运算符
比较运算符的介绍
比较运算符具有隐式转换的特点,可以将字符型转换为数字型
使用场景:比较两个数据大小、是否相等
> : 左边是否大于右边
<: 左边是否小于右边
>=: 左边是否大于或等于右边
<=: 左边是否小于或等于右边
==: 左右两边值是否相等
===: 左右两边是否类型和值都相等
!==: 左右两边是否不全等
比较结果为boolean类型,即只会得到 true 或 false对比:
= 单等是赋值
== 是判断
=== 是全等
开发中判断是否相等,强烈推荐使用 ===(可以避免隐式转换带来的问题)
比较运算符的细节
字符串比较,是比较的字符对应的ASCII码
从左往右依次比较
如果第一位一样再比较第二位,以此类推NaN不等于任何值,包括它本身
涉及到"NaN“ 都是false
尽量不要比较小数,因为小数有精度问题
1.4 逻辑运算符
1.5 运算符优先级
一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
二.语句
2.1 表达式和语句
表达式:
表达式是可以被求值的代码,JavaScript 引擎会将其计算出一个结果。语句:
语句是一段可以执行的代码。
比如: prompt() 可以弹出一个输入框,还有 if语句 for 循环语句等等区别:
表达式:因为表达式可被求值,所以它可以写在赋值语句的右侧。
表达式 num = 3 + 4
语句:而语句不一定有值,所以比如 alert() for和break 等语句就不能被用于赋值。
语句 alert() 弹出对话框 console.log() 控制台打印输出
某些情况,也可以把表达式理解为表达式语句,因为它是在计算结果,但不是必须的成分 (例如continue语句)
2.2 程序三大流程控制语句
顺序结构
以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构
分支结构
有的时候要根据条件选择执行代码,这种就叫分支结构
循环结构
某段代码被重复执行,就叫循环结构
2.3 分支语句
分支语句可以让我们有选择性的执行想要的代码
分支语句包含:
If分支语句
三元运算符
switch 语句
if语句
if语句有三种使用:单分支、双分支、多分支
单分支使用语法:
括号内的条件为true时,进入大括号里执行代码
小括号内的结果若不是布尔类型时,会发生隐式转换转为布尔类型
如果大括号只有一个语句,大括号可以省略,但是,俺们不提倡这么做~
双分支if语法:
<!-- 需求:用户输入,用户名:pink,密码:123456, 则提示登录成功,否则提示登录失败
分析:
①:弹出输入框,分别输入用户名和密码
②:通过if语句判断,如果用户名是pink,并且密码是123456,则执行if里面的语句,否则执行else
里面的语句。 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let uname = prompt('请输入用户名:')
let pwd = prompt('请输入密码:')
if(umame === 'zxc'&& pwd==='123456')
{
alert('恭喜登陆成功')
}
else
{
alert('用户名或者密码错误')
}
</script>
</body>
</html>
多分支if语法:
<!-- 需求:根据输入不同的成绩,反馈不同的评价
注:
①:成绩90以上是 优秀
②:成绩70~90是 良好
③:成绩是60~70之间是 及格
④:成绩60分以下是 不及格 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let score = +prompt('请输入成绩')
if(score>=90)
{
alert('优秀')
}
else if(score>=70)
{
alert('良好')
}
else if(score>=60)
{
alert('及格')
}
else
{
alert('不及格')
}
</script>
</body>
</html>
三元运算符
符号:? 与 : 配合使用
<!-- 需求:用户输入2个数,控制台输出最大的值
分析:
①:用户输入2个数
②:利用三元运算符输出最大值 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num1 = +prompt('第1个数')
let num2 = +prompt('第2个数')
// if(num1>num2)
// {
// alert(num1)
// }
// else
// {
// alert(num2)
// }
num1>num2?alert(num1):alert(num2)
</script>
</body>
</html>
switch语句
释义:
找到跟小括号里数据全等的case值,并执行里面对应的代码
若没有全等 === 的则执行default里的代码注意事项:
1. switch case语句一般用于等值判断,不适合于区间判断
2. switch case一般需要配合break关键字使用 没有break会造成case穿透
2.4 循环结构
断点调试
作用:学习时可以帮助更好的理解代码运行,工作时可以更快找到bug
浏览器打开调试界面
1. 按F12打开开发者工具
2. 点到sources一栏
3. 选择代码文件
断点:在某句代码上加的标记就叫断点,当程序执行到这句有标记的代码时会暂停下来
while循环
1. while 循环基本语法:
释义:
跟if语句很像,都要满足小括号里的条件为true才会进入 循环体 执行代码
while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件,直到括号内条件不满足,即跳出
2. while 循环三要素:
1. 变量起始值
2. 终止条件(没有终止条件,循环会一直执行,造成死循环)
3. 变量变化量(用自增或者自减)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.变量的起始值
let i = 1
//2.终止条件
while(i<=3)
{
document.write('循环三次<br>')
//3.变量的变化量
i++
}
</script>
</body>
</html>
网页显示为:
循环退出
循环结束:
break:退出循环
continue:结束本次循环,继续下次循环
区别:
continue 退出本次循环,一般用于排除或者跳过某一个选项的时候, 可以使用continue
break 退出整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用