分享Js小基础（3）

流行奶黄包
209 阅读5分钟

运算符

一、算术运算符

1、数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。 +：求和 -：求差 *：求积 /：求商 %：取模（取余数）
开发中经常作为某个数字是否被整除

  <script>
    // 算术运算符
    let num1 = 10;
    let num2 = 2;

    //算术运算符 加 减 乘 除 求余
    
    // 1.加法
    console.log(num1 + num2)
    // 2.减法
    console.log(num1 - num2)
    // 3.乘法
    console.log(num1 * num2)
    // 4.除法
    console.log(num1 / num2)
    // 4.求余=取模 获得整数
    //出发运算 获得出发元素后 剩下的余数   
    console.log(10 % 2 ) //整数 5
    console.log(10 % 3)  //余数 1
    </script>
  </body>

2、JavaScript中 优先级越高越先被执行，优先级相同时以书从左向右执行。 乘、除、取余优先级相同 加、减优先级相同 乘、除、取余优先级大于加、减 使用 () 可以提升优先级 总结： 先乘除后加减，有括号先算括号里面的~~~

1648345625842.png

算术运算符案例：

计算圆的面积

 <script>
      // π *  r的平方

      // 在js中 通过什么来代表 π : 
      
      //Math.PI
      // console.log(Math.PI);

      let r = prompt('请输入圆的半径');

      console.log('圆的面积是: ' + Math.PI * r * r);
    </script>

二、赋值运算符

赋值运算符：对变量进行赋值的运算符 已经学过的赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个变量 其他赋值运算符：+= 、*= 、 /= 、 %=

1、以前我们让一个变量加 1 如何做的？

1648386258727.png 2、现在我们有一个简单的写法啦~~~

1648386296393.png

三、一元运算符

使用一元运算符做自增运算 1、自增： 符号：++ 作用：让变量的值 +1 2、自减： 符号：-- 作用：让变量的值 -1

1648388917449.png

前后自增加案例：

1648390333380.png

<script>  
  let i = 1
  console.log(i++);

  console.log(i)//打印结果2 然后+1（1是++）

  console.log(++i);//前置先加加在计算结果
  i=i+1;//此时i=3
  console.log(i);//打印结果3
 </script>

自减案例：

 <script>
        
        let i=5;

        console.log(--i);//4

        console.log(i--);//打印的结果是4 先输出再减

        console.log(i);//4-1=3
    </script>

四、比较运算符

作用：比较两个数据大小、是否相等

比较运算符：

： 左边是否大于右边 <： 左边是否小于右边 =： 左边是否大于或等于右边 <=： 左边是否小于或等于右边 ==； 左右两边是否相等,将两边的数据进行转换为数值 ===： 左右两边是否类型和值都相等 !==： 左右两边是否不全等 比较结果为boolean类型，即只会得到true或false

五、逻辑运算符

1648393853221.png

逻辑与：&&

条件：大于5 而且 小于 10
let num = 6;

      console.log(num > 5 && num < 10); // true

      console.log(num > 5 && num < 4); // 两边都要turn  一假则假  false

逻辑或：||

  // 我有钱包   要不 等于 1块钱  要不就 等于  0

      let money = 1;
      // 一真则真
      console.log(money === 1 ||money === 0); // 只要满足了随便一个条件 那么这个钱包就是我的

逻辑非： ！

  let gender = true; // true 男生
      console.log(gender); // true 
      console.log((!gender));  // 取反了 false
逻辑运算符的短路：

短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

1648394824289.png

常见写法&&

工作中的语法 逻辑与来说 满足了 就去执行

     下雨 就去吃海鲜
	 不下雨 不去吃海鲜了
     let rain = turn;

     左边成立了 右边才会去执行
     rain && console.log('下雨 去吃海鲜');

     下雨 那我就去吃海鲜
     不下雨 不去吃海鲜了
     let rain = false;
     左边不成立，右边不会执行
     rain && console.log('下雨 去吃海鲜');
常见写法||

工作中的语法 逻辑或来说 不满足了 就去执行

      如果下雨，就不玩了
      let rain = false;
	  左边不成立右边执行
      rain || console.log('去玩');

      如果下雨，就不玩了
      let rain = trun;
	  左边成立右边不执行
      rain || console.log('去玩');

   // 我们的 undefined  如果 转换成  布尔类型 其实是个false
      // 哪一些值转成 布尔类型后 false 
      // undefined null 0 空字符串 false  NaN 
      console.log( Boolean(undefined) );
      console.log( Boolean(null) );
      console.log( Boolean(0) );
      console.log( Boolean("") );
      console.log( Boolean(false) );
      console.log( Boolean(NaN) );
      console.log( Boolean('') );

六、运算符优先级

掌握运算符优先级，能判断运算符执行的顺序

1648397187272.png

1648397632981.png

七、语句

一、、表达式

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

1648471701708.png

二、语句

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

表达式和语句的区别：

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

三、分支语句
程序三大流程控制语句

①以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构 ②有的时候要根据条件选择执行代码，这种就叫分支结构 某段代码被重复执行，就叫循环结构

1648472417717.png

1、分支语句

if语句有三种使用语法 ①单分支if语法:

1648472695802.png

注意：括号内的条件为true时，进入大括号里执行代码 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

<script>
    	获取用户一个数值
       let num=+prompt('输入分数')
		如果大于700则输出恭喜你
        if(num>700){
            alert('恭喜你*')
        }
 </script>

②双分支if语法：

1648473833477.png

 <script>
     	获取号码
        let num=+prompt('输入你的号码')
        分析条件
        if(num>10) {
            输入的数字大于10输出
            alert('恭喜中奖')
        }else {
            否则，输入的数字小于10输出
            alert('谢谢参与')
        }  
    </script>

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

1648474986110.png

条件： 由用户输入 第1天 篮球 第2天 桌球 第3天 乒乓球 第4天 羽毛球 第5天 足球

   <script>

        let day=+prompt('输入星期几')
        // 第一个条件满足就执行，不满足就看下面的条件
        if (day===1) {
            alert('篮球')
        }else if(day===2) {
            alert('桌球')
        }else if (day===3) {
            alert('乒乓球')
        }else if (day===4) {
            alert('羽毛球')
        }else if (day===5) {
            alert('足球')
        }else {
            除了输入1-5数字 其他的都是休息 
            alert('休息')
        }
        
    </script>
2、三元运算符

其实是比 if 双分支 更简单的写法，有时候也叫做三元表达式 符号：? 与 : 配合使用 语法：

1648476616770.png

判断2个数的最大值 需求：用户输入2个数，控制台输出最大值

<script>
      1.用if 的方式：
      let num1=+prompt('第一个数字');
      let num2=+prompt('第二个数字');
      if (num1>num2) {
        // num1要比num2大
        alert(num1);
      }else {
        // num2要比num1大
        alert(num2);
      }
    </script>

   <script>
      // 2.用三元表达式
      // num1 > num2 ? console.log(num1) : console.log(num2)
      let num1=+prompt('第一个数字')
      let num2=+prompt('第二个数字')
	  满足条件 num1的值传给num3  不满足num2的值传给num3
      num3=num1>num2?alert(num1):alert(num2)
   </script>
循环结构
一、断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug 浏览器打开调试界面 按F12打开开发者工具 点到sources一栏 选择代码文件 断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

1648532281203.png

二、whlie循环

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

1、while 循环语法：

1648532879993.png

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

2、 while 循环注意事项：

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。 所以，循环需要具备三要素：

1648533023217.png

avatar
文章
阅读
粉丝