前言: 基础知识语法,代码不多。我已经把代码打包放到文章下面了。

数据类型

1.1 JS 中一共分成六种数据类型

  • String 字符串

  • Number 数值

  • Boolean 布尔值

  • Undefined 未定义

  • Object 对象

1.2 String 字符串

Js 中字符串需要使用引号引起来或单引号都行
​ 在字符串使用\作为转义字符

1
2
3
4
5
	\'  ==> '
\" ==> "
\n ==> 换行
\t ==> 制表
\\ ==> \

使用 typeof 运算符检查字符串时,会返回“string”

1.3 Number 数值

js 中所有的整数和浮点数都是 Number 类型

  • 特殊的数字

    infinity 正无穷 -infinity 负无穷 NaN 非法数字(NOT A Number)

  • 其他进制的数字表示:

    • Ob 开头表示二进制,但是不是多有的浏览器都支持
    • O 开头表示八进制
    • Ox 开头表示十六进制

使用 typeof 检查一个 Number 类型的数据时,会返回 number(包括 NaN 和 Infinity)

1.4 Boolean 布尔值

布尔值主要用来逻辑判断,布尔值只有两个

  1. true 逻辑运算

  2. false 逻辑的假

使用 typeo 检查一个布尔值时,会返回”boolean”

1.5 Null 空值

空值专门来表示为空的对象,Null 类型的值只有一个 null 使用 typeof 检查一个 Null 类型的值时会返回”Object”

1.6 Undefined 未定义

如果声明一个变量但是没有为变量赋值变量的值就是 undefined

该类型的值是有一个 underfined

使用 typeof 检查一个 Undefined 类型的值时,会返回”undefined”

1.7 类型的转换

类型转换就是只将其他的数据类型,转换为 String Number 或 Boolean

  • 转换为 String

    • 方式一(强制类型转换):

      调用被转换数据的**toString()**方法

      注意: 这个方法付不适用 null 和 undefined

      由于这个类型中没有方法,所以调用 toString()时会报错

    • 方式二(强制类型转换):

      调用**String()**函数

      原理:对于 Number Boolean String 都会调用他们的 toString()方法来将其转换为字符串,对于 null 值,直接转换为字符串“null”.对于 underfined 直接转换为字符串”undefined”

    • 方式三(隐式的类型转换):

      为任意的数据类型 + “”

      原理:和 String()函数一样

  • 转换为 Number

    • 方式一(强制类型转换):

      调用Number() 函数

    转换的情况:

    1.字符串 –> 数字

    如果字符串是一个合法的数字,则直接转换为对应的数字

    如果字符串时一个非法的数字,则直接转为 NaN

    如果是一个空串或纯空格的字符串,则转换为 0

    2.布尔值 –> 数字

    true 转换为 1

    false 转换为 0

    3.空值 –> 数值

    null 转换为 0

    4.未定义 –> 数字

    undefined 转换为 NaN

    • 方式二(强制类型的转换):

      调用 parseInt() 或 parseFloat()

      这两个函数专门将一个字符串转换为数字的

      parseInt()

      可以将一个字符串中的有效的整数提取出来,并转换为 Number

      如果需要可以在 parseInt()中指出一个第二个参数。来指定 Number

      parseFloat()

      可以将一个字符串的有效的小数提取出来,并转换为 Number

    • 方式三(隐式的类型转换):

      使用一元的+来进行隐式的类型转换

      原理:和 Number()函数一样

  • 转换为布尔值

    • 方式一(强制类型的转换):

      使用 BOOlean()函数

      转换的情况:

      字符串 –> 布尔 除了空串其余是 true

      数值 –> 布尔 除了 0 和 NaN 其余是全是 true

      null、undefined –> 布尔 都是 false

      对象 –> 布尔 都是 true

    • 方式二(隐式类型转换):

      为任意的数据类型做两次非运算,即可将转换为布尔值

      1
      2
      3
      var a = "hello";
      a = !!a;
      console.log(a); // true

数据运算

2.1 运算符

运算符也称为操作符

通过运算符可以对一个或多个值进行运算或操作

  • typeof 运算符

    用来检查一个变量的数据类型

    语法:typeof 变量

    它会返回一个用于描述类型的字符串作为结果

  • 算数运算符

    • ‘+’ 对两个值进行加法运算并返回结果
    • ‘-‘ 对两个值进行减法运算并返回结果
    • ‘*‘ 对两个值进行乘法运算并返回结果
    • / 对两个值进行除法运算并返回结果
    • % 对两个值进行取余运算并返回结果

    除了加法以外,对非 Number 类型的值进行运算时,都会先转换为 Number 然后在做运算。而做加法运算时,如果是两个字符串进行相加,则会做拼串操作,将两个字符连接为一个字符串。任何值和字符串做加法,都会先转换为字符串,然后再拼串。

  • 一元运算符

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

    一元的 “+” ,就是正号,不会对值产生任何影响,但是可以将一个非数字转换为数字

    例子:

    1
    2
    var a = true;
    a = +a;
    • 一元的 -

    就是负号,可以对一个数字进行符号位取反

    例子:

    1
    2
    var a = 10;
    a = -a;
    • 自增

      自增可以使变量在原值的基础上自增 1

      自增使用 ++

      自增可以使用 前++(++a)后++(a++)

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

      不同的是++a 和 a++的值是不同的,

      ++a 的值是变量的新值(自增后的值)

      a++的值是变量的原值(自增前的值)

    • 自减

      自减可以使变量在原值的基础上自减 1

      自减使用 –

      自减可以使用 前–(–a)后–(a–)

      无论是–a 还是 a–都会立即使原变量自减 1

      不同的是–a 和 a–的值是不同的,

      –a 的值是变量的新值(自减后的值)

      a–的值是变量的原值(自减前的值)

2.2 逻辑运算符

  • 非运算可以对一个布尔值进行取反,true 变 false false 变 true

    当对非布尔值使用!时,会先将其装换为布尔值然后在取反

    当我们利用!来将其他的数据转换为布尔值

  • && 可以对符号两侧的值进行与运算

    只要两端值都可以 true 时,才会返回 true。

    只要有一个 false 就会返回 false。

    与是一个短路与,如果第一个值是 false,则不再检查第二个值

    对于非布尔值,它会转换为布尔值然后在运算,并检查原值

    规则:

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

2.如果第一个值为 true, 则返回第二个值

  • || 可以对符号两侧的值进行或运算

    只有两端都是 false,才会返回 false。只要有一个 true,就会返回 true.

    只要两端都是 false 时,才会返回 false。只要有一个 true,就会返回 true.

    或是一个短路的或,如果第一个值是 true,则=不再检查第二值

    对于非布尔值,它会将其转换为布尔值然后做运算,并返回原值

    规则:

1.如果第一个值为 true,则返回第一个值

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

2.3 赋值运算符

=可以将符号右侧的值赋值给左侧变量
+=a += 5 相当于 a = a+5 var str = “hello”; str += “world”;
-=a -= 5 相当于 a = a-5
*=a * = 5 相当于 a = a*5
/=- a /= 5 相当于 a = a/5
%=- a %= 5 相当于 a = a%5

2.4 关系运算符

关系运算符用来比较两个值之间的大小关系

> >= < <=

关系运算符的规则和数学中一致,用来比较两个值之间的关系

如果关系成立则返回 true,关系不成立则返回 false。

如果比价的两个值是非数值,会将其装换为 Number 然后在比较。

如果比较的两个值都是字符串,此时会比较字符串的 Unicode 编码,而不会转换为 Number.

2.5 相等运算符

  • == 相等,判断左右两个值是否相等,如果相等返回 true,如果不等于返回 false

    相等会自动对两个值进行类型转换,如果对不同的类型进行比较,会将其转换为相同的类型为相同的类型然后在比较。转换后相等它也会返回 true

  • != 不等,判断左右两个值是否不等,如果不等则返回 true,如果相等则返回 false

    不等也会做自动的类型转换

  • === 全等,判断左右两个值是否全等,它和相等类似,只不过它不会进行自动的类型转换

    如果两个值的类型不同,则直接返回 false

  • !== 不全等,和不等类似,但是它不会进行自动的类型转换,如果两个值的类型不同,他会直接返回 true

    特殊的值:

    null 和 undefined 由于 undefined 衍生出 null ,所以 null == undefined 会返回 true

    NaN 不与任何值相等,包括它自身 NaN == NaN // false

    判断一个值是否是 NaN,使用 isNaN() 函数

2.6 三元运算符

  • ?:

    语法:条件表达式?语句 1:语句 2;

    执行流程:

    先对条件表达式求值判断,

    如果判断结果为 true,则执行语句 1,并返回执行结果

    如果判断结果为 false,则执行语句 2,并返回执行结果

    优先级:

    和数学中一样,JS 中的运算符也是具有优先级的,

    比如 先乘除 后加减 先与 后或

    具体的优先级可以参考优先级的表格,在表格中越靠上的优先级越高,

    优先级越高的越优先计算,优先级相同的,从左往右计算。

    优先级不需要记忆,如果越到拿不准的,使用()来改变优先级。

基本语法

程序都是自上向下的顺序执行的,通过流程控制语句可以改变程序执行的顺序,或者反复的执行某一段的程序。

分类:

1.条件判断语句

2.条件分支语句

3.循环语句

3.1 条件判断语句

条件判断语句也称为 if 语句

  • 语法一:

    1
    2
    3
    if(条件表达式){
    语句...
    }

    执行流程:

    if语句执行时,会先对条件表达式进行求值判断,

    如果值为 true,则执行 if 后的语句

    如果值为 false,则不执行

  • 语法二:

    1
    2
    3
    4
    5
    if(条件表达式){
    语句...
    }else{
    语句...
    }

    执行流程:

    if…else语句执行时,会对条件表达式进行求值判断,

    如果值为 true,则执行 if 后的语句

    如果值为 false,则执行 else 后的语句

  • 语法三:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    if(条件表达式){
    语句...
    }else if(条件表达式){
    语句...
    }else if(条件表达式){
    语句...
    }else if(条件表达式){
    语句...
    }else{
    语句...
    }

    执行流程

    if…else if…else 语句执行时,会自上至下依次对条件表达式进行求值判断,

    如果判断结果为 true,则执行当前 if 后的语句,执行完成后语句结束。

    如果判断结果为 false,则继续向下判断,直到找到为 true 的为止。

    如果所有的条件表达式都是 false,则执行 else 后的语句

3.2 条件分支语句

switch 语句

语法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
switch(条件表达式){
case 表达式:
语句...
break;
case 表达式:
语句...
break;
case 表达式:
语句...
break;
default:
语句...
break;
}

执行流程:

**switch…case…**语句在执行时,会依次将 case 后的表达式的值和 switch 后的表达式的值进行全等比较,

如果比较结果为 false,则继续向下比较。如果比较结果为 true,则从当前 case 处开始向下执行代码。

如果所有的 case 判断结果都为 false,则从 default 处开始执行代码。

3.3 循环语句

通过循环语句可以反复执行某些语句多次

  • while 循环

    语法:

    1
    2
    3
    while(条件表达式){
    语句...
    }
  • 执行流程:

    while 语句在执行时,会先对条件表达式进行求值判断,

    如果判断结果为 false,则终止循环

    如果判断结果为 true,则执行循环体

    循环体执行完毕,继续对条件表达式进行求值判断,依此类推

  • do…while 循环

    语法:

    1
    2
    3
    do{
    语句...
    }while(条件表达式)

    执行流程

    1
    2
    3
    do...while在执行时,会先执行do后的循环体,然后在对条件表达式进行判断,
    如果判断判断结果为false,则终止循环。
    如果判断结果为true,则继续执行循环体,依此类推
  • 两者区别

    while:先判断后执行

    do…while: 先执行后判断 ,可以确保循环体至少执行一次。

  • for 循环

    语法:

    1
    2
    3
    for(①初始化表达式 ; ②条件表达式 ; ④更新表达式){
    ③语句...
    }

    执行流程:

    首先执行 ① 初始化表达式,初始化一个变量,

    然后对 ② 条件表达式进行求值判断,如果为 false 则终止循环

    如果判断结果为 true,则执行 ③ 循环体

    循环体执行完毕,执行 ④ 更新表达式,对变量进行更新。

    更新表达式执行完毕重复 ②

    • 死循环

      1
      2
      3
      4
      5
      6
      7
      while(true){

      }

      for(;;){

      }

可以使用 vscode 和 notepad++ 打开

链接:https://pan.baidu.com/s/1yfS00YJtShuZVncxzWUrvw
提取码:7q9u