js基础知识点

js基础知识点
js基础第二天
运算符

1.算术运算符
数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。
+：求和
-：求差
*：求积
/：求商
%：取模（取余数）
取余在开发中经常作为某个数字是否被整除
同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。
JavaScript中 优先级越高越先被执行，优先级相同时以书从左向右执行。
乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级
总结： 先乘除后加减，有括号先算括号里面的~~~

算术运算符小结:

1. 算术运算符有那几个常见的？
   _ * / % +
2. 算术运算符优先级怎么记忆？
   先乘除取余，后加减，有小括号先算小括号里面的
3. 取余运算符开发中的使用场景是？
   来判断某个数字是否能被整除

2.赋值运算符
赋值运算符：对变量进行赋值的运算符
已经学过的赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个容器
其他赋值运算符：
+=
-=
*=
/=
%=
使用这些运算符可以在对变量赋值时进行快速操作
例:

等价于:

赋值运算符总结:

1. = 赋值运算符执行过程？
   将等号右边的值赋予给左边, 要求左边必须是一个容器
2. += *= 出现是为了简化代码, 比如让 let num = 10 ， num 加5
   怎么写呢？
   num += 5

3.一元运算符
众多的 JavaScript 的运算符可以根据所需操作数的个数，分为一元运算符、二元运算符、三元运算符
二元运算符：
例：let num = 10 + 20
一元运算符：
例： 正负号

自增：
符号：++
作用：让变量的值 +1
自减：
符号：- -
作用：让变量的值 -1
使用场景：
经常用于计数来使用。 比如进行10次操作，用它来计算进行了多少次了

自增运算符的用法：
前置自增：

每执行1次，当前变量数值加1
其作用相当于 num += 1

后置自增:

每执行1次，当前变量数值加1
其作用相当于 num += 1
前置自增和后置自增单独使用没有任何区别

前置自增和后置自增参与运算有区别:(难点)
前置自增:

前置自增：先自加再使用（记忆口诀：++在前 先加）

后置自增：

后置自增：先使用再自加（记忆口诀：++在后 后加）

自增运算符的用法：

1. 前置自增和后置自增独立使用时二者并没有差别！
2. 一般开发中我们都是独立使用
3. 后面 i++ 后置自增会使用相对较多

1.只需要一个表达式就可以运算的运算符叫一元运算符
2. 自增运算符也是为了简化写法，每次自加1，使用场景是什么？
经常用于计数来使用。用来计算多少次
2.前后置自增的区别
前置：先自增后运算
后置：先运算后自增
自减同理…
开发中，我们一般都是单独使用的，后置++ 使用更多

面试题:
let i = 1
// 1 3 3
console.log(++i + i++ + i)

let i = 10
// 10 11 12
console.log(i++ + i++ + i++)
console.log(i)
// 14 15 16
console.log(++i + ++i + ++i)

4.比较运算符
比较运算符的介绍
作用：比较两个数据大小、是否相等

比较运算符的使用
比较运算符：

： 左边是否大于右边
< ： 左边是否小于右边
=： 左边是否大于或等于右边
<=： 左边是否小于或等于右边
==：左右两边是否相等
!= : 左右两边是否不相等
=： 左右两边是否类型和值都相等
!： 左右两边是否不全等
比较结果为boolean类型，即只会得到true或false

比较运算符的细节
字符串比较，是比较的字符对应的ASCII码
从左往右依次比较
如果第一位一样再比较第二位，以此类推
比较的少，了解即可
NaN不等于任何值，包括它本身
尽量不要比较小数，因为小数有精度问题
不同类型之间比较会发生隐式转换
最终把数据隐式转换转成number类型再比较
所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==

比较运算符总结
= 和 == 和 === 怎么区别？
= 是赋值
== 是判断 只要求值相等，不要求数据类型一样即可返回true
=== 是全等 要求值和数据类型都一样返回的才是true
开发中，请使用 ===
比较运算符返回的结果是什么？
结果只有2个， true 或者 false

5.逻辑运算符
逻辑运算符：
符号 名称 日常读法 特点 口诀

&& 逻辑与 并且 符号两边都为true结果才为true 一假则假

|| 逻辑或 或者 符号两边有一个true就为true 一真则真

! 逻辑非 取反 true变falsefalse变true 真变假 假变真

逻辑运算符里的短路
短路：只存在于 && 和 || 中 ,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
符号 短路条件
&& 左边为false就短路
|| 左边为true就短路

逻辑运算符里的短路运算规则
逻辑与短路运算规则：
① 如果符号左边为false，符号右边就不执行了，则会得到左边的
② 如果符号左边为true，符号右边要继续执行，则会得到右边的
逻辑或运算规则：
① 如果符号左边为false ，符号右边要继续执行，则会得到右边的
② 如果符号左边为true，符号右边就不执行了，则会得到左边的

逻辑运算符总结:

1. 逻辑运算符有哪三个？
   与(&&) 或(||) 非(!)
2. 逻辑与的短路运算规则是什么？
   如果左边的表达式的值是false，则会得到左边表达式的结果
   如果左边的表达式的值是true， 则会得到右边表达式的结果
3. 逻辑或的短路运算规则是什么？
   如果左边的表达式的值是false，则会得到右边表达式的结果
   如果左边的表达式的值是true， 则会得到左边表达式的结果

6.运算符优先级
优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ – !
3 算数运算符 先*/% 后±
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先&&后||
7 赋值运算符 =
8 逗号运算符 ,

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

语句

表达式和语句

表达式和语句的区别
表达式：
表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果

语句：
js 整句或命令，js 语句是以分号结束（可以省略）
比如： if语句 for 循环语句

区别：
表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)
表达式 3 + 4
语句 alert() 弹出对话框
其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事

表达式和语句的区别
表达式计算出一个值 比如 3+5 x = 7
语句用来自行以使某件事发生(做什么事)
alert()
console.log()
还比如我们接下来学的分支语句…

分支语句
程序三大流程控制语句
以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
有的时候要根据条件选择执行代码，这种就叫分支结构
某段代码被重复执行，就叫循环结构
什么是流程控制：指“程序怎么执行”或者说“程序执行的顺序”

分支语句包含：
if分支语句
if语句有三种使用：单分支、双分支、多分支
单分支语句是根据判断条件的结果（真或假）从而决定是否执行大括号里面的代码
单分支使用语法：
if (条件) {
满足条件执行的代码
}
小括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

if语句单分支总结:

1. if语句单分支的语法是什么？
   if (条件) {
   满足条件执行的代码
   }
2. if语句什么情况下才会执行大括号里面的代码块？
   小括号内的条件为true时，进入大括号里执行代码

双分支语句是根据判断条件的结果（真或假）从而决定执行哪一个大括号里面的代码
双分支if语法：if (条件) {
满足条件执行的代码
}else {
不满足条件执行的代码
}
else可以理解为否则

if双分支语句总结:

1. if语句双分支的语法是什么？
   双分支if语法：if (条件) {
   满足条件执行的代码
   }else {
   不满足条件执行的代码
   }

if多分支语句语法：
if (条件) {
代码1
}else if (条件) {
代码2
}else if (条件) {
代码3
}else {
代码n
}

执行流程：
先判断条件1，若满足条件1就执行代码1，其他不执行
若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
若依然不满足继续往下判断，依次类推
若以上条件都不满足，执行else里的代码n
注：可以写N个条件，但这里演示只写2个

if语句多分支总结:

1. if语句多分支的语法是什么？
   if多分支语句语法：
   if (条件) {
   代码1
   }else if (条件) {
   代码2
   }else if (条件) {
   代码3
   }else {
   代码n
   }

三元运算符
其实是比 if 双分支 更简单的写法，有时候也叫做三元表达式
符号：? 与 : 配合使用
语法：
条件 ? 满足条件执行的代码 : 不满足条件执行的代码
一般用来取值

三元运算符总结:

1. 三元运算符的语法是什么？
   条件 ? 满足条件执行的代码 : 不满足条件执行的代码

案例
2.2.2 三元运算符
数字补0案例
需求：用户输入1个数，如果数字小于10，则前面进行补0， 比如 09 03 等
分析：
①：为后期页面显示时间做铺垫
②：利用三元运算符 补 0 计算

答案:
let num = +prompt(‘请输入一个数字’)
// 如果num<10 则执行 0+num 否则执行num
let res = num < 10 ? 0 + num : num
console.log(res)

switch 语句

switch (数据) {
  case 值1:
    代码1
    break
  case '值2':
    代码2
    break
  default:
    代码n
   break｝

释义：
找到跟小括号里数据全等的case值，并执行里面对应的代码
若没有全等 === 的则执行default里的代码
例：数据若跟值2全等，则执行代码2
注意事项

1. switch case语句一般用于等值判断,不适合于区间判断
2. switch case一般需要配合break关键字使用 没有break会造成case穿透

switch总结:

1. switch的语法是什么？
   switch (数据) {
   case 值1:
   代码1
   break
   case ‘值2’:
   代码2
   break
   default:
   代码n
   break
   }
2. switch小括号里数据与case后面的值是作全等比较吗？
   对，是全等比较
3. switch语句一般是否需要配合break关键字吗？
   需要

分支语句总结:

1. 程序三大流程控制
   顺序
   分支
   循环
2. if语句
   三种形式
3. switch语句
   全等判断
   break：结束switch语句，防止穿透
4. 三元运算符
   也是双分支
   一般用来取值

循环语句
1.断点调试
作用：学习时可以帮助更好的理解代码的执行流程，工作时可以更快找到bug
断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来
浏览器打开调试界面

1. 按F12打开开发者工具
2. 点到sources或者来源一栏
3. 选择代码文件，设置断点
   目标： 掌握断点调试方法，学会通过调试检查代码
   注意事项
   设置断点后一定要重新刷新浏览器才能观察到最新的执行流程

2.while循环

循环：重复执行某段代码， 而 while : 在…. 时候

1. while 循环语法：
   while (循环条件) {
   要重复执行的代码(循环体)
   }

释义：
跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到
小括号判断条件，直到括号内条件不满足，即跳出

2. while 循环注意事项：
   循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。
   所以，循环需要具备三要素：
3. 变量起始值
4. 终止条件（没有终止条件，循环会一直执行，造成死循环）
5. 变量更新（用自增或者自减)

let i = 1
while (i <= 3) {
document.write (‘我会循环3次’)
i++
}

while总结:

1. while循环的语法是什么？

while (循环条件) {
要重复执行的代码(循环体)
}

2. 循环需要哪三个要素？
3. 变量起始值
4. 终止条件
5. 变量变化量