第三天 #JS基础

目录

一、运算符

二、一元运算符

三、自增和自减

四、逻辑运算符

五、赋值运算符

六、关系运算符

七、运算符优先级

八、编码

九、代码块


一、运算符

常见运算符:

运算符 类型 例子
加法:+ Number + Boolean 1 + true 2
Boolean + Boolean true + false 1
Number + Null 2 + null 2
Null + Boolean null + true 1
NaN + Number NaN + 1 NaN
减法:- Number - String 3 - "1" 2
Number - Boolean 2 - true 1
乘法:* Number * String 2 * "3" 6
Boolean * Number true * 2 2
Number * Undefined 2 * undefined NaN
除法:/ Number / Boolean 4 / true 4
Number / Number 7 / 2 2.5
取余:% Number % Number 9 % 4 1

当对非number类型的值进行运算时,会将这些值转换为number类型再运算,但是进行加法运算时,字符串不会转换!!任何数与NaN运算都是NaN。

1.字符串数字与字符串数字或与数字之间进行加法运算,此时的加号是拼接符。

例:

    a = "123" + "345";
    console.log(a); // 123345
    a = "12" + 23;
    console.log(a); // 1223

2.任何值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作。

    a = "1" + true;
    console.log(a); // 1true

3.将一个任意的数据类型转换为String:我们只需要为任意的数据类型+ 一个""(空串)即可将其转换为String类型(隐式转换),实际也是调用的String()函数。

    a = 123 + "";
    console.log(typeof a); // String
    console.log(a); // 123

4.可以通过一个值-0    *1     /1来将其转换为Number,原来的值不发生改变,只是类型变了(隐式转换),原理和Number()函数一样。

    a = "123" - 0;
    console.log(typeof a); // number
    a = "123" * 1;
    console.log(typeof a); // number
    a = "123" / 1;
    console.log(typeof a); // number

二、一元运算符

        一元运算符只需要一个操作符。

运算符 运算类型 例子
正号:+ String +"2" 2
负号:- Boolean -true -1

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

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

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

    a = +true;
    console.log(a); // 1
    console.log(typeof a); // number

三、自增和自减

类型 种类 相同点 不同点
自增 i++

原变量的值会立即自增1

先运算在自增1
++i 先自增1再运算
自减 i--

原变量的值会立即自减1

先运算再自减1
--i 先自减1再运算

1.自增

    a = 3;
    console.log(a++, a); // 3 4
    console.log(++a, a); // 5 5

2.自减

    a = 5;
    console.log(a--, a); // 5 4
    console.log(--a, a); // 3 3

四、逻辑运算符

常用逻辑运算符

逻辑运算符 例子
非:! !true false
!4 false
与:&& true && false flase
0 && 3 0
或:|| false || true true
0 || 3 3

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

1. !运算:

    var a = true;
    a = !a;
    console.log(a); // false
    a = 4;
    a = !a;
    console.log(a); // false

可以为一个值取两次反,来将其转换为Boolean值,原理和Boolean()函数一样(隐式转换)

    a = 3;
    a = !!a;
    console.log(a); // true

2.  &&运算

运算规则:两个值都是true就返回true;如果第一个数是true会检查第二个数,如果第一个数是false,则不会检查第二个数。

如果第一个值为true,则返回后面一个

    var a = 2 && 3;
    console.log(a); // 3

第一个值为false,则返回第一个

    a = NaN && 0;
    console.log(a); // NaN

    a = 0 && NaN;
    console.log(a); // 0

3.  ||运算

运算规则:有一个值是true则返回true;如果第一个数是true,不会检查第二个值,如果第一个数是false,会检查第二个数。

如果第一个值为true,则直接返回第一个值

    a = 2 || NaN;
    console.log(a); // 2

如果第一个值为false,则返回第二个值

    a = 0 || 3;
    console.log(a); // 3

五、赋值运算符

赋值运算符 例子 等价于
= a = 3 -------------
+= a += 3 a = a + 3
-= a -= 3 a = a - 3
*= a *= 3 a = a * 3
/= a /= 3 a = a / 3
%= a %= 3 a = a % 3

六、关系运算符

关系运算符 例子
大于:> 3 > "2" true

          "123222222" > +"5"

true

                   "bbc" > "b"

true
小于:<

                     "a" < "b"

true
相等:==

                    true == "1"

true

                     null == 0

false

              undefined == null

true
NaN == NaN false
不等:!=

                    1 != "1"

false
全等:===

                  3 === "3"

false
不全等:!==

                  3 !== "3"

true

1.关系运算符  >  <  >=  <=  ,对于非数值进行比较时,会将其转换为数字然后在比较

    console.log(1 > "0"); // true
    console.log(10 > null); // true

任何值和NaN做比较都是NaN

console.log(10 > "hello"); // false

比较两个字符串时,不会将其转换为数字进行比较,而会分别比较字符串中字符的Unicode编码

    console.log("6" < "2"); // false
    console.log("11" < "5"); // true
    console.log("a" < "b"); // true

比较字符编码时是一位一位的进行比较,如果两位一样,则比较下一位

console.log("bbc" > "b"); // true 

如果比较两个字符串型的数字,一定要先转型再比较

 console.log("123222222" > +"5"); // true

2.当使用==  != 来比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换为相同的类型然后在比较。

(1) 相等: == 只比较两个数的值

    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 == NaN); // false
console.log(NaN == "1"); // false

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

    console.log(isNaN(NaN)); // true
    console.log(isNaN(123)); // false

(2)不相等 !=  只比较两个数的值

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

(3)全等 === 比较两个数的值和类型, 都相等才会返回true

console.log(3 === "3"); // false

(4)不全等!== 比较两个数的值和类型, 有一样不相等都会返回true

console.log(3 !== "3"); // true

七、运算符优先级

下面表中 越上面优先级越高,同一级优先级一样,优先级一样时,语句从左往右依次执行。

. [ ] new
( )
++ --
! ~ +(正号) -(负号) typeof void delete
% * /
+(加号) -(减号)     
<< >> >>>
< <= > >=
== !== ===
&
^
|
&&
||
?:
= += -= *= /= %= <<= >>= >>>= &= ^= |=
,

八、编码

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

console.log("\u2620");

2.在页面中输出Unicode编码: &#编码;  这里编码需要十进制

<h1 style="font-size: 100px;">&#9760;</h1>

九、代码块

1.在JS中可以使用{}来为语句进行分组

  • 同一个{}中的语句我们称为是一组语句,它们要么都执行,要么都不执行,
  • 一个{}中的语句我们也称为叫一个代码块
// 两个代码块
{
  var a = 5;
  alert("hello");
  console.log("你好");
  document.write("大美女"); 
}

{
  var a = 5;
  alert("hello");
  console.log("你好");
  document.write("大美女"); 
}

2.jS中的代码块,只具有分组的的作用,没有其他的用途

3.大括号末尾不需要分号 ;

4.代码块里面的内容,在外部是完全可见的

{
  var a = 5;
  alert("hello");
  console.log("你好");
  document.write("大美女"); 
}
  console.log(5); // 5
上一篇:2021-08-02变量的高级+数据类型转换


下一篇:js中==和===的区别以及总结