JavaScript基础第三天

leilei
180 阅读5分钟

1.运算符

2.语句

运算符

①算数运算符

名称符号作用
加+求和
减-求差
乘*求积
除/求商
余数%取模（取余数）开发中经常作为某个数字是否被整除

算术运算优先级

优先级越高越先被执行，优先级相同时以书从左向右执行。

  • 乘、除、取余优先级相同

  • 加、减优先级相同

  • 乘、除、取余优先级大于加、减

  • 使用 () 可以提升优先级

    总结： 先乘除后加减，有括号先算括号里面的

语法

<script>
        //加、减、乘、除、取余（求模）
        let num1 = 8,
            num2 = 4;

        //加法
        console.log(num1 + num2);//12
        //减法
        console.log(num1 - num2);//4
        //乘法
        console.log(num1 * num2);//32
        //除法
        console.log(num1 / num2);//2

        // 取余 = （求模）
        // 除法运算 获取除法元素后 剩下余数
        console.log(num1 % num2);//0
        console.log(13 % 4);//1

        // 如果一行内 出现了多个算术运算符
        // 先乘除后加减 如果有括号 就先算括号
        console.log(1 + 1 * 2);
        console.log((1 + 1) * 2);

      // 如果一行内 确实有很多个 算术运算符 都建议按照自己的想法来加括号
      console.log(1 + (2 * 3 + 3) / 4 + 4 * 4 + 5);
    </script>

圆的面积

<script>
        //π  * r *r
        //在js中用 Math.PI  来代表 π
        let r = prompt('请输入圆的半径');
        console.log('圆的面积是：' + Math.PI * r * r);
    </script>

②赋值运算符

作用

赋值运算符：对变量进行赋值的运算符

注意： 将等号（运算符）右边的值赋予给左边, 要求左边必须是一个变量

赋值运算符：= += -= *= /= %=

语法

<script>
        // 之前算法
        // let num = 2;
        // num = num + 1;
        // console.log(num); //3

        // 简化算法
        let num = 8;
        num += 2; //10
        num -= 2; //6
        num *= 2; //16
        num /= 2; //4
        num %= 2; //0
        console.log(num);

    </script>

③一元运算符（自增-自减）

作用

类型自增自减
符号++--
作用让变量的值 +1让变量的值 -1

使用场景：经常用于计数来使用。 比如进行10次操作，用它来计算进行了多少次了

在工作中，基本都是 i++ 或者 ++i 独立使用，独立使用没区别，不会很复杂

初学者来说，一些不好的教程 就会 误导大家，故意或者无意拿这些题目来

建议 在初学者阶段 我们要故意避开这些东西！！

语法

<script>
	let i = 5;
	console.log(--i); //  4
	console.log(i--); //  打印的结果是 4
	console.log(i); // 3 
    </script>

自增-自减

前置自增/自减：先输出 i 的值，再算整体

后置自增/自减：先算整体，再输出 i 的值

<script>
	//  难点
	let i = 1;
	console.log(++i + 2); // 4
	//前置先自加  再使用
	//i = i + 1;
    //console.log(i + 2);

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

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

④比较运算符

作用

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

运算符作用注意
左边是否大于右边
<左边是否小于右边
>=左边是否大于或等于右边
<=左边是否小于或等于右边
!=左右两边是否不相等只会判断值 而不会判断类型
==左右两边是否相等,将两边的数据进行转换为数值只会判断值 而不会判断类型
===左右两边是否类型和值都相等既要判断类型 也要判断值
!==左右两边是否不全等既要判断类型 也要判断值

注意：= == === 的区别：

num = 5; 只写一个等于号 赋值，num == 4 ； 两个是判断值， num ===6 ； 三个既判断值也判断类型

语法

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

      console.log(3 > 10); // 打印什么结果 false
      console.log(3 < 10); //  true
      console.log(3 <= 3); // 小于或者等于 3

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

	  // （!=	!==）
      console.log(3 != 3); // false
      console.log(3 != '3'); // false
      console.log(3 !== '3'); // true
    </script>

拓展：

Ⅰ、比较判断标准：

  • 一般都是对数字做比较，对于字符串做比较；更多是判断两者是否相等：console.log('A' === 'B');

  • 如果拿字符串去 大小的比较，先把字符串 拿去做 转数字；转完了数字之后， 才根据数字做大小比较！

Ⅱ、 NaN = A || NaN = B

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

Ⅲ、js 处理小数 有问题 后面会补充 精度的问题！！

​ console.log(0.4 + 0.2 === 0.6);（现实生活中是相等的，但在js会有精确小数数值）

Ⅳ、类型转换

  • console.log(4 > '3');

    console.log(4 > Number('3'));

Ⅴ、同类型之间比较会发生隐式转换

  • 最终把数据隐式转换转成number类型再比较
  • 所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==

Ⅵ、字符串比较，是比较的字符对应的ASCII码

  • 从左往右依次比较
  • 如果第一位一样再比较第二位，以此类推
  • 比较的少，了解即可

1648547047237.png

⑤逻辑运算符

作用

逻辑运算符用来解决多重条件判断

符号名称日常读法特点口诀
&&逻辑与并且符号两边都为true结果才为true一假则假
||逻辑或或者符号两边有一个true就为true一真则真
!逻辑非取反true变false false变true真变假，假变真

判断语法

<script>
        // 逻辑与 && （并且） 一假则假 
        let num1 = 6;
        console.log(num1 > 5 && num1 < 10); //真 true
        console.log(num1 > 8 && num1 < 10); //假 false  一假则假

        //逻辑或 || （或者） 一真则真
        let num2 = 5;
        console.log(num2 > 5 || num2 < 10); //真 true  一真则真
        console.log(num2 === 5 || num2 === 2) //真 true  一真则真
        console.log(num2 > 8 || num2 < 3); //假 false

        //逻辑非 ！ （取反） 真变假 假变真
        let gender = true; //男 true
        console.log(gender);  //true
        console.log(!gender);  //取反 false

    </script>

逻辑运算符里的短路

  • 短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
符号短路条件
&&左边为false就短路
||左边为true就短路

  • 原因：通过左边能得到整个式子的结果，因此没必要再判断右边

  • 运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

①逻辑与短路

  • 工作中的语法 逻辑与来说 满足了 就去执行
  <script>
// && 一假则假 从左到右执行 ,左边为false 右边就不再执行
        console.log( 0 > 1 && 3 < 5 && 6 > 2 && 9 > 8 && 6 < 10 && 5 < 8);

      // 工作中常见的写法
      // 如果今天还下雨 那我就去吃海鲜
      // 不下雨 不去吃海鲜了
     let rain = true;
      // 左边成立了 右边才会去执行
      rain && console.log('下雨 去吃海鲜');

	 let rain = false;
	 //左边不成立 右边就不会执行了 	
	 rain && console.log('不下雨 不去吃海鲜');
 </script>

②逻辑或短路

  • 工作中的语法 逻辑或来说 不满足了 就去执行
 <script>
	// 逻辑或 一真则真
     // 只要 || 左边 成立了为true，右边就不再去执行
     console.log(100 > 3 || 2 > 6 || 9 > 10 || 10 > 11 || 13 > 20);

     // 工作中 常用的技巧
     // 如果下雨，那么我就不玩了
     let rain = false;
     rain || console.log('去玩');
 </script>

③逻辑运算的最终结果

  • 无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值
let result = 1 > 0 && 9 > 10; // false
//那段代码是最后执行即可
let result = 1 > 0 && 30;  //30 最后执行的值
let result = 1 > 0 && false && 30; //false
console.log(result);

1648550323196.png

1648550345187.png

④补充(面试涉及到)

  • 以下转换成 布尔类型 都是 false（反之其余转布尔类型全是true）
//我们的 undefined  如果 转换成  布尔类型 其实是个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('') );

⑥运算优先级

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

优先级运算符顺序
1小括号()
2一元运算符++ -- !
3算数运算符先 * / % 后 + -
4关系运算符> >= < <=
5相等运算符== != === !==
6逻辑运算符先 && 后 ||
7赋值运算符=
8逗号运算符，
  • 一元运算符里面的逻辑非优先级最高
  • 逻辑与比逻辑或优先级高

1648551963480.png

简化逻辑分解判断 （工作中比较常用）

<script>
      let a = 3 > 5 && 2 < 7 && 3 === 4;

      // 判断今天是否下雨
      let b = 3 > 5;
      // 判断今天是否限行
      let c = 2 > 7;
      // 判断 我的身高不是 比同桌要高
      let d = 3 === 4;

      console.log(b && c && d);
    </script>

语句

①表达式和语句

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

Ⅱ、语句：

  • js 整句或命令，js 语句是以分号结束（可以省略）

  • 比如： if语句 for 循环语句

Ⅲ、区别：

  • 表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)
  • 表达式 3 + 4
  • 语句 alert() 弹出对话框

其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事

②分支语句

Ⅰ、程序三大流程控制语句

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

1648552640169.png

Ⅱ、分支语句

  • 分支语句可以让我们有选择性的执行想要的代码

  • 分支语句包含：

    If分支语句

    三元运算符

if语句

  • if语句有三种使用：单分支、双分支、多分支

if 单分支：

括号内的条件为true时，进入大括号里执行代码

小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

<script>
        let score = +prompt('请输入高考成绩;');
        if(score > 700){
            alert('恭喜你来啦');
        }
</script>

if 双分支：

<script>
        let score = +prompt('请输入您的分数');
        if(score > 700){
            alert('蓝翔欢迎你');
        }else{
            alert('北大欢迎你');
        }
        
    </script>

if 多分支:

释义：

  • 先判断条件1，若满足条件1就执行代码1，其他不执行

  • 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行

  • 若依然不满足继续往下判断，依次类推

  • 若以上条件都不满足，执行else里的代码n

注：可以写N2

<script>
        let day = +prompt('请输入今天星期几：');
        console.log(day)
		//条件1
        if(day ==1){
            //代码1
            alert('吃蛋糕');
         //条件2
        }else if(day ==2 ){
            //代码2
            alert('吃草莓');
        }else if(day ==3 ){
            alert('吃榴莲');
        }else if(day ==4 ){
            alert('吃葡萄');
        }else if(day ==5 ){
            alert('吃海鲜');
        }else {
            alert('喝粥');
        }
    </script>

三元运算符

  • 其实是比 if 双分支 更简单的写法，有时候也叫做三元表达式

  • 符号：? 与 : 配合使用

  • 语法：

1648553752830.png

  • 一般用来取值
<script>
    //需求：用户输入2个数，控制台输出最大的值

        // let num1 = 10;
        // let num2 = 9;

        let num1 = +prompt('请输入第一个数：');
        let num2 = +prompt('请输入第二个数：');
        num1 > num2 ? console.log(num1) : console.log(num2);

		//一般用来取值这样表示
		let num1 = +prompt('请输入第一个数：');
         let num2 = +prompt('请输入第二个数：');
		let num3; // 就要等于 num1 和 num2 中 大的值
         num3 = (num1 > num2 ? num1 : num2 );
		console.log(num3);
    </script>
avatar
文章
阅读
粉丝