笔记来源:尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)_哔哩哔哩_bilibili

JS运算

1、运算符

运算符也叫操作符,通过运算符可以对一个或多个值进行运算,并获取运算结果

比如:typeof就是运算符,可以来获得一个值的类型

它会将该值的类型以字符串的形式返回 number string boolean undefined object

2、算数运算符

  • 当对非Number类型的值进行运算时,会将这些值转换为Number然后再运算
  • 任何值和NaN做运算都得NaN

算数运算符

  • + 可以对两个值进行加法运算,并将结果返回

    • 如果对两个字符串进行加法运算,则会将两个字符串拼接为一个字符串,并返回
    • 任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
      1. var a1 = 123 + 456;
      2. console.log(a1); // 579
      3. var a2 = "123" + "456";
      4. console.log(a2); // 123456
      5. var a3 = "123" + 456;
      6. console.log(a3); // 123456
      7. var a4 = 123 + "456";
      8. console.log(a4); // 123456
      9. var a5 = 123 + true;
      10. console.log(a5); // 124
      11. var a6 = 123 + "";
      12. console.log(a6); // 123
      13. var a7 = 123 + null;
      14. console.log(a7); // 123
      15. var a8 = 123 + undefined;
      16. console.log(a8); // NaN
      17. var a9 = 123 + NaN;
      18. console.log(a9); // NaN
      19. var a10 = "123" + NaN;
      20. console.log(a10); // 123NaN
  • - 可以对两个值进行减法运算,并将结果返回

    var b1 = 456 - 123;
    console.log(b1); // 333
    var b2 = 456 - "123";
    console.log(b2); // 333
    var b3 = 456 - true;
    console.log(b3); // 455
    var b4 = 456 - "";
    console.log(b4); // 456
    var b5 = 456 - null;
    console.log(b5); // 456
    var b6 = 456 - "abc";
    console.log(b6); // NaN
    var b7 = 456 - NaN;
    console.log(b7); // NaN
    var b8 = 456 - undefined;
    console.log(b8); // NaN
    
  • * 可以对两个值进行乘法运算,并将结果返回

  • / 可以对两个值进行除法运算,并将结果返回

  • % 可以对两个值进行取模运算,并将结果返回

根据这些特点,我们可以利用+""将Number转为String,利用-0*1/1将String转为Number

3、一元运算符

一元运算符,只需要一个操作数

  • + 正号:正号不会对数字产生任何影响
  • - 负号:负号可以对数字进行负号的取反

对于非Number类型的值,它会将先转换为Number,然后再运算

可以对一个其他的数据类型使用+,来将其转换为Number,它的原理和Number()函数一样

var a = "10";
var result = +a;
console.log(typeof result);    // number
console.log("result="+result); // result=10
result = -a;
console.log("result="+result); // result=-10
a = true;
result = +a;
console.log("result="+result); // result=1
a = "";
result = +a;
console.log("result="+result); // result=0
a = null;
result = +a;
console.log("result="+result); // result=0
a = undefined;
result = +a;
console.log("result="+result); // result=NaN
a = NaN;
result = +a;
console.log("result="+result); // result=NaN

4、自增和自减

自增++

通过自增可以使变量在自身的基础上增加1

自增分成两种:后++(a++)和前++(++a

无论是a++还是++a,都会立即使原变量的值自增1

不同的是a++++a的值不同

  • a++是变量的原值(自增前的值)
  • ++a是变量的新值(自增后的值)
var a,b;
a = 1;
b = a++;
console.log("a++ = " + b + ", a = " + a); // a++ = 1, a = 2
a = 1;
b = ++a;
console.log("++a = " + b + ", a = " + a); // ++a = 2, a = 2

自减—

通过自减可以使变量在自身的基础上减少1

自减分成两种:后—(a--)和前—(--a

无论是a--还是--a,都会立即使原变量的值自减1

不同的是a----a的值不同

  • a--是变量的原值(自减前的值)
  • --a是变量的新值(自减后的值)
var a,b;
a = 1;
b = a--;
console.log("a-- = " + b + ", a = " + a); // a-- = 1, a = 0
a = 1;
b = --a;
console.log("--a = " + b + ", a = " + a); // --a = 0, a = 0

练习

a = 10;
b = a++ + ++a + a; // 10 + 12 + 12;
console.log('a = ' + a + ', b = ' + b); // a = 12, b = 34

5、逻辑运算符

JS中为我们提供了三种逻辑运算符

  • !
  • &&
  • ||

非运算

!可以用来对一个值进行非运算

所谓非运算就是值对一个布尔值进行取反操作,truefalsefalsetrue

  • 如果对一个值进行两次取反,它不会变化
  • 如果对非布尔值进行运算,则会将其转换为布尔值,然后再取反

所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值

可以为一个任意数据类型取两次反,来将其转换为布尔值,原理和Boolean()函数一样

var a,b;
a = true;
b = !a;
console.log("a="+a+",b="+b); // a=true,b=false
b = !!a;
console.log("a="+a+",b="+b); // a=true,b=true

与运算

&&可以对符号两侧的值进行与运算并返回结果

运算规则

  • 两个值中只要有一个值的false就返回false;只有两个值都为true时,才会返回true
  • JS中的“与”属于短路的与,如果第一个值为false,则不会检查第二个值
var a;
a = true && true;   // true
console.log(a);
a = true && false;  // false
console.log(a);
a = false && true;  // false
console.log(a);
a = false && false; // false
console.log(a);

或运算

||可以对符号两侧的值进行或运算并返回结果

运算规则:

  • 两个值中只要有一个true,就返回true;如果两个值都为false,才返回false
  • JS中的“或”属于短路的或,如果第一个值为true,则不会检查第二个值
var a;
a = true || true;   // true
console.log(a);
a = true || false;  // true
console.log(a);
a = false || true;  // true
console.log(a);
a = false || false; // false
console.log(a);

&&、|| 非布尔值的情况

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

与运算

  • 如果第一个值为true,则必然返回第二个值
  • 如果第一个值为false,则直接返回第一个值
var result;
result = 1 && 2;
console.log(result);   // 2
result = 2 && 1;
console.log(result);   // 1
result = 1 && 0;
console.log(result);   // 0
result = 0 && 1;
console.log(result);   // 0
result = "" && 1;
console.log(result);   //
result = 1 && "";
console.log(result);   //
result = null && 1;
console.log(result);   // null
result = 1 && null;
console.log(result);   // null
result = undefined && 1;
console.log(result);   // undefined    
result = 1 && undefined;
console.log(result);   // undefined

或运算

  • 如果第一个值为true,则直接返回第一个值
  • 如果第一个值为false,则返回第二个值
var result;
result = 1 || 2;
console.log(result);   // 1
result = 2 || 1;
console.log(result);   // 2
result = 1 || 0;
console.log(result);   // 1
result = 0 || 1;
console.log(result);   // 1
result = "" || 1;
console.log(result);   // 1
result = 1 || "";
console.log(result);   // 1
result = null || 1;
console.log(result);   // 1
result = 1 || null;
console.log(result);   // 1
result = undefined || 1;
console.log(result);   // 1    
result = 1 || undefined;
console.log(result);   // 1

6、赋值运算符

= 可以将符号右侧的值赋值给符号左侧的变量

  • += a+=5等价于a=a+5
  • -= a-=5等价于a=a-5
  • *= a*=5等价于a=a*5
  • /= a/=5等价于a=a/5
  • %= a%=5等价于a=a%5

7、关系运算符

通过关系运算符可以比较两个值之间的大小关系,如果关系成立它会返回true,如果关系不成立则返回false

  • >:大于号,判断符号左侧的值是否大于右侧的
  • >=:大于等于号,判断符号左侧的值是否大于等于右侧的
  • <:小于号,判断符号左侧的值是否小于右侧的
  • <=:小于等于号,判断符号左侧的值是否小于等于右侧的

任何值和NaN做任何比较都是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("a" < "b");   // true
// 比较字符编码时是一位一位进行比较
// 如果两位一样,则比较下一位,所以借用它来对英文进行排序
console.log("bcd" < "b"); // false
console.log("11" < "5");  // true
// 比较中文时没有意义
console.log("我" < "你"); // false
// 如果比较的两个字符串型的数字,可能会得到不可预期的结果
// 注意:在比较两个字符串型的数字时,一定一定一定要转型
console.log("12345675432" < +"5"); // false

8、相等运算符

== 相等

相等运算符用来比较两个值是否相等,如果相等会返回true,否则返回false

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

// undefined 衍生自null,所以这两个值做相等判断时,会返回true
console.log(null == undefined); // true
// NaN不和任何值相等,包括他本身
console.log(NaN == NaN); // false
// 可以通过isNaN()函数来判断一个值是否是NaN
// 如果该值是NaN则返回true,否则返回false
console.log(isNaN(NaN)); // true

!= 不想等

不相等运算符用来判断两个值是否不相等,如果不相等返回true,否则返回false

使用!=来做不相等运算:不相等也会对变量进行自动的类型转换,如果转换后相等它也会返回false

=== 全等

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

!==不全等

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

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

关于改运算符,可以参考下图

03-JS运算 - 图1

9、条件运算符

条件运算符也叫三元运算符 条件表达式 ? 语句1: 语句2;

执行的流程:条件运算符在执行时,首先对条件表达式进行求值

  • 如果该值为true,则执行语句1,并返回执行结果
  • 如果该值为false,则执行语句2,并返回执行结果
var a = 30;
var b = 40;
var c = 90;
// 两数中取MAX
var max = a > b ? a : b;
console.log("max="+max);
// 三数中取MAX
max = a > b ? (a > c ? a : c) : (b > c ? b : c);
console.log("max="+max);

如果条件的表达式的求值结果是一个非布尔值,则会将其转换为布尔值,然后再运算

"hello" ? alert("111111") : alert("2222222");

10、运算符优先级

就和数学中一样,在JS中运算符也有优先级,比如:先乘除后加减

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

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

.[]new
()
++--
!+(单目)、-(单目)、typeofvoiddelete
%*/
+(双目)、-(双目)
<<>>>>>
<<=>>=
==!=====
&
^
**` `**
&&
**` `**
?:
*=+=-=、`=/=%=<<=>>=>>>=&=^= =`**
,

补充:Unicode编码表

Unicode官网:https://home.unicode.org/

在字符串中使用转义字符输入Unicode编码:\u四位编码

在网页中使用Unicode编码:&#编码; 这里的编码需要的是10进制