JavaScript 基础二part1.运算符：赋值、一元、比较、逻辑运算符

aPurpleBerry

已于 2024-01-10 10:10:50 修改

阅读量856

点赞数 19

分类专栏： JavaScript 文章标签： javascript

于 2024-01-03 10:42:29 首次发布

本文链接：https://blog.csdn.net/yavlgloss/article/details/135356187

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JavaScript 基础二

1.1 赋值运算符
1.2 一元运算符
- 自增运算符的用法：
- 例题
1.3 比较运算符
1.4 逻辑运算符
- 逻辑中断
- 例题
1.5 运算符优先级

1.1 赋值运算符

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

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

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

1.2 一元运算符

只需要一个表达式就可以运算的运算符叫一元运算。
众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符。

例如
二元运算符：加法 let num = 10+20;
一元运算符：正负号 let num = -1; num = +num;

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

自增运算符的用法：

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

例题

let i = 1;
console.log(++i + 2);

结果是4。前置自增：先自加再使用（记忆口诀：++在前先加）

let i = 1;
console.log(i++ + 2);

结果是3。后置自增：先使用再自加（记忆口诀：++在后后加）

let i = 1;
console.log(i++ + ++i + i);

答案是7。
i++后加，所以先存再运算。此时 i++ = 1，i=2
++i 先运算再存，此时++i = 3，i=3
1+3+3 = 7

1.3 比较运算符

使用场景：比较两个数据大小、是否相等。

比较运算符：

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

开发中判断是否相等，强烈推荐使用 ===

console.log(2 == '2'); // true
console.log(2 === '2'); // false

字符串比较，是比较的字符对应的ASCII码
从左往右依次比较
如果第一位一样再比较第二位，以此类推
NaN不等于任何值，包括它本身
涉及到"NaN“ 都是false。 console.log(NaN === NaN) // false
尽量不要比较小数，因为小数有精度问题
解决方法：转换成整数：（0.1*10 + 0.2*10 ）/10
不同类型之间比较会发生隐式转换
最终把数据隐式转换转成number类型再比较
所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==

不同类型间的比较

当对不同类型的值进行比较时，JavaScript 会首先将其转化为数字（number）再判定大小。

例如：

alert( '2' > 1 ); // true，字符串 '2' 会被转化为数字 2
alert( '01' == 1 ); // true，字符串 '01' 会被转化为数字 1

对于布尔类型值，true 会被转化为 1、false 转化为 0。

alert( true == 1 ); // true
alert( false == 0 ); // true

一个有趣的现象
有时候，以下两种情况会同时发生：
① 若直接比较两个值，其结果是相等的。
② 若把两个值转为布尔值，它们可能得出完全相反的结果，即一个是 true，一个是 false。

let a = 0;
alert( Boolean(a) ); // false

let b = "0";
alert( Boolean(b) ); // true

alert(a == b); // true!
alert(Boolean(a) == Boolean(b));  // false!

严格相等

普通的相等性检查 == 存在一个问题，它不能区分出 0 和 false：alert( 0 == false ); // true
也同样无法区分空字符串和 false：alert( '' == false ); // true

这是因为在比较不同类型的值时，处于相等判断符号 == 两侧的值会先被转化为数字。空字符串和 false 也是如此，转化后它们都为数字 0。

严格相等运算符 === 在进行比较时不会做任何的类型转换。
同样的，与“不相等”符号 != 类似，“严格不相等”表示为 !==。

对 null 和 undefined 进行比较

见《现代JavaScript教程》跳转链接

1.4 逻辑运算符

使用场景：逻辑运算符用来解决多重条件判断
在这里插入图片描述

逻辑中断

逻辑运算符里的短路
在这里插入图片描述
逻辑中断的应用：

<body>
  <script>
    function fn(x, y) {
      x = x || 0
      y = y || 0
      console.log(x + y)
    }
    fn(1, 2)
    // fn()

    // console.log(false && 22)
    // console.log(false && 3 + 5)
    // let age = 18
    // console.log(false && age++) // age++ 不执行  一假则假
    // console.log(age)

    // console.log(true || age++)  //一真则真
    // console.log(age)


    // console.log(11 && 22)  // 都是真，这返回最后一个真值
    // console.log(11 || 22)  //  输出第一个真值
  </script>
</body>

例题

需求：用户输入一个，判断这个数能被4整除，但是不能被100整除,满足条件，页面弹出true，否则弹出false

<body>
  <script>
    // 1. 用户输入
    let num = +prompt('请输入一个数字:')
    // 2. 弹出结果
    alert(num % 4 === 0 && num % 100 !== 0)
  </script>
</body>

1.5 运算符优先级

在这里插入图片描述

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