JavaScript学习笔记

2022/8/7 14:22:57

本文主要是介绍JavaScript学习笔记,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

JavaScript学习笔记

一、基本语法

  • 字面量

    • 字面量其实就是一个值,它所代表的含义就是它字面的意思
    • 比如:1 2 3 4 100 "hello" true null .....
    • 在js中所有的字面量都可以直接使用,但是直接使用字面量并不方便
  • 变量

    • 变量可以用“存储”字面量
    • 并且变量中存储的字面量可以随意的修改
    • 通过变量可以对字面量进行描述,并且变量比较方便修改

变量中并不存储任何值,而是存储值的内存地址!
image

  • 常量

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

  1. 标识符只能含有字母、数字、下划线、$,且不能以数字开头
  2. 标识符不能是JS中的关键字和保留字,也不建议使用内置的函数或类名作为变量名
  3. 命名规范:
  • 通常会使用驼峰命名法

    • 首字母小写,每个单词开头大写
    • 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中原始值一共有七种

  1. Number
  2. BigInt
  3. String
  4. Boolean
  5. Null
  6. Undefined
  7. Symbol
    七种原始值是构成各种数据的基石
    原始值在JS中是不可变类型,一旦创建就不能修改

三、类型转换

类型转换指将一种数据类型转换为其他类型,将其他类型转换为(字符串、数值和布尔值)

3.1 转换为字符串

  1. 调用toString()方法将其他类型转换为字符串
  • 调用xxx的yyy方法
    --> xxx.yyy()
  • 由于null和undefined中没有toString()
    所以对这两个东西调用toString()时会报错
  1. 调用String()函数将其他类型转换为字符串
  • 调用xxx函数
    --> xxx()
  • 原理:
    对于拥有toString()方法的值调用String()函数时,
    实际上就是在调用toString()方法
    对于null,则直接转换为"null"
    对于undefined,直接转换为"undefined"

3.2 转换为数值

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

  1. 使用Number()函数来将其他类型转换为数值
    转换的情况:
  • 字符串:
    • 如果字符串是一个合法的数字,则会自动转换为对应的数字
    • 如果字符串不是合法数字,则转换为NaN
    • 如果字符串是空串或纯空格的字符串,则转换为0
  • 布尔值:
    • true转换为1,false转换为0
    • null 转换为 0
    • undefined 转换为 NaN
      专门用来将字符串转换为数值的两个方法
  1. parseInt() —— 将一个字符串转换为一个整数
    • 解析时,会自左向右读取一个字符串,直到读取到字符串中所有的有效的整数
    • 也可以使用parseInt()来对一个数字进行取整
  2. parseFloat() —— 将一个字符串转换为浮点数
    • 解析时,会自左向右读取一个字符串,直到读取到字符串中所有的有效的小数

3.3 转换为布尔值

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

  1. 数字:
    • 0 和 NaN 转换为false
    • 其余是true
  2. 字符串:
    • 空串 转换为 false
    • 其余是true
      null和undefined 都转换为 false
  3. 对象:对象会转换为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
    >用来检查左值是否大于右值
    >=用来检查左值是否大于或等于右值
    <用来检查左值是否小于右值
    <=用来检查左值是否小于或等于右值

注意:

  1. 当对非数值进行关系运算时,它会先将前转换为数值然后再比较
  2. 当关系运算符的两端是两个字符串,它不会将字符串转换为数值,而是逐位的比较字符的Unicode编码,利用这个特点可以对字符串按照字母排序
  3. 注意比较两个字符串格式的数字时一定要进行类型转换
        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学习笔记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程