💧 isNaN()

用来判断一个变量是否为非数字的类型，返回 true 或者 fals:

变量为数字返回的是 false
变量不是数字返回的是true

console.log(isNaN(12 - 'hello'))
    console.log(isNaN(12))

💦 字符串型 String

字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号’ ’

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)。但是不能同种引号相互嵌套，如单引号内使用单引号。

var str1 = 'hello'
    console.log(str1)
    var str2 = "world"
    console.log(str2)
    var str3 = '张三说："hello"'
    console.log(str3)
    var str4 = "张三说：'hello'"
    console.log(str4)
    // 会报错
    // JS中引号采用就近原则成对匹配
    // '张三说：' 单引号已经完成配对
    // '' 后面的单引号只能与最后的进行匹配
    // var str3 = '张三说：'hello''

💧 字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是 \ 开头的，常用的转义符及其说明如下：

var str = 'hello world \n hello world \\ \' \" he\tllo world\b '
    console.log(str)

💧 字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度

var str4 = "张三说：'hello'"
    console.log(str4.length)

💧 字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串

拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

console.log('hello'+12)
    console.log(12+'hello')
    console.log('hello'+'world')
    console.log('hello'+true)
    console.log('hello'+undefined)
    console.log('hello'+null)

字符串和变量拼接，变量是不能添加引号的，因为加引号的变量会变成字符串，如果变量两侧都有字符串拼接，口诀“引引加加”

var age = 12
    console.log("张三今年" + age + "岁")

💦 布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(false+12)
    console.log(true+12)

💦 Undefined

一个声明后没有被赋值的变量会有一个默认值 undefined

var a
    console.log(a)
    console.log(a+1)
    console.log(a+' hello')

未定义与数相加为非数字

💦 Null

一个声明变量给 null 值，里面存的值为空（即有一个盒子，但是里面没有东西）

var a = null
    console.log(a)
    // null 与数字相加 会转换为0
    console.log(a+12)
    console.log(a+' hello')
    // null 和 false 都转换为0
    console.log(a+false)

🌊 获取变量数据类型

typeof 可用来获取检测变量的数据类型

console.log(typeof 12)
    console.log(typeof 'hello')
    console.log(typeof true)
    console.log(typeof undefined)
    console.log(typeof null)

🌊 字面量

字面量是在源代码中一个固定值的表示法，字面量就是显示的值，看到啥就是啥。

在浏览器的控制台，数字显示为蓝色，字符串为黑色，null 和 undefined 为浅灰色（不同的浏览器可能会有差异）

console.log(12)
    console.log('hello')
    console.log(undefined)
    console.log(null)

🌊 数据类型转换

把一种数据类型的变量转换成另外一种数据类型

通常会实现3种方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

💦 转换为字符串

<script>
    var a = 123
    // 方式1 调用toString() 变量名.toString()
    console.log(a.toString())
    console.log( typeof a.toString())
    // 方式2 使用String()进行强制转换
    console.log(String(a))
    console.log( typeof String(a))
    // 方式3 使用 + 与字符串进行拼接
    // 拼接上长度为0的字符串
    console.log((a + ''))
    console.log( typeof (a + ''))
  </script>

三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

💦 转换为数字型

注意 parseInt 和 parseFloat 单词的大小写

var a = '123'
    var b = '3.14'
    var c = true
    var d = null
    var e = undefined
    // 转为整数
    // 小数转为整数会向下取整
    console.log( parseInt(a),parseInt(b),parseInt(c),parseInt(d),parseInt(e) )
    // console.log( parseInt(b) ) 
    // console.log( parseInt(c) ) // 转换失败 非数字
    // console.log( parseInt(d) ) // 转换失败 非数字
    // console.log( parseInt(e) ) // 转换失败 非数字
    // 转为小数
    console.log( parseFloat(a),parseFloat(b),parseFloat(c),parseFloat(d),parseFloat(e) )
    // console.log( parseFloat(b) )
    // console.log( parseFloat(c) ) // 转换失败 非数字
    // console.log( parseFloat(d) ) // 转换失败 非数字
    // console.log( parseFloat(e) ) // 转换失败 非数字
    // 强制转换
    console.log( Number(a),Number(b),Number(c),Number(d),Number(e) )
    // console.log( Number(b) )
    // console.log( Number(c) ) // true 为 1，false 为 0
    // console.log( Number(d) ) // null 为 0
    // console.log( Number(e) ) // 转换失败 非数字
    // 使用运算符号隐式转换
    // 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型
    // 不能使用 + 与字符串进行隐式转换，会转换为字符串
    console.log( a*1, b*1, c*1, d*1, e*1 )
    // console.log( b * 1 )
    // console.log( c * 1 ) // true 为 1，false 为 0
    // console.log( d * 1 ) // null 为 0
    // console.log( e * 1 ) // 转换失败 非数字

💦 计算年龄案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var year = prompt('请输入你的初始年份....') // 变量接收的值为字符串
    console.log( typeof year )
    var age = 2022 - year // year 隐式转换为数字型
    alert('你的年龄为'+ age + '岁')
  </script>
</body>
</html>

💦 转换为布尔型

代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined ，其余值都会被转换为 true。

// 代表空或否定的值转布尔值
    console.log(Boolean(''))
    console.log(Boolean(0))
    console.log(Boolean(NaN))
    console.log(Boolean(null))
    console.log(Boolean(undefined))
    // 非空、不为否定的值
    console.log(Boolean('123'))
    console.log(Boolean(1))
    console.log(Boolean(-1))
    console.log(Boolean(Infinity))
    console.log(Boolean(-Infinity))

🥽 运算符

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有：

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

🌊 算数运算符

算术运算使用的符号，用于执行两个变量或值的算术运算。

console.log(1+1)
    console.log(2-1)
    console.log(3*2)
    console.log(3/3)
    console.log(3/2)
    console.log(4%2) // 取模即求4/2的余数 可以整除，余数为0
    console.log(3%2) // 不能整除 余数为1

判断一个数能够被整除：

余数是0 就说明这个数能被整除，这就是 % 取余运算符的主要用途

🌊 浮点数的精度问题

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。

在计算机中数的存储采用的是二进制，二进制无法精确的表示小数，所以会造成精度不准确的结果。

var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001

不要直接判断两个浮点数是否相等

🌊 表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

表达式是由数字、运算符、变量等组成的式子

比如：

1+1
a+1
1*12
12/2
...

表达式最终都会有一个结果，返回给我们，我们成为返回值(表达式运算的结果)

🌊 递增和递减运算符

【视频链接】

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ – ）运算符来完成。

在 JavaScript 中，递增（++）和递减（ – ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

注意：递增和递减运算符必须和变量配合使用。

递增和递减运算符就是让变量加一或减一

前置递增递减和后置递增递减：

前置递增递减和后置递增递减运算符可以简化代码的编写，让变量的值 + 1 或 -1 比以前写法更简单
单独使用时，运行结果相同
前置递增递减和后置递增递减的区别：
主要在于变量+1或-1的返回值是在什么时候进行返回。
前置的返回值在变量加一或减一之后返回；而后置是在变量加一或减一之前返回返回值。
符号在前变量先+1或-1再返回值参与后面的运算，符号在后先返回变量的值参与后面的运算再该变量+1或-1。
后置：先原值运算，后自加（先人后己）
前置：先自加，后运算（先已后人）
开发时，大多使用后置递增/减，并且代码独占一行，例如：num++; 或者 num–;

var a = 10
      ++a               // a = 11 a递增，a+1
      var b = ++a + 2   // 前置，a先+1，再返回12参与运算 b = 12+2 = 14
      console.log(b)    // 14
      var c = 10
      c++               // c递增，c = 11
      var d = c++ + 2   // 后置，先返回值参与运算，c再+1，d = 11+2，c = 11+1 = 12
      console.log(d)    // 13
      var e = 10 
      // 等号右边从左向右计算
      // 第一个e 
      // 后置 先返回值参与运算，e再+1
      // f = 10 + ++e，e = 10+1 = 11
      // 第二个e
      // 前置，e先+1，再返回值参与运算
      // e = 11+1 = 12
      // f = 10 + 12 = 22
      var f = e++ + ++e
      console.log(f) // 22

🌊 比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

// 除了 === !== 其他比较运算符会进行隐式转换
    console.log(2>'1')    // t
    console.log(2>1)      // t
    console.log(1<3)      // t
    console.log(4<'3')    // f
    console.log(3>='3')   // t
    console.log(3>=2)     // t
    console.log(4<=4)     // t
    console.log(4==4)     // t
    console.log(4=='4')   // t
    console.log(4!='4')   // f
    // 全等不会进行隐式转换
    // 会比较数值和数据类型
    console.log(4!=='4')  // t
    console.log(4==='4')  // f

💦 三种 = 运算符

var num1 = 10;
var num2 = 100;
var res1 = num1 > num2;   // f
var res2 = num1 == 11;    // f
var res3 = num1 != num2;  // t

🌊 逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

💦 逻辑与 &&

两边都是 true才返回 true，否则返回 false

一假都假 (只要其中一个为假就为假)

console.log(1>2 && 2>1)
    console.log(1==1 && 2<1)
    console.log(1==1 && 2>1)

💦 逻辑或 ||

两边都为 false 才返回 false，否则都为true

一真都真(只要其中一个为真就为真)

console.log(1>2 || 2>1)
    console.log(1==1 || 2<1)
    console.log(1!=1 || 2<1)

💦 逻辑非！

逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

console.log(!true)
    console.log(!false)
    console.log( !(4>'2') )

💦 短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

表达式1 && 表达式2当表达式1为真时，会继续判断表达式的结果，因为&&要两个表达式都为真才为真，所以表达式1为真会继续判断第二个表达式，此时由于运行到了表达式2，所以该与运算的结果为表达式2的结果。当表达式1为假时，不会判断表达式2，因为与运算一假都假，表达式1为假已经可以判断整个与运算，所以不会继续判断第二个表达式，最后与运算的结为表达式1的结果。

如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

表达式1 || 表达式2当表达式1为假时，会继续判断表达式的结果，因为 || 要两个表达式都为假才为假，所以表达式1为假会继续判断第二个表达式，此时由于运行到了表达式2，所以该或运算的结果为表达式2的结果。当表达式1为真时，不会判断表达式2，因为或运算一真都真，表达式1为真已经可以判断整个或运算，所以不会继续判断第二个表达式，最后或运算的结为表达式1的结果。

如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

// 1 为真(非0为真)，继续向后判断
    // 结果输出 12
    console.log( 1 && 12 );
    // 0 为假，不继续判断
    // 输出 0
    console.log( 0 && 213 );
    console.log( 0 || 12 ); // 12
    console.log( 0 || 0 );  // 0
    console.log( 1 || 0 );  // 1

🌊 赋值运算符

用来把数据赋值给变量的运算符

var a = 100
    a += 3 // 等价于 a = a+3
    console.log( a )
    a -= 3 // 等价于 a = a-3
    console.log( a )
    a *= 10 // 等价于 a = a*10
    console.log( a )
    a /= 10 // 等价于 a = a/10
    console.log( a )
    a %= 3  // 等价于 a = a%3
    console.log( a )

🌊 运算符优先级

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

🥽 流程控制

🌊 流程控制

流程控制就是来控制我们的代码按照什么结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

🌊 顺序流程控制

程序会按照代码的先后顺序，依次执行，代码从上到下执行

🌊 分支流程控制

分支结构：

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

JS 语言提供了两种分支结构语句

if 语句
switch 语句

💦 if 语句

语法：

// 条件成立执行代码，否则不执行
if (条件表达式) {
    // 条件成立执行的代码语句
}

var age = prompt('请输入你的年龄')
      if ( parseInt(age)>=18 ) {
        alert('你成年了~')
      }

[JS]JavaScript基础学习笔记(黑马pink+尚硅谷李立超)（二）

💧 isNaN()

💦 字符串型 String

💧 字符串转义符

💧 字符串长度

💧 字符串拼接

💦 布尔型 Boolean

💦 Undefined

💦 Null

🌊 获取变量数据类型

🌊 字面量

🌊 数据类型转换

💦 转换为字符串

💦 转换为数字型

💦 计算年龄案例

💦 转换为布尔型

🥽 运算符

🌊 算数运算符

🌊 浮点数的精度问题

🌊 表达式和返回值

🌊 递增和递减运算符

🌊 比较运算符

💦 三种 = 运算符

🌊 逻辑运算符

💦 逻辑与 &&

💦 逻辑或 ||

💦 逻辑非！

💦 短路运算（逻辑中断）

🌊 赋值运算符

🌊 运算符优先级

🥽 流程控制

🌊 流程控制

🌊 顺序流程控制

🌊 分支流程控制

💦 if 语句

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

[JS]JavaScript基础学习笔记(黑马pink+尚硅谷李立超)（二）

💧 isNaN()

💦 字符串型 String

💧 字符串转义符

💧 字符串长度

💧 字符串拼接

💦 布尔型 Boolean

💦 Undefined

💦 Null

🌊 获取变量数据类型

🌊 字面量

🌊 数据类型转换

💦 转换为字符串

💦 转换为数字型

💦 计算年龄案例

💦 转换为布尔型

🥽 运算符

🌊 算数运算符

🌊 浮点数的精度问题

🌊 表达式和返回值

🌊 递增和递减运算符

🌊 比较运算符

💦 三种 = 运算符

🌊 逻辑运算符

💦 逻辑与 &&

💦 逻辑或 ||

💦 逻辑非 ！

💦 短路运算（逻辑中断）

🌊 赋值运算符

🌊 运算符优先级

🥽 流程控制

🌊 流程控制

🌊 顺序流程控制

🌊 分支流程控制

💦 if 语句

热门文章

最新文章

相关课程

相关电子书

相关实验场景

💦 逻辑非！