JavaScript(02)

102 阅读3分钟

题目讲解:

屏幕截图 2022-03-27 084547.jpg 补充: 浏览器控制台可以输入验证代码

运算符

​ 包括 加、减、乘、除、求余 (取模)

代码演示:

<script>
      // 算术运算符 加减乘除 求余 取模

      // let num1 = 10;
      // let num2 = 2;

      // // 加法
      // console.log(num1 + num2); // 12
      // // 减法
      // console.log(num1 - num2); // 8
      // // 乘法
      // console.log(num1 * num2); // 20
      // // 除法运算
      // console.log(num1 / num2); // 5

      // // 求余=取模   获得整数
      // // 除法运算 获取除法元素后 剩下余数
      // console.log(10 % 5);
      // console.log(10 % 3);
    </script>
  </body>

如果一行内,出现了多个算数运算符

先乘除后加减 如果有括号 就先算括号

代码:

console.log(1 + 1 * 2);
console.log((1 + 1) * 2);

如果一行内 确实有很多个 算术运算符 都建议按照自己的想法来加括号

代码:

 console.log(1 + (2 * 3 + 3) / 4 + 4 * 4 + 5);

案例圆的面积:

赋值运算符

​ 代码演示:

<body>
    <script>
      // let num =1 ;
      // num = num + 1;
      // console.log(num); // 2

      // let num = 1;
      // // num += 1;
      // num += 3;
      // console.log(num); // 4

      let num = 10;

      // num -= 2;
      // num *= 2;
      // num /= 2;
      // num %= 2;
      console.log(num); // 8
    </script>
  </body>

一元运算符:

重要: 1 前置自增和后置自增单独使用没有区别

​ 2 工作中,基本都是单独使用

前置自增:

先自加再使用(记忆口诀:++在前 先加)

屏幕截图 2022-03-27 101228.jpg

代码:

// //  难点
      // let i = 1;
      // // console.log(++i + 2); // 4

      // // 先自加  再使用
      // i = i + 1;
      // console.log(i + 2);
后置自增:

先使用再自加 (记忆口诀:++在后 后加)

屏幕截图 2022-03-27 101350.jpg

代码:

// // 难点
      // let i = 1;
      // console.log(i++ + 2); // 3

      // // 1 先执行
      // console.log(i + 2); // 3
      // // 2 使用是后置自增
      // i = i + 1;

      // console.log(i); // 2

代码演示:

<body>
    <script>
      //let num =1 ;
      // // ++num;
      // // num++;
      // // 1 都可以理解为  num = num + 1
      // // 2
      // console.log(num);

      
      // let i = 1;

      // console.log(i++);

      // console.log(i); // 2

      // console.log(++i); // 前置 先加加 再计算结果
      // // i = i + 1; // i = 3
      // // console.log(i);

      // let i =1;

      // 在工作中,基本都是  i++ 或者 ++i 独立使用
      

      let i = 5;

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

      console.log(i--); //  打印的结果是 4

      console.log(i); // 3 
    </script>
  </body>

比较运算符:

​ Boolean类型

屏幕截图 2022-03-27 110524.jpg

代码演示:

<script>
      //  比较后的结果 其实是一个 bool类型 true , false

      console.log(3 > 10); // 打印什么结果 false
      console.log(3 > 1); //  true

      console.log(3 < 10); //  true
      console.log(3 < 3); // false

      console.log(3 <= 3); // 小于或者等于 3

      

=、==只会判断值 而不会判断类型

代码:

// 判断是否相等 要用 两个 "="  号
      console.log(3 == 2); // false
// let num = 4;
      // num = 5; // 只写一个等于号 赋值
      // console.log(num == 5); // 两个等于号才是判断

// 拿数字和字符串比较
      console.log(3 == '3'); // true  因为两个 == 只会判断值 而不会判断类型
	  console.log(3 === '3'); //  flase  3个等于号  既要判断类型 也要判断值
	  console.log(3 === 3); // true

=== 既要判断类型 也要判断值

代码

 console.log(3 === '3'); //  flase  3个等于号  既要判断类型 也要判断值

!=

代码:

// 判断 3 不等于 5
      // console.log(3!=5); // !=  不等于
 	  console.log(3 != 3); // false
      console.log(3 != '3'); // false

!==(既要判断类型 也要判断值)

代码:

console.log(3 !== '3'); // true
字符串比较:

了解:字符串大小比较,先把字符串转数字再比较

​ 代码:

对于字符串做比较 更多是判断两者是否相等
      // console.log('A' === 'B');
 console.log('A' > 'B'); // 81 > 82
 console.log('斌斌' > '万旺');

补充:

​ 1 NaN不等于任何值,包括它本身

代码:

// NaN = A    ||    NaN = B
      console.log(NaN === NaN); // false 不能以为 两者代码一样就相等 (不是一个数字    )

​ 2 尽量不要比较小数,因为小数有精度问题

代码:

// js 处理小数 有问题 后面会补充 精度的问题!!
      console.log(0.4 + 0.2 === 0.6);

​ 3 不同类型之间比较会发生隐式转换

// 类型转换
      // console.log(4 > '3');
      console.log(4 > Number('3'));

总结:

​ ===推荐使用

逻辑运算符:

屏幕截图 2022-03-27 115128.jpg

演示代码:

 <body>
    <script>
      /*
      有个数据  大于5 而且 小于 10
       */
      let num = 6;

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

      console.log(num > 5 && num < 4); // 一假则假  false

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

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

      let gender = true; // true 男生

      console.log(gender); // true 
      console.log((!gender));  // 取反了 false 
    </script>
  </body>
短路:
逻辑与

​ 一假则假 && 左边为false 右边就不再去执行

代码演示:

console.log(2 > 10 && 1 < 3 && 3 > 1 && 9 > 5 && 5 < 10 && 8 > 2)

工作中常见写法:

	 // 如果今天还下雨 那我就去吃海鲜
      //   不下雨 不去吃海鲜了
      // let rain = false;

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

一真则真

只要|| 左边 成立为true,右边就不再去执行

代码演示:

console.log(100 > 3 || 2 > 6 || 9 > 10 || 10 > 11 || 13 > 20);

工作中常见写法:

	// 如果下雨,那么我就不玩了
      let rain = false;
      rain || console.log('去玩');

总结:

逻辑与 满足了 就去执行

逻辑或 不满足 就去执行

==========================================

undefind 如果 转换成布尔类型 其实是个false

哪些值转换成布尔类型后 为false

undefined null 0 "" false NaN

代码:

<script>
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('') );
    </script>

课堂案例:

微信图片_20220327153629.png

 <script>
	let num = +prompt("请输入一个整数");
// console.log( (4 % num === 0) && (100 % num ===0)    );
=============================================
 // 判断一个数是4的倍数,且不是100的倍数  
      console.log( (num % 4 === 0) && (num % 100 !==0)    );
</script>

补充知识:

/* 
        若整数b除以非零整数a,商为整数,且余数 为零,b为被除数,a为除数  , 读作“a整除b”或“b能被a整除
         b  / a 
        被除数 / 除数 
        b能被a整除
        a整除b
        num / 4    num / 100
        4的倍数 或者    100的倍数 
        (num % 4 == 0) &&  ( num % 100 !== 0)
  */

运算符优先级

屏幕截图 2022-03-27 154510.jpg

表达式和语句

表达式:

语句:

分支语句:

if分支语句

三种使用:单分支、双分支、多分支

单分支使用语法:

屏幕截图 2022-03-27 160645.jpg

代码演示:

<script>
      let score = +prompt('请输入您的分数');

      // if 单分支
      if (score > 700) {
        alert('恭喜你 来啦');
      }
    </script>
双分支使用语法:

屏幕截图 2022-03-27 161309.jpg

代码演示:

<body>
    <script>
      let score = +prompt('考试的分数');

      if (score > 700) {
        alert('nice');
      } else {
        alert('so bad');
      }
    </script>
  </body>
多分支使用语法:

屏幕截图 2022-03-27 162304.jpg

代码演示:

<body>
<script>
      // let day = 1;

      let day = +prompt('请输入今天是星期几');

      if (day === 1) {
        console.log('煲仔饭');
      } else if (day === 2) {
        console.log('生猛海鲜');
      } else if (day === 3) {
        console.log('烤全羊');
      } else if (day === 4) {
        console.log('吃牢饭');
      } else if (day === 5) {
        console.log('软饭');
      } else {
        //  6 7 ........
        console.log('白饭');
      }
    </script>
  </body>
三元运算符

语法:

屏幕截图 2022-03-27 165104.jpg

代码演示:

<body>
    <script>
let num1 = 10;
let num2 = 99;
let num3;
num3 = ( (num1 > num2) ? num1 : num2); 

      console.log(num3);
    </script>
  </body>

课堂案例:

判断两个数的最大值:

方法一:

//  if 方式
      let num1 = 10;
      let num2 = 9;

      if (num1 > num2) {
      console.log('num1 要大于 num2 ');
      console.log(num1);
      } else {
      console.log('num2 要大于或者等于 num1 ');
      console.log(num2);
      }

方法二:

// 三元表达式
      num1 > num2 ? console.log(num1) : console.log(num2);

      let num1 = 10;
      let num2 = 99;

      let num3; // 就要等于 num1 和 num2 中 大的值

      num3 = ( (num1 > num2) ? num1 : num2); 

      console.log(num3);
数字补0案例:

方法一:

<body>
    <script>
 let num = +prompt('请输入时间');
 let strNum = num < 10 ? '0' + num : num;
console.log(strNum);
 </script>
  </body>

​ 方法二:

<body>
    <script>
let strNum;
      if (num < 10) {
        strNum = '0' + num;
      } else {
        strNum = num;
      }

      console.log(strNum);
    </script>
  </body>
简易计算器案例:

注意:在prompt前面加上隐式转换

 <body>
    <script>
 let num1 = +prompt('请输入第一个数字');
      let num2 = +prompt('请输入第二个数字');
      let operator = prompt('请输入 "+" "-"  "*"  "/ " 任意一种');

      // 判断当前的操作符 是什么
      if (operator === '+') {
        console.log(num1 + num2);
      } else if (operator === '-') {
        console.log(num1 - num2);
      } else if (operator === '*') {
        console.log(num1 * num2);
      } else if (operator === '/') {
        console.log(num1 / num2);
      }
    </script>
  </body>