👀 这是我参与「第四届青训营 」笔记创作活动的的第5天！

---

这是一篇非常适合小白一起学习的文章，都是非常基础的知识。  😀😁😀😁😀😁

---

🍻1、JavaScript运算符

运算符也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常见的运算符有：

• 👀算数运算符

• 👀递增和递减运算符

• 👀比较运算符

• 👀逻辑运算符

• 👀赋值运算符

🍻1.1、JavaScript算数运算符

概念： 算术运算符对数值（文字或变量）执行算术运算。

运算符	描述	实例
+	加	10+20=30
-	减	10-20=-10
*	乘	10*20=200
/	除	10/20=0.5
%	取余数（取模）	返回除法得余数9%2=1

注意：浮点数相加会有精度问题。我们不能用浮点数来进行比较 是否相等(js中浮点数是由64位固定长度表示的，所以数字存入内存中时有可能出现精度缺失的情况： 如 0.1 转化为二进制是一个无限循环数0.0001100110011001100......(1100循环)，由于只能存入64位，就造成了精度缺失。 )

示例：

console.log(0.1+0.2)
console.log(0.07*100)
var num=0.1+0.2
console.log(num==0.3)

🍻1.2、JavaScript中的表达式

• JS中的表达式是由数字,运算符,变量等求的数值的有意义的排列组合

---

🍻1.3、JavaScript中的返回值

• JS中的返回值是指表达式最终都会有一个结果,这个结果最终会返回给使用者,这种形式叫返回值.

---

🍻1.4、JavaScript递增和递减运算符

概念： 递增递减就是反复的给数字进行添加1或者减去1。

运算符	说明	案例	结果
++	递增加1	a=0;a++;	1
–	递减减1	a=0;a–;	-1

前置运算和后置运算

var num1=10;
var num2=10;
console.log(num1++); //后置自加，先使用值，再完成自加 结果10
console.log(++num2); //前置自加，先完成自加，再使用值 结果11

注意：递增和递减必须配合变量使用。

---

👀前置递增和后置递增小结：

---

🍻1.5、JavaScript比较运算符

概念: 比较运算符主要是针对于两个数据进行比较时所使用的运算符,比较的结果返回一个布尔值(true/false)作为比较运算的结果

运算符名称	说明	案例	结果
<	小于号	1<2	true
大于号		1>2	false
>=	大于等于号(大于或者等于)	2>=2	true
<=	小于等于号（小于或者等于）	3<=2	false
==	比较数据是否相等（会转型）	37==37	true
!=	不等号	37!=37	flase
===	全等 要求值和数据类型都要一致	37==='37'	flase
!==	数据值或者类型有一方不相同结果都为true	37!=='37'	true

注意： =,==,===三者之间的区别

• 👀 =:赋值符号,将等号右边的值赋给左边
• 👀 ==:比较判断符号,比较左右两边的数据是否相等(注意此时有隐式转换)
• 👀===:判断等号两边的数据是否相等并且数据类型是否也相同

🍻1.5、JavaScript逻辑运算符

概念： 逻辑运算符主要用来进行对布尔值运算的运算符,其最终结果依然是布尔值

---

短路运算(逻辑中断)

所谓逻辑中断就是多个表达式进行逻辑运算,前面的表达式很有可能会影响到后面表达式的一个运行结果。

1、逻辑与

• 👀语法：表达式1&&表达式2
• 👀如果第一个表达式的值为真，则返回表达式2
• 👀如果第一个表达式的值为假，则返回表达式1

1、逻辑或

• 👀语法：表达式1||表达式2
• 👀如果第一个表达式的值为真，则返回表达式1
• 👀如果第一个表达式的值为假，则返回表达式2

实例

var num1=10;
var num2=10;
console.log(num1++>10&&++num2>10);
// 结果是false。
//逻辑与运算，只要前面的运算符为false
//则后面的直接不需要判断，结果肯定为false
//所以后面的就不需要执行了.所以为10
console.log(num1)  //11
console.log(num2)  //10

🍻1.6、JavaScript赋值运算符

概念： 赋值运算符是用来将计算好的数据再次赋值给变量的运算符。

运算符	说明	实例
=	直接赋值	var a=10;
+= ,-=	(加/减)运算之后赋值	var a=10; a+=5; a结果是15
*=，/=,%=	(乘、除、取余)运算之后赋值	var a=5; a%=2; a结果是1

三元（三目）运算符

三元运算符语法

表达式?表达式1:表达式2;

三元运算符执行思路:

如果表达式的结果为true的话,那么返回就返回表达式1的值,如果表达式的结果是false的话,那么就返回表达式2的值。

🍻1.7、JavaScript运算符优先级

---

、

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

---

🍻2、JavaScript流程控制

🍻2.1、流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解： 流程控制就是来控制我们的代码按照什么结构顺序来执行 流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

🍻2.2、顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

🍻2.3、 分支流程控制

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。

JS 语言提供了两种分支结构语句，if 语句和switch 语句。

🍻2.3.1、if语句

语法结构

执行流程

🍻2.3.2、if else语句（双分支语句）

语法结构

执行流程

🍻2.3.3、if else if 语句(多分支语句)

语法结构

执行流程

🍻2.3.4、switch 语句

语法：

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 

代码解释：

• 👀计算一次 switch 表达式
• 👀把表达式的值与每个 case 的值进行对比
• 👀如果存在匹配，则执行关联代码

---

🍻2.3.5、switch 语句和 if else if 语句的区别

• 👀一般情况下，它们两个语句可以相互替换

• 👀 switch…case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)

• 👀switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。

• 👀 当分支比较少时，if… else语句的执行效率比 switch语句高。

• 👀 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

🍻2.4、循环流程控制

循环目的

在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。

JavaScript中的循环

🍻2.4.1、for循环

在程序中，一组被重复执行的语句被称为循环体，而能否继续重复执行，则取决于循环的终止条件。

循环语句是指由循环体和循环的终止条件造成的句子。

for循环主要用于把某些代码循环若干次，通常跟计数有关系。

//for循环的语法结构如下：
for(初始化变量;条件表达式;操作表达式){
  //循环体
}
//初始化变量：其实就是用var声明一个普通的变量，并且这个变量通常是作为计数器使用。
//条件表达式：用来决定每一次循环是否继续执行，也就是循环的终止条件。
//操作表达式：每次循环最后执行的代码，经常用于更新计数器（递增或递减）。

• 👀for循环可以重复执行相同的代码。
• 👀因为有计数器的存在，使用for循环可以重复执行不同代码。

九九乘法表的案例：

代码如下：

var str=''
for(var i=1;i<=9;i++)
{
    for(var j=1;j<=i;j++)
    {
        str+=j+"×"+i+'='+i*j+'  '
    }
    str+='\n';
}
console.log(str);

结果如下：

循环嵌套

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构。像在一个for循环语句中， 再嵌套一个for循环，我们就称之为双重for循环。

for(var i = 1; i <= 3; i++){
  console.log('这是第'+i+'次外层循环');
  for(var j = 1; j <= 3; j++){
    console.log('这是第'+i+'次里层循环');
  }
}

🍻2.4.2、while 循环

while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。

while语句的语法结构如下：

执行思路：

先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码 执行循环体代码 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束。

注意： 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环 while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码。

代码如下：

var names=prompt('输入用户名');
var nums=prompt('输入密码');
while(names!='admin' && nums!='123456')
{
    names=prompt('输入用户名');
    nums=prompt('输入密码');
}
alert('登陆成功');

结果如下：

🍻2.4.3、do while 循环

do…while语句其实是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。（do while循环语句至少执行一次循环体代码）

//do while语句的语法结构如下：
do{
  //循环体代码
}while(条件表达式);

🍻2.4.4、循环总结

• 👀三种循环在很多情况下都是可以相互替代使用的。

• 👀对于计数，三者的使用基本相同，但是更常用的还是for循环。

• 👀对于更复杂的判断条件，可以使用while和do while语句。

• 👀while语句是先判断后执行；而do while是先执行一次后判断执行

🍻3、continue和break

🍻3.1、continue关键字

continue关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次）。

代码如下：

var sum = 0;
for(var i = 1; i <= 100; i++){
  if(i % 7 == 0){
    continue;
  }
  sum+=i;
}
console.log(sum);

结果如下：

🍻3.2、break关键字

break关键字用于立即跳出整个循环。

代码如下：

for(var i = 1; i <=5; i++){
  if(i == 3){
    break;
  }
  console.log('这是第'+i+'个数！');
}

结果如下：

🍻4、案例

**简易ATM：**要求如下

代码如下：

var flag=1;
var money=100;
while(flag)
{
var n=prompt('请输入您要的操作:'+'\n'+'1、存钱'+'\n'+'2、取钱'+'\n'+'3、显示余额'+'\n'+'4、退出'+'\n');
switch(parseInt(n))
{
    case 1: var money1=prompt('输入钱数：');  money+=parseInt(money1); alert(money);break; 
    case 2: var money2=prompt('输入取钱数：');  money-=money2; alert(money);break;
    case 3: alert(money);break;
    case 4: alert('退出'); flag=0;break;
    default: alert('输入错误，请重新输入');
}
}

运行结果如下：

🍻5、总结

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈

今日的JavaScript基础知识学习就到此为止了，虽然是这两天的内容很简单，但是还是从中发现了很多自己的知识盲区，我也希望大家可以重视基础，一起进步，这篇文章是非常适合小白学习的，我们一起努力学习，成为更好的自己，每天进步一点点。！！！

🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈