JavaScript基础---运算符---9.25

i33.

已于 2022-09-28 18:08:41 修改

阅读量271

点赞数 1

分类专栏： 98的JavaScript 文章标签： javascript 开发语言 ecmascript

于 2022-09-04 12:22:09 首次发布

本文链接：https://blog.csdn.net/weixin_50768118/article/details/126679636

版权

98的JavaScript 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

运算符

运算符也叫操作符。通过运算符可以对一个或多个值进行运算，并获取运算结果。（比如：typeof可以获得一个值的类型，它会将该值的类型以字符串的形式返回）
number string boolean undefined object typeof 的返回值是个字符串类型

<script type="text/javascript">
     var a = 123;
     var result = typeof a;
     console.log(typeof result);
</script>

算数运算符（不会对原变量产生影响）（二元运算符）

当对非Number类型的值进行运算时，会将这些值转换为Number然后在运算（加法运算除外）

加法（+）运算符

var a = 125;
console.log(a + 1);//126
console.log(123 + 123);//246
console.log(true + 1);//2

d = true + false;
console.log(d);//1

//任何值和NaN做运算都得 NaN
console.log(2 + NaN);//NaN

//如果两个字符串进行加法运算，则会拼串, 将两个字符串拼接为一个字符串
console.log("123" + "456");//"123456"

//任何的值和字符串做加法运算，都会先转换为字符串，然后做拼串
console.log(123 + "1");//1231
console.log(true + "hello");//truehello

//将一个任意的数据类型转换为String,我们只需要为任意的数据类型+一个""即可将其转换为String
var a = 123;
a = a + "";//相当于 a = String(a);
console.log(typeof a);//String

减法（-）运算符

var result = 1;
result = 100 - 5;//95
result = 100 - true;//99
result = 100 - "1";//99

乘法（*）运算符

var result = 1;
result = 2 * 2;//4
result = 2 * "8";//16
result = 2 * undefined;//NaN
result = 2 * null;//0

除法（/）运算符

var result = 1;
result = 4 / 2;//2

//String转为Number
var a = "123";
a = a - 0;
console.log(typeof a);//number
console.log(a);//123

取模（%）运算符（取余数）

var a = 1;
a = 9 % 3;//0

一元运算符

对于非Number类型的值，会将其先转换为Number在运算。可以对一个其他的数据类型使用正号（+）来将其转换为number，它的原理和Number()函数一样。

var a = 123;
a = true;
a = -a;
console.log("a = " + a);//-1
console.log(typeof a);//Number

var result = 1 + +"2" + 3;
console.log("result = "+result);//6

自增和自减

自增（++）

通过自增可以使变量在自身的基础上增加1。对于一个变量自增以后，原变量的值会立即自增1。

自增分为两种：后++（a++）和前++（++a），都会立即使原变量的值自增1。

a++的值等于原变量的值（自增前的值）。++a的值等于原变量的新值（自增后的值）

var b = 10;
b++;//第一次b++，是在10的基础上自增
console.log(b++);//第二次b++，是在11的基础上自增，11是自增前的值

var c = 20;
console.log(++c);//21
console.log(++c);//22

var d = 20;
result = d++ + ++d + d;//20 + 22 + 22 = 64

自减（--）

通过自减可以使变量在自身的基础上减1。后--（a--）和前--（--a）。

a--的值等于原变量的值（自减前的值）。--a的值等于原变量的新值（自减后的值）。

var e = 10;
result = e-- + --e + e;//10+8+8=26

自增自减练习

<script type="text/javascript">
  var n1 = 10, n2 = 20;
  var n = n1++;//10
  console.log("n=" + n); //n=10
  console.log("n1=" + n1); //n1=11
  n = ++n1;//12
  console.log("n=" + n);//n=12
  console.log("n1=" + n1);//n1=12
  n = n2--;//20
  console.log("n=" + n);//n=20
  console.log("n2=" + n2);//n2=19
  n = --n2;//18
  console.log("n=" + n);//n=18
  console.log("n2=" + n2);//n2=18
</script>

比较运算符（关系运算符）

通过关系运算符可以比较两个值之间的大小关系，关系成立返回true，不成立则返回false。

>大于号：判断符号左侧的值是否大于右侧。

>=大于等于：判断符号左侧的值是否大于或等于右侧的值。<小于号、<=小于等于号同理。

var result = 5 > 10;//false
result = 5 > 5;//false
result = 5 >= 5;//true
result = 5 <= 4;//false

非数值的情况

对于非数值进行比较时，会将其转换为数字然后在比较。如果符号两侧的值都是字符串，不会将其转换为数字进行比较，而会分别比较字符串中字符的Unicode编码，比较时一位一位进行比较。如果两位一样，则比较下一位，所以借用它来对英文进行排序。比较中文没有意义。

console.log(1 > true);//false
console.log(1 >= true);//true
console.log(1 > "0");//true
console.log(10 > null);//true
//任何值和 NaN做任何比较都是 false
console.log(10 > "hello");//false
console.log(true > false);//true
console.log("11" < "5");//true

Unicode编码

// 在字符串中使用转义字符输入Unicode编码
// \u四位编码
    console.log("\u2620");

<!-- 在网页中使用unicode编码 -->
<!-- &#编码  这里的编码需要的是10进制 -->
<h1>&#9760</h1>

逻辑运算符

JS中为我们提供了三种逻辑运算符：！非、&&与、||或。

！非

可以用来对一个值进行非运算。就是对一个布尔值进行取反操作，true变false，false变true。

var a = !true;//false

如果对一个值进行两次取反，它不会变化。如果对非布尔值进行运算，则会将其转换为布尔值，然后再取反。所以我们可以利用该特点，来将一个其他的数据类型取两次反（!!b）转换为布尔值。

var b = 10;
b = !!b;
console.log("b = " + b);//false
console.log(typeof b);//boolean

&&与

运算规则：两个值中只要有一个值为false就返回false。只有两个值都为true时，才会返回true。JS中的"与"属于短路的与，如果第一个值为false，则不会看第二个值。

var c = true && true;//true
c = true && false;//false
c = false && false;//false
console.log("c = " + c);

||或

运算规则：只要有一个true，就返回true。两个值都是false，才返回false。如果第一个值为true，则不会看第二个值。

var d = 1;
d = false || false;//false
d = true || false;//true
d = false || true;//true
d = true || true;//true
console.log("d = " + d);

&& || 非布尔值的情况

对于非布尔值进行"与" "或"运算时，会先将其转换为布尔值，然后再运算，并且返回原值。

短路运算（逻辑中断）：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式。

&&与运算：如果第一个值为true，则返回第二个值。如果第一个值为false，则返回第一个值。

var e = 1 && 2;//2
e = 0 && 2;//0
e = NaN && 0;//NaN
//如果有空的或者否定的为假，其余是真的 0 、'' 、null 、undefined 、NaN

||或运算：如果第一个值为true，则返回第一个值。如果第一个值为false，则直接返回第二个值。

var f = 2 || 1;//2
f = 2 || NaN;//2
f = NaN || 1;//1
f = "" || "hello";//hello
f = -1 || "你好";//-1

赋值运算符

<script type="text/javascript">
     var a = 123;// = 可以将符号右侧的值赋给符号左侧的变量
     a += 1;// 等价于a = a + 1;
     console.log("a = " + a);//a=124

     var b = 123;
     b -= 1;// 等价于a = a - 1;
     console.log("b = " + b);//b=122

     var c = 123;
     c *= 2;// 等价于a = a * 2;
     console.log("c = " + c);//c=246

     var d = 64;
     d /= 2;// 等价于a = a / 2;
     console.log("d = " + d);//d=32

     var e = 21;
     e %= 4;// 等价于a = a % 2;  21/4=5···1
     console.log("e = " + e);//e=1
</script>

相等运算符

（==）相等

（==）相等运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。

使用==来做相等运算，当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较。

<script type="text/javascript">
    console.log(1 == 1);//true
    var a = 10;
    console.log(a == 4);//false
    console.log("1" == 1);//true
    console.log(true == "1");//true
    console.log(true == "hello");//false
    console.log(null == 0);//false
    // undefined衍生自null,所以这两个值做相等判断时,会返回true
    console.log(undefined == null);//true
    //NaN不和任何值相等，包括他本身
    console.log(NaN == "1");//false
    console.log(NaN == undefined);//false
    console.log(NaN == NaN);//false
</script>

可以通过isNaN()函数来判断一个值是否是NaN。

var b = NaN;
// 判断 b的值是否为NaN
// console.log(b == NaN);//false 
// 可以通过isNaN()函数来判断一个值是否是NaN
console.log(isNaN(b));//true

（!=）不相等

（!=）不相等运算符用来判断两个值是否不相等，如果不相等返回true，否则返回false。

console.log(10 != 5);//true
console.log("abcd" != "abcd");//false
console.log("1" != 1);//false

（===）全等

用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换。如果两个值的类型不同，直接返回false。

console.log("123" == 123);//true
console.log("123" === 123);//false
console.log(null === undefined);//false

（!==）不全等

和不相等类似，不同的是它不会做自动的类型转换。如果两个值的类型不同，直接返回true。

console.log(1 != "1");//false
console.log(1 !== "1");//true

条件运算符（三元运算符）

语法：条件表达式？语句1：语句2；

执行的流程：

条件运算符在执行时，首先对条件表达式进行求值。
如果该值为true，则执行语句1，并返回执行结果。
如果该值为false，则执行语句2，并返回执行结果。

<script type="text/javascript">
     true?alert("语句1"):alert("语句2");//语句1
     false?alert("语句1"):alert("语句2");//语句2

     var a = 10;
     var b = 20;
     var c = 50;
     a > b ? alert("a大"):alert("b大");//b大

     //获取 a和 b中的最大值
     var max = a > b ? a : b;
     console.log("max = "+max);//max = 20

     //获取a b c 的最大值
     var max = max > c ? max : c;
     console.log("max = "+max);//max = 50


     var a = 300;
     var b = 144;
     var c = 50;
     // 写法不推荐使用，不方便阅读
     var max = a > b ? (a > c ? a : c) : (b > c ? b : c);
     console.log("max = "+max);//max = 300

     //遇到非布尔值时，先转为布尔值
     "hello"?alert("语句1"):alert("语句2");//语句1
     ""?alert("语句1"):alert("语句2");//语句2
</script>

运算符的优先级

在JS中有一个运算符优先级的表，在表中越靠上优先级越高，越优先计算，如果优先级一样，则从左往右计算。

但是这个表我们并不需要记忆，如果遇到优先级不清楚，可以使用()来改变优先级

. 、[] 、new
()
++ 、 --
！、~、+(单目)、-(单目)、typeof、void、delete
% 、* 、/
+(双目)、-(双目)
<<、>>、>>>
<、<=、>、>=
==、!==、===
&
^
|
&&
||
=、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=
，

<script type="text/javascript">
     var a=1 , b=2 , c=3;// ','可以声明多个变量并赋值

     var result = 1 + 2 * 3;// 和数学一样,在JS中运算符也有优先级,比如:先乘除后加减
     console.log(result);//7

     var result = 1 || 2 && 3;
     console.log("result = "+result);//result = 1
</script>