JavaScript笔记

学完HTML5+CSS3的小伙伴，学习JS时，要多敲多练多想多拓展

刚开始入门JS的时候，我们不需要纠结那么多，有些需要先记住，后面会慢慢明白为什么是这样的

JS基础部分

我们为什么要学习JS？

js是前端开发的核心，没有js，前端就没有了灵魂，它是一门解释型的语言，不需要我们手动编译，而是通过解释器边解释，边执行，也就是我们所说的JS引擎，不管是浏览器还是Node.js都要遵循我们的ECMAScript的语法（ES）标准，ES6是一个大的变化，其中的一些语法也要掌握，Node.js后续也会有。

js可以像其他类型的值一样赋值给任意变量，也可以作为参数传递给其他函数，所有JS的函数是非常重要的，函数式编程让代码更加有灵活性。

js是一个单线程的编程语言，总而言之，言而总之，js同一时间只能做一件事，不像Java那样多线程，一个时间干多件事。有人可能会问，一个时间做一件事，那效率得多低呀，性能得多差呀，单线程虽然降低了JS代码的复杂程度，但是JS性能变差，所以为了解决问题，JS又提供了异步的编程方式，提高代码运行速度，同步异步这些后面也会有说到。

几乎大多数的编程语言都是面向对象的，同样我们的JS也是，这个对象非比"对象",面向对象，通俗的来说，就是把一些相关的功能都封装到一个对象中，使用的时候直接调用就可以完成该功能，比如：汽车，汽车里面的每个大的零件都是有小的零件组成，我们把小零件都封装成一个大的零件----也就是对象，我们组装车的时候，只需要使用这个大零件就行，至于小零件怎么安装的，我们不需要考虑。

JS基础中的基础语法

如果你了解其他的编程语言，第一个程序都是编写HelloWorld,我们直接上代码：

编写位置（你不知道编写位置，你怎么编写）

编写位置分为三种：

script标签内部

<script>
    // 此处编写JS代码
</script>

外部的JS文件

<script src="xxx.script"></script>

注意：这个可不是你css学的link引入，注意这个是双标签的  script

标签的属性中

    <button onclick="js代码">按钮</button>
    <a href="javascript:js代码;">超链接</a>

这个三个呀，你肯定该说，这要怎么用呀，到底用哪个呢？

js代码少可以写在script内部，如果多一些就外部引入，标签属性的方式，框架用的还是比较多的

这个地方注意一点的是，你要注意引入的位置，js是从上往下执行的，如果你把js代码放到页面渲染之前执行，就会出问题，所以一般的话，把js放到DOM 渲染结束后的位置

基本输出语句

那我们就先试试几个打印语句吧，为以后的排错输出打下基础：

    <script>
        alert("我是弹出框语句")
        //  控制台就是页面点击F12打开
        console.log("我是控制台输出语句")
        document.write("我是页面打印语句")
    </script>

注释的方式和分号的使用

单行注释
```
// 单行注释
```
多行注释
```
/*   多行注释    */
```

分号

3.1 基本上大多数的编程语言都需要加分号，但是JS不一样，可加可不加，完全看自己的心情。

3.2 JS严格区分大小写

3.3 同时我们也可以忽略空格，空格和换行都会被忽略掉，但是我们为了代码的美观，可以适当的使用一些插件来美化。

<!DOCTYPE html>
<html lang="zh">
    <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>Hello World</title>

        <!-- 1.JS代码需要编写到script中 -->
        <script>
            alert("哈哈哈哈")

            console.log('你猜我在哪？')

            document.write('你猜我在哪？')

        </script>
          <!-- 
            2.可以将js编写外部的js文件中，然后通过script标签进行引入
        	-->
    		<script src="./script/script.js"></script>
    </head>
    <body>
         <!--
            3.可以将js代码编写到指定属性中
        -->
       <button onclick="alert('你点我干嘛！')">点我一下</button>

        <hr>

        <a href="javascript:alert(123);">超链接</a>
        
        <hr>

        <a href="javascript:;">超链接</a></body>
</html>

字面量和变量

1.字面量

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

2.变量

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

变量有三种声明方式：

1.var ---有很多缺陷，会造成变量的值泄露，一般很少使用

2.let --推荐使用，有块级作用域，不可以重复声明，没有变量提升

3.const --用于声明常量，也可以声明对象和数组这些复杂数据类型的

		let num = 10
        const obj = {}
        const arr = []

变量的内存结构（看图理解）：

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

JavaScript笔记

我们可以通过：
	console.log(a===b)  //true
的形式查看两者的内存地址是否指向同一个

常量

在JS中，使用const声明常量，常量只能赋值一次，重复赋值会报错

在JS中除了常规的常量外，有一些对象类型的数据我们也会声明为常量

const PI = 3.1415926

标识符

在JS中，所有可以由我们自主命名的内容，都可以认为是一个标识符
像变量名函数名类名...
使用标识符需要遵循如下的命名规范：
1. 标识符只能含有字母、数字、下划线、$，且不能以数字开头
2. 标识符不能是JS中的关键字和保留字，也不建议使用内置的函数或类名作为变量名
3. 命名规范：
- 通常会使用驼峰命名法
- 首字母小写，每个单词开头大写
- maxlength --> maxLength
- borderleftwidth --> borderLeftWidth
- 类名会使用大驼峰命名法
- 首字母大写，每个单词开头大写
- maxlength --> MaxLength
- 常量的字母会全部大写
- MAX_LENGTH

数据类型

数值

数值（Number）

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

            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 =666666666666888888888888888888888855555555555n

其他进制的数字：

二进制 0b

八进制 0o

十六进制 0x

  			a = 0b1010
            a = 0o10
            a = 0xff
            console.log(a)  //以十进制打印

类型检查

typeof 运算符

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

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

字符串

字符串（String）

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

  let str = `你好，${name}`
   console.log(typeof str)  //"string"

其他数据类型

`布尔值（Boolean）`

布尔值主要用来进行逻辑判断
布尔值只有两个true 和 false

使用typeof检查一个布尔值时会返回 "boolean"

     let bool = true // 真
       bool = false // 假
       let num = 1

`空值（Null）`

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

使用typeof无法检查空值

let a = null
console.log(typeof a)   //"object"

`未定义（Undefined）`

当声明一个变量而没有赋值时，它的值就是Undefined
Undefined类型的值只有一个就是 undefined
使用typeof检查一个Undefined类型的值时，会返回 "undefined"
```
       let b
       console.log(typeof b)  //"undefined"
```

`符号（Symbol）`

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

 	let c = Symbol() // 调用Symbol()创建了一个符号
       console.log(typeof c)

`七种数据类型`

JS中原始值一共有七种

Number，BigInt，String，Boolean，Null，Undefined，Symbol

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

JavaScript笔记

类型转换

`转换为字符串`

调用toString()方法将其他类型转换成字符串
```
let a = 10
a = a.toString() // "10"
```

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

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

        b = null // "null"
        b = undefined // "undefined"
        b = true
         
        console.log(typeof b, b)
         
        b = String(b)
         
        console.log(typeof b, b)

null和undefined没有toString()方法，通常用String函数，

类型转换不是改变了原始值，而是根据原始值去创建了一个新的类型的值

`转换为数值`

1.使用Number()函数来将其他类型转换为数值

转换的情况：

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

2.专门将字符串转化为数值

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

`转换为Boolean`

1.使用Boolean()函数来将其他类型转换为布尔值

 		- 转换的情况：
                    数字：
                        - 0 和 NaN 转换为false
                        - 其余是true

                    字符串：
                        - 空串 转换为 false
                        - 其余是true

                    null和undefined 都转换为 false

                    对象：对象会转换为true

所有表示空性的没有的错误的值都会转换为false：
0、NaN、空串、null、undefined、false

运算符

运算符可以用来对一个或多个操作数（值）进行运算

`算数运算符`

 		+ 加法运算符
       - 减法运算符
       * 乘法运算符
       / 除法运算符
       ** 幂运算
     % 模运算，两个数相除取余数

注意：

算术运算时，除了字符串的加法其他运算的操作数是非数值时，都会转换为数值然后再运算

        let a = 1 + 1
        a = 10 - 5
        a = 2 * 4
        a = 10 / 5
        a = 10 / 3
        a = 10 / 0 // Infinity
        a = 10 ** 4
        a = 9 ** .5 // 开方
        a = 10 % 2
        a = 10 % 3
        a = 10 % 4

JS是一门弱类型语言，当进行运算时会通过自动的类型转换来完成运算

		 a = 10 - '5' // 10 - 5
        a = 10 + true // 10 + 1
        a = 5 + null // 5 + 0
        a = 6 - undefined // 6 - NaN

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

当任意一个值和字符串做加法运算时，它会先将其他的值转化为字符串，然后再做拼串操作

可以利用这个特征来完成隐式类型转换

可以通过为任意类型 + 一个空串的形式来将其转换为字符串

   a = 'hello' + 'world'
        a = '1' + 2 // "1" + "2"

        a = true

        a = a + ''

        console.log(typeof a, a)  //string true

`赋值运算符`

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

				 =
                    - 将符号右侧的值赋值给左侧的变量
                ??=
                    - 空赋值
                    - 只有当变量的值为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
  -------------------------------------------------------------------
      let a = 10
        a = 5 // 将右边的值 赋值 给左边的变量
        let b = a // 一个变量只有在=左边时才是变量，在=右边时它是值

        a = 66
        a = a + 11 // 大部分的运算符都不会改变变量的值，赋值运算符除外

        a = 5
        // a = a + 5 // 10
        a += 5 // 在a原来值的基础上增加5
       
        a = null
		//当a的值为null或者undefined时，就会赋值
        a ??= 101

        console.log(a)

`一元运算符`

一元的加减

正号 +

不会改变数值的符号

负号 -

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

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

小试：
       let a = -10
       a = -a

       let b = '123'
       
       b = +b // b = Number(b)

       console.log(typeof b, b)

`自增自减运算符`

自增运算符
- 使用后会使原来的变量加1
- 自增分为前自增(++a)和后自增(a++)
- 前自增：先自增后赋值 新值
- 后自增：先赋值后自增 旧值
```
let n = 5
  let result = n++ + ++n + n
  是多少呢？
```
自减运算符

同自增，运行的方式都是一样的

`逻辑运算符`

逻辑非！
- 可以用来对一个值进行非运算！
- 它可以对一个布尔值进行取反操作
  - true --> false
  - false --> true
- 如果对一个非布尔值类型的值进行取反，它会先将其转化为布尔值
  
  可以利用这个特点将其他类型转化为布尔值
- 类型转换
  1. 转化为字符串
    - 显式转换
      
      String()
    - 隐式转换
      
      + ""
  2. 转化为数值
    - 显式转换
      
      Number()
    - 隐式转换
      
      +
  3. 转化为布尔值
    - 显式转换
      
      Boolean()
    - 隐式转换
      
      !!
逻辑与 &&
- 可以对两个值进行运算
- 当&&左右都为true时，则返回true，否则返回false
- 与运算是短路的与，如果第一个是false，就不看第二个值了
- 对于非布尔值运算，它会转换为布尔值然后运算，但是最终会返回原值
  - 如果第一个值是false，则直接返回第一个值
  - 如果第一个值为true，则返回第二个值
逻辑或 ||
- 可以对两个值进行或运算
- 当||左右有true时，则返回true，否则返回false
- 或运算是找true，如果找到true，就直接返回
- 对于非布尔值或运算，它会转换为布尔值然后运算，但是最终会返回原值
  - 如果第一个为true，则返回第一个
  - 如果第一个值为false，则返回第二个值

也就是说：

逻辑与&&：必须都要满足，如果一个就是false，就不用看第二个了，因为有一个false就为false了，没必要看第二个

逻辑或||：有一个满足就可，如果第一个true了，也就直接返回了，没必要看第二个了

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

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

`关系运算符`

关系运算符：关系运算符用来检查两个值之间的关系是否成立成立返回true，不成立返回false

 关系运算符
                >
                    - 用来检查左值是否大于右值
                >=
                    - 用来检查左值是否大于或等于右值
                <
                    - 用来检查左值是否小于右值
                <=
                    - 用来检查左值是否小于或等于右值

注意：

1.当对非数值进行关系运算时，它会先将前转换为数值然后再比较

2.当关系运算符的两端是两个字符串，它不会将字符串转换为数值，而是逐位的比较字符的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)

`相等运算符`

==

相等运算符，用来比较两个值是否相等，返回一个布尔值

使用相等运算符比较两个不同类型的值时，它会将其转换为相同的类型（通常转换为数值）然后再比较，类型转换后值相同也会返回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)

`条件运算符`

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

也就是说：

先判断条件表达式，如果返回true，就执行表达式1，如果返回的是false，就执行表达式2

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

三元运算符的值就是比较之后返回true的对应的值

`运算符的优先级`

优先级查询：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

流程控制

持续更新中.........................................

JS基础部分

我们为什么要学习JS？

JS基础中的基础语法

编写位置（你不知道编写位置，你怎么编写）

基本输出语句

注释的方式和分号的使用

字面量和变量

常量

标识符

数据类型

数值

类型检查

字符串

其他数据类型

布尔值（Boolean）

空值 （Null）

未定义（Undefined）

符号（Symbol）

七种数据类型

类型转换

转换为字符串

转换为数值

转换为Boolean

运算符

算数运算符

赋值运算符

一元运算符

自增自减运算符

逻辑运算符

关系运算符

相等运算符

条件运算符

运算符的优先级

流程控制

相关文章

`布尔值（Boolean）`

`空值（Null）`

`未定义（Undefined）`

`符号（Symbol）`

`七种数据类型`

`转换为字符串`

`转换为数值`

`转换为Boolean`

`算数运算符`

`赋值运算符`

`一元运算符`

`自增自减运算符`

`逻辑运算符`

`关系运算符`

`相等运算符`

`条件运算符`

`运算符的优先级`