JavaScript学习笔记

一、基本语法

字面量
- 字面量其实就是一个值，它所代表的含义就是它字面的意思
- 比如：1 2 3 4 100 "hello" true null .....
- 在js中所有的字面量都可以直接使用，但是直接使用字面量并不方便
变量
- 变量可以用“存储”字面量
- 并且变量中存储的字面量可以随意的修改
- 通过变量可以对字面量进行描述，并且变量比较方便修改

变量中并不存储任何值，而是存储值的内存地址！

常量
- 在JS中，使用const声明常量，常量只能赋值一次，重复赋值会报错。在JS中除了常规的常量外，有一些对象类型的数据我们也会声明为常量
标识符
在JS中，所有可以由我们自主命名的内容，都可以认为是一个标识符
像变量名函数名类名...
使用标识符需要遵循如下的命名规范：

标识符只能含有字母、数字、下划线、$，且不能以数字开头
标识符不能是JS中的关键字和保留字，也不建议使用内置的函数或类名作为变量名
命名规范：

通常会使用驼峰命名法
- 首字母小写，每个单词开头大写
- maxlength --> maxLength
- borderleftwidth --> borderLeftWidth
类名会使用大驼峰命名法
- 首字母大写，每个单词开头大写
- maxlength --> MaxLength
常量的字母会全部大写
- MAX_LENGTH

二、数据类型

2.1 数值（Number、Bigint）

数值（Number）

在JS中所有的整数和浮点数都是Number类型
JS中的数值并不是无限大的，当数值超过一定范围后会显示近似值
Infinity 是一个特殊的数值表示无穷
所以在JS中进行一些精度比较高的运算时要十分注意
NaN 也是一个特殊的数值，表示非法的数值(Not a Number)

let a = 10
a = 10.5
a = 3.14
a = 9999999999999991111111111111111111
a = 99999 ** 99999
a = Infinity
a = 1.11111111111111111111111111111111111111111111
a = 0.0000000000000000000000000000000000001
a = 0.1 + 0.2
a = 1 - "a" // NaN (Not a Number)
a = NaN

大整数（BigInt）

大整数用来表示一些比较大的整数
大整数使用n结尾，它可以表示的数字范围是无限大

 a = 99999999999999999999999999999999999999999999999999n

其他进制的数字：

二进制 0b
八进制 0o
十六进制 0x

2.2 类型检查

使用typeof进行类型检查

typeof用来检查不同的值的类型
它会根据不同的值返回不同的结果

let a = 10
let b = 10n
console.log(typeof a) // "number"
console.log(typeof b) // "bigint"

2.3 字符串

字符串（String）

在JS中使用单引号或双引号来表示字符串
转义字符
" --> "
' --> '
\ --> \
\t --> 制表符
\n --> 换行
模板字符串
- 使用反单引号` 来表示模板字符串
- 模板字符串中可以嵌入变量
- 使用typeof检查一个字符串时会返回 "string"

            let a = "Hello"
            a = "你好"
            a = '这是一个"字\\\\符串'
            a = "呵呵\t哈哈哈"
            a = "呵呵\n哈哈哈"

            a = "今天天气真不错！"

            a = `今天天气挺好的！`

            let name = "猪八戒"

            let str = `你好，${name}`

            let b = 10

            //    console.log(`b = ${b}`)

            let c = "5"
            c = "hhh"
            c = `aaa`
            console.log(typeof c)

2.4 布尔值（Boolean）

布尔值主要用来进行逻辑判断
布尔值只有两个true 和 false
使用typeof检查一个布尔值时会返回 "boolean"

2.5 空值（Null）

空值用来表示空对象
空值只有一个 null
使用typeof检查一个空值时会返回"object"
使用typeof无法检查空值

2.6 未定义（Undefined）

当声明一个变量而没有赋值时，它的值就是Undefined
Undefined类型的值只有一个就是 undefined
使用typeof检查一个Undefined类型的值时，会返回 "undefined"

2.7 符号（Symbol）

用来创建一个唯一的标识
使用typeof检查符号时会返回 "symbol"

JS中原始值一共有七种

Number
BigInt
String
Boolean
Null
Undefined
Symbol
七种原始值是构成各种数据的基石
原始值在JS中是不可变类型，一旦创建就不能修改

三、类型转换

类型转换指将一种数据类型转换为其他类型，将其他类型转换为（字符串、数值和布尔值）

3.1 转换为字符串

调用toString()方法将其他类型转换为字符串

调用xxx的yyy方法
--> xxx.yyy()
由于null和undefined中没有toString()
所以对这两个东西调用toString()时会报错

调用String()函数将其他类型转换为字符串

调用xxx函数
--> xxx()
原理：
对于拥有toString()方法的值调用String()函数时，
实际上就是在调用toString()方法
对于null，则直接转换为"null"
对于undefined，直接转换为"undefined"

3.2 转换为数值

将其他的数据类型转换为数值

使用Number()函数来将其他类型转换为数值
转换的情况：

字符串：
- 如果字符串是一个合法的数字，则会自动转换为对应的数字
- 如果字符串不是合法数字，则转换为NaN
- 如果字符串是空串或纯空格的字符串，则转换为0
布尔值：
- true转换为1，false转换为0
- null 转换为 0
- undefined 转换为 NaN
  专门用来将字符串转换为数值的两个方法

parseInt() —— 将一个字符串转换为一个整数
- 解析时，会自左向右读取一个字符串，直到读取到字符串中所有的有效的整数
- 也可以使用parseInt()来对一个数字进行取整
parseFloat() —— 将一个字符串转换为浮点数
- 解析时，会自左向右读取一个字符串，直到读取到字符串中所有的有效的小数

3.3 转换为布尔值

使用Boolean()函数来将其他类型转换为布尔值
转换的情况：

数字：
- 0 和 NaN 转换为false
- 其余是true
字符串：
- 空串转换为 false
- 其余是true
  null和undefined 都转换为 false
对象：对象会转换为true
- 所有表示空性的没有的错误的值都会转换为false：
  0、NaN、空串、null、undefined、false

四、运算符

4.1 算术运算符

运算符（操作符）

运算符可以用来对一个或多个操作数（值）进行运算
算术运算符：
+ 加法运算符
- 减法运算符
* 乘法运算符
/ 除法运算符
** 幂运算
% 模运算，两个数相除取余数
注意：
- 算术运算时，除了字符串的加法，
  其他运算的操作数是非数值时，都会转换为数值然后再运算

JS是一门弱类型语言，当进行运算时会通过自动的类型转换来完成运算
当任意一个值和字符串做加法运算时，它会先将其他值转换为字符串，然后再做拼串的操作
可以利用这一特点来完成类型转换
可以通过为任意类型 + 一个空串的形式来将其转换为字符串,其原理和String()函数相同，但使用起来更加简洁

4.2 赋值运算符

赋值运算符用来将一个值赋值给一个变量

=
- 将符号右侧的值赋值给左侧的变量
??=
- 空赋值
- 只有当变量的值为null或undefined时才会对变量进行赋值
+=
- a += n 等价于 a = a + n
-=
- a -= n 等价于 a = a - n
*=
- a *= n 等价于 a = a * n
/=
- a /= n 等价于 a = a / n
%=
- a %= n 等价于 a = a % n
**=
- a **= n 等价于 a = a ** n

4.3 一元的正负

一元的±

正号
- 不会改变数值的符号

负号
- 可以对数值进行符号位取反

当我们对非数值类型进行正负运算时，会先将其转换为数值然后再运算

let a = -10
a = -a

let b = '123'

b = +b // b = Number(b)

console.log(typeof b, b)

4.4 自增和自减

++ 自增运算符

++ 使用后会使得原来的变量立刻增加1
自增分为前自增(++a)和后自增(a++)
无论是++a还是a++都会使原变量立刻增加1
不同的是++a和a++所返回的值不同
a++ 是自增前的值旧值
++a 是自增后的值新值

let a = 10
// let b = a++
// console.log("a++ =", b)

let b = ++a
// console.log("++a =", b)
// console.log(a)

let n = 5
//5 + 7 + 7
let result = n++ + ++n + n
// console.log(result)

-- 自减运算符

使用后会使得原来的变量立刻减小1
自减分为前自减(--a)和后自减(a--)
无论是--a还是a--都会使原变量立刻减少1
不同的是--a和a--的值不同
--a 是新值
a-- 是旧值

4.5 逻辑运算符

4.5.1 ! 逻辑非

! 可以用来对一个值进行非运算
它可以对一个布尔值进行取反操作
true --> false
false --> true
如果对一个非布尔值进行取反，它会先将其转换为布尔值然后再取反
可以利用这个特点将其他类型转换为布尔值
类型转换
1. 转换为字符串
  - 显式转换
    String()
  - 隐式转换
    + ""
2. 转换为数值
  - 显式转换
    Number()
  - 隐式转换
    +
3. 转换为布尔值
  - 显式转换
    Boolean()
  - 隐式转换
    !!

4.5.2 && 逻辑与

可以对两个值进行与运算
- 当&&左右都为true时，则返回true，否则返回false
- 与运算是短路的与，如果第一个值为false，则不看第二个值
- 与运算是找false的，如果找到false则直接返回，没有false才会返回true
- 对于非布尔值进行与运算，它会转换为布尔值然后运算
  但是最终会返回原值
  - 如果第一个值为false，则直接返回第一个值
    如果第一个值为true，则返回第二个值

4.5.3 || 逻辑或

可以对两个值进行或运算
- 当||左右有true时，则返回true，否则返回false
- 或运算也是短路的或，如果第一个值为true，则不看第二个值
- 或运算是找true，如果找到true则直接返回，没有true才会返回false
- 对于非布尔值或运算，它会转换为布尔值然后运算
  但是最终会返回原值
  - 如果第一个值为true，则返回第一个
    如果第一个值为false，则返回第二个

        let result = true && true // true
        result = true && false // false
        result = false && true // false
        result = false && false // false

        // true && alert(123) // 第一个值为true，alert会执行
        false && alert(123) // 第一个值为false，alert不会执行

        //       true && true  -> true
        result = 1 && 2 // 2 
        //       true && false -> false
        result = 1 && 0 // 0
        //       false && false -> false 
        result = 0 && NaN // 0


        result = true || false // true
        result = false || true // true
        result = true || true // true
        result = false || false // false

        // false || alert(123) // 第一个值为false，alert会执行
        true || alert(123) // 第一个值为true，alert不会执行

        result = 1 || 2 // 1
        result = "hello" || NaN // "hello"
        result = NaN || 1 // 1
        result = NaN || null // null

        console.log(result)

4.6 关系运算符

关系运算符

关系运算符用来检查两个值之间的关系是否成立
成立返回true，不成立返回false
>用来检查左值是否大于右值
>=用来检查左值是否大于或等于右值
<用来检查左值是否小于右值
<=用来检查左值是否小于或等于右值

注意：

当对非数值进行关系运算时，它会先将前转换为数值然后再比较
当关系运算符的两端是两个字符串，它不会将字符串转换为数值，而是逐位的比较字符的Unicode编码,利用这个特点可以对字符串按照字母排序
注意比较两个字符串格式的数字时一定要进行类型转换

        let result = 10 > 5 // true
        result = 5 > 5 // false
        result = 5 >= 5 // true

        result = 5 < "10" // true
        result = "1" > false // true

        result = "a" < "b" // true
        result = "z" < "f" // false
        result = "abc" < "b" // true

        result = "12" < "2" // true
        result = +"12" < "2" // false

        // 检查num是否在5和10之间
        let num = 4
        // result = 5 < num < 10 // 错误的写法
        result = num > 5 && num < 10

        console.log(result)

4.7 相等运算符

==相等运算符，用来比较两个值是否相等

使用相等运算符比较两个不同类型的值时，
它会将其转换为相同的类型（通常转换为数值）然后再比较
类型转换后值相同也会返回true
null和undefined进行相等比较时会返回true
NaN不和任何值相等，包括它自身

===全等运算符，用来比较两个值是否全等

它不会进行自动的类型转换，如果两个值的类型不同直接返回false
null和undefined进行全等比较时会返回false

!=不等，用来检查两个值是否不相等

会自动的进行类型转换

!==不全等，比较两个值是否不全等

不和自动的类型转换

        let result = 1 == 1 // true
        result = 1 == 2 // false
        result = 1 == '1' // true
        result = true == "1" // true

        result = null == undefined // true
        result = NaN == NaN // false

        result = 1 === "1" // false
        result = null === undefined // false

        result = 1 != 1 // false
        result = 1 != "1" // false
        result = 1 !== "1" // true

        console.log(result)

4.8 条件运算符

条件运算符
条件表达式 ? 表达式1 : 表达式2

执行顺序：
条件运算符在执行时，会先对条件表达式进行求值判断，
如果结果为true，则执行表达式1
如果结果为false，则执行表达式2

        // false ? alert(1) : alert(2)

        let a = 100
        let b = 200
        // a > b ? alert('a大！') : alert("b大！")
        let max = a > b ? a : b

        // alert(max)

4.9 运算符的优先级

和数学一样，JS中的运算符也有优先级，比如先乘除和加减。

可以通过优先级的表格来查询运算符的优先级
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

在表格中位置越靠上的优先级越高，优先级越高越先执行，优先级一样自左向右执行
优先级我们不需要记忆，甚至表格都不需要看
因为()拥有最高的优先级，使用运算符时，如果遇到拿不准的，可以直接通过()来改变优先级即可

JavaScript学习笔记

JavaScript学习笔记

一、基本语法

二、数据类型

2.1 数值（Number、Bigint）

2.2 类型检查

2.3 字符串

2.4 布尔值（Boolean）

2.5 空值 （Null）

2.6 未定义（Undefined）

2.7 符号（Symbol）

三、类型转换

3.1 转换为字符串

3.2 转换为数值

3.3 转换为布尔值

四、运算符

4.1 算术运算符

4.2 赋值运算符

4.3 一元的正负

4.4 自增和自减

4.5 逻辑运算符

4.5.1 ! 逻辑非

4.5.2 && 逻辑与

4.5.3 || 逻辑或

4.6 关系运算符

4.7 相等运算符

4.8 条件运算符

4.9 运算符的优先级

相关文章

2.5 空值（Null）