js 知识

JavaSccript

JavaScript，简称js

网页的行为层 ，实现网页动态效果和用户的交互。

特点： 解释型的，弱类型

Typescript是JavaScript的超集

浏览器端的javascript。

有如下三个部分构成：（重点）

  1. ECMAScript:js的基础，主要规定了一些js的语法规范；

​ ：变量 ，变量数据类型 ，字符串处理 ，控制语句 ，数组 ，函数 ，对象 ，事件

  1. DOM：文档对象模型：提供访问页面的接口；

​ ：处理表单 ，更改css样式 ，更改标签属性 ，更改标签内容

  1. BOM：浏览器对象模型：提供了访问浏览器的一些接口；

​ ：open（“http：//www.baidu.com ”）

​ 读取或检测浏览器属性

1.引用方式

  • 直接将JavaScript代码嵌入HTML中（内嵌式）

内部js代码【一般放在body最后面】

< body>

< script>

​ var a=10

​ function aa() {

​ }

​ aa()

< /script>

< /body>

  • 链接外部的JavaScript代码（外链式）

引入外部js文件

​ < script scr =“ js文件路径”>< /script> 【一般放在herd里】

  • 直接在HTML标记中使用（行内式）

内嵌式

image

外链式

image

行内式

直接在HTML标记中使用
image

image

2.输入方法

1.prompt()方法【输入弹窗】

语法格式：

prompt("提示信息","默认值");

说明：

用户单击“取消”按钮，prompt()方法的返回值是null；单击“确定”按钮，prompt()方法的返回值是用户输入的字符串，并将返回值存储到变量中。

例如：

var name=prompt("请输入您的姓名","李华");

2.alert（）方法

语法格式：

alert("提示信息");

说明：

参数可以是变量、字符串或表达式。

例如：

alert("输入错误！");

3.write（）方法

语法格式：

document.writeln("输出信息");

说明：

（1）参数可以是变量、字符串或表达式。

（2）字符串中可以包含HTML标记或脚本代码。

例如：

document.writeln("明天更美好！");

3.输出方法

1.调用浏览器的弹窗，BOM操作

alert（）【弹窗输出】

2.在浏览器控制台输出

console.log（）；【输出到控制台】(控制台用来调试代码的)

3.报错输出

console.error（）；

4.将内容输出在body中，直接显示在浏览器

document.writeln（）；【输出文档】

js 代码可以在浏览量的控制台里直接输入

4.语法结构规则：

  • 严格区分大小写（要注意大小写的正确性）；

  • 字符集unicode

  • 忽略空白字符（空格、制表符和换行符）以；结尾；

  • 一般要给脚本添加注释（//单行注释）（/* …. */多行注释）

  • 标识符和关键字（保留字）

    解释：

    命名：英文命名；驼峰命名法（myName；MyName）；常亮大写法（NAME）

    空白：由于js会忽略这些空白字符，那么我们在书写代码的时候，就可以更好的利用缩进、换行和空格更好的组织我们的代码，使其更加清晰。一般建议缩进4格

    换行：js中一条语句以分号结束;但js中换行也表示一条语句的结束；因此在js中分号可以省略；但不建议省略。

    注释非常重要。注释在编程语言中比重50%。

    注意：

    1.注释的内容是不会被浏览器解析，是一个解释说明的信息，只是提供给程序员看

    2.多行注释不能嵌套使用

  • 标识符（变量）的命名规则：（重点）

    1）由数字、字母、下划线或$（美元符-刀乐符）组成；

    2）不能以数字开头；并且区分大小写；

    3）不能用关键字，保留字命名；

    4）建议驼峰命名；

    var （全局作用域，函数作用域，变量提升，重复声明同一个变量）

    **let ** （全局作用域< 一个括号内 >，块级作用域。解决了var的一些问题< 变量提升，重复声明同一个变量>）

    const （声明常量）：不能被改变

    全局作用域：定义在（函数，块）外部的变量，函数等，作用范围是整个代码。

    局部作用域：定义在函数或块中的变量，函数，作用范围是块或函数。

变量

变量：用来存放数据的一段空间

组成：变量名 和 变量值

变量的使用

var a=10

变量的声明 var a ； let a

变量的赋值 a=10

变量命名规则

  1. 不能以数字开头，也不能是纯数字
  2. 不能是js定义的关键字
  3. 命名符合见文知意

变量的数据类型

  1. string 字符串型【一串数字或者文件】
  2. number 数值型【小数（float）或者整数(int)】
  3. boolean 布尔型【 true真 false假】
  4. null【空值】

数据类型的转换

  1. Number() 转换为数值型
  2. parselnt（）转换为整数
  3. parsefloat（）转换为小数
  4. String（）转换为字符串
  5. Boolean（）转换为布尔值
  6. typeof（）判断数据类型
    image

布尔型 true 1 ，false 0

数字转为布尔值 0转成false ，非0转为true

字符串转为布尔值 空值转成false ，非空转成true

js的主要运算类型

  1. 算数运算
  • “+”“-”“*”“/”“%【取余】”“幂运算9**3”
  1. 比较运算
  • “>”“<”“>=”“<=”“= =” “!=”“===【绝对等于】”
  1. 赋值运算
  • “=”“+=”“-=”【i+=1就是i=i+1】
  1. 逻辑运算
  • “and【&& 与】”“or【|| 或】”“not【! 非(取反)】”
  1. 一元运算
  • “++i【i=i+1】”“i++【i=i+1】”
    image
  1. 三元运算

  • （a>9）? a:”0”+a

    【 var a=11

​ var aa=(a>9)? a:"0"+a

​ console.log(aa)

​ 】

字符串处理

  1. 字符串的拼接： +
  2. 获取字符串的长度： 变量 . length
  3. 转换为大写：变量 . toUpperCase()
  4. 转换为小写：变量 . toLowerCase()
  5. 移除开头或在末尾的空白字符：变量 . trim（）
  6. 获取单个字符：变量[字符下标位数]【字符下标数是从0开始数】
  7. 截取一段字符串：变量 . slice（1，5）【包前不包尾】
  8. 查找字符串：变量 . indexOf(“ 要搜的字符”)【找出你要搜的字符的下标数，如果不存在这个字符，就输出-1】
  9. 替换字符串：变量 . replace（”旧字符“，”新字符“）【替换第一个要替换的字符】
  10. 分割字符串：变量 . split（”分隔符”）【可以用“”来分割，也可以用字符串里的字符来分割】
  11. 连接字符串：变量 . join（“连接符”）

流程控制语句

  1. 判断语句
  • if else

​ 单分支：if（判断条件）{判断条件是真的话就执行语句}

​ 双分支：if（判断条件）{判断条件是真的话就执行语句}else{判断条件是假的话就执行语句}

​ 多分支：if（判断条件）{判断条件是真的话就执行语句} else if（判断条件）{判断条件是真的话就执行语句}…..else{判断条件是假的话就执行语句}

  1. 循环语句

  • for ； while

    var sun=0

​ for（var i=1;i<=10;i++）{

​ sun=sun+i

}

console.log(sun)

变量的命名

变量：给数据定义的“别名”，可以方便使用数据。

变量：是一个可以存储单个可变信息的容器。

声明变量： 在内存中给数据开辟一个存储空间。

变量赋值：将数据放入通过变量放入内存中，之后可以通过变量获取值，修改值。
image
常量 ： 初始值不能修改的“变量”，只能有一次赋值。

cons num=1；

alert（num）

变量提升

Js中存在着变量提升的现象，也就是说变量的声明无论写在什么位置，都会提升到文档的最前边。

例如：
image

<u>先使用了变量a，在给变量a赋值，其先使用变量a的那行代码应该报错，而在js里是报undefiend，所以我们在使用变量的时候，一定要先声明后使用。</u>



变量是由**两个部分**构成的：

变量名：一般来说，等号左边的内容为变量名变量值：一般来说，等号右边的内容为变量

* 必须以字母或下划线开头，中间可以是数字，字母或下划线。
* 变量名不能包含空格，加号，减号等字符。
* 不能使用JavaScript的关键字，如var，int。
* JavaScript的变量名是严格区分大小写的，例如，username和UserName是两个不同的变量。

## 关键字：

- `break`：用于终止循环或`switch`语句。
- `case`：用于在`switch`语句中定义一个条件分支。
- `catch`：用于捕获`try`语句块中抛出的异常。
- `class`：用于定义类。
- `const`：用于声明一个常量。
- `continue`：用于跳过当前循环的剩余代码，继续下一次循环。
- `debugger`：用于在代码中设置断点，以便在调试时暂停执行。
- `default`：用于在`switch`语句中定义默认分支。
- `delete`：用于删除对象的属性。
- `do`：用于定义一个`do-while`循环。
- `else`：用于在`if`语句中定义条件不成立时的分支。
- `enum`：用于定义枚举类型（在严格模式下）。
- `export`：用于导出模块中的变量、函数或类。
- `extends`：用于创建一个类的子类。
- `false`：表示布尔值`false`。
- `finally`：用于在`try-catch`语句中定义无论是否发生异常都要执行的代码块。
- `for`：用于定义一个`for`循环。
- `function`：用于定义一个函数。
- `if`：用于定义一个条件语句。
- `implements`：用于实现一个接口（在严格模式下）。
- `import`：用于导入模块中的变量、函数或类。
- `in`：用于检查一个对象是否包含某个属性。
- `instanceof`：用于检查一个对象是否是某个类的实例。
- `interface`：用于定义一个接口（在严格模式下）。
- `let`：用于声明一个块级作用域的变量。
- `new`：用于创建一个对象实例。
- `null`：表示空值。
- `package`：用于定义一个包（在严格模式下）。
- `private`：用于定义一个私有属性或方法（在严格模式下）。
- `protected`：用于定义一个受保护的属性或方法（在严格模式下）。
- `public`：用于定义一个公共属性或方法（在严格模式下）。
- `return`：用于从函数中返回一个值。
- `static`：用于定义一个静态属性或方法。
- `super`：用于调用父类的构造函数或方法。
- `switch`：用于定义一个`switch`语句。
- `this`：指向当前对象。
- `throw`：用于抛出一个异常。
- `true`：表示布尔值`true`。
- `try`：用于定义一个`try-catch`语句。
- `typeof`：用于返回一个变量或表达式的数据类型。
- `var`：用于声明一个变量。
- `void`：用于返回`undefined`。
- `while`：用于定义一个`while`循环。
- `with`：用于设置代码的默认对象（不推荐使用）。
- `yield`：用于暂停和恢复一个生成器函数。

## 保留字：

- `break`：用于终止循环或`switch`语句。
- `case`：用于在`switch`语句中定义一个条件分支。
- `catch`：用于捕获`try`语句块中抛出的异常。
- `class`：用于定义类。
- `const`：用于声明一个常量。
- `continue`：用于跳过当前循环的剩余代码，继续下一次循环。
- `debugger`：用于在代码中设置断点，以便在调试时暂停执行。
- `default`：用于在`switch`语句中定义默认分支。
- `delete`：用于删除对象的属性。
- `do`：用于定义一个`do-while`循环。
- `else`：用于在`if`语句中定义条件不成立时的分支。
- `enum`：用于定义枚举类型（在严格模式下）。
- `export`：用于导出模块中的变量、函数或类。
- `extends`：用于创建一个类的子类。
- `false`：表示布尔值`false`。
- `finally`：用于在`try-catch`语句中定义无论是否发生异常都要执行的代码块。
- `for`：用于定义一个`for`循环。
- `function`：用于定义一个函数。
- `if`：用于定义一个条件语句。
- `implements`：用于实现一个接口（在严格模式下）。
- `import`：用于导入模块中的变量、函数或类。
- `in`：用于检查一个对象是否包含某个属性。
- `instanceof`：用于检查一个对象是否是某个类的实例。
- `interface`：用于定义一个接口（在严格模式下）。
- `let`：用于声明一个块级作用域的变量。
- `new`：用于创建一个对象实例。
- `null`：表示空值。
- `package`：用于定义一个包（在严格模式下）。
- `private`：用于定义一个私有属性或方法（在严格模式下）。
- `protected`：用于定义一个受保护的属性或方法（在严格模式下）。
- `public`：用于定义一个公共属性或方法（在严格模式下）。
- `return`：用于从函数中返回一个值。
- `static`：用于定义一个静态属性或方法。
- `super`：用于调用父类的构造函数或方法。
- `switch`：用于定义一个`switch`语句。
- `this`：指向当前对象。
- `throw`：用于抛出一个异常。
- `true`：表示布尔值`true`。
- `try`：用于定义一个`try-catch`语句。
- `typeof`：用于返回一个变量或表达式的数据类型。
- `var`：用于声明一个变量。
- `void`：用于返回`undefined`。
- `while`：用于定义一个`while`循环。
- `with`：用于设置代码的默认对象（不推荐使用）。
- `yield`：用于暂停和恢复一个生成器函数。

###       变量的声明

* 一使用var关键字声明变量，声明时无须指定数据类型。
* 使用var可以次声明一个变量，也可以一次声明多个变量，不同变量使用**逗号**隔开。

例如：

var name;  （一次声明一个变量）      

var name,gender,age; （一次声明多个变量）

# 变量的赋值

* 声明变量时可以不初始化，此时其默认值为**undefined**，也可以在声明变量的同时初始化变量。

var name="李华"; （声明的同时初始化变量）

var name="李华",gender="男",age;（声明的同时初始化全部或者部分变量） 

* 使用var声明的变量，可以多次赋值，但是其结果只与**最后一次赋值**有关。

var name="李华";
name="王红";
name = 3; 
可以多次赋值，但其结果只与最后一个赋值有关


# 数据类型



# * **什么是数据**：

数据（data）是事实或观察的结果，是对[客观事物](https://baike.baidu.com/item/客观事物/4682421?fromModule=lemma_inlink)的逻辑归纳，是用于表示客观事物的未经加工的原始素材。

数据可以是连续的值，比如声音、图像，称为[模拟数据](https://baike.baidu.com/item/模拟数据/5294189?fromModule=lemma_inlink)；也可以是离散的，如符号、文字，称为[数字数据](https://baike.baidu.com/item/数字数据/10237474?fromModule=lemma_inlink)。

在[计算机系统](https://baike.baidu.com/item/计算机系统/7210959?fromModule=lemma_inlink)中，数据以[二进制](https://baike.baidu.com/item/二进制/361457?fromModule=lemma_inlink)[信息单元](https://baike.baidu.com/item/信息单元/53293072?fromModule=lemma_inlink)0、1的形式表示。



JavaScript的数据类型分为3类，即基本数据类型、引用数据类型和特殊数据类型。

image

image

↑

* 基本数据类型：

**1.数值-number **

  • 整数，小数（浮点数），NaN

    NaN 经过 parseInt 强制转化后 ： 整形 或者是 NaN

    NaN: not a Number，不是一个数值，但他是number 类型；

    说明：

    1）NaN表示一个本来要返回数字，但是由于某种原因，没有返回成功，就用NaN表示。

    2）NaN与任何值都不相等等，包括其本身

    NaN ！= NaN

    3）NaN与其他任意值进行运算，都为NaN；

2.字符串-string

  • 有一系列的字符构成的数据。

  • 描述某个名称的，用户名、密码、籍贯等。

  • 在使用字符串类型数据的使用，需要使用引号：

    双引号：“”

    单引号：‘’

    注意：

    • 引号必须对称

    • 如果没有引号，那么js就会将其当做变量来对待

  • 字符串可以用 + 号拼接显示

* 转义字符：

​ 在console.log中可以使用（控制台）

​ 使用反斜杠 “ \ "

​ \n 换行符：让它后面的内容在下一行显示。

​ \t 制表符：让它后面的内容产生一段空格，相当于敲一个tab。

​ \r 回车符：将光标移动到一行的开头。（js中无效）

​ \ \ 转义反斜杠本身，显示一个反斜杠。

​ \ " 或 \ ' 在字符串中转义引号，显示一个引号。

3.布尔-boolean

  • 只有两个值：

    true：真

    false：假

    在js中，严格区分大小写。

    一般会在判断（条件、循环）等语句中来使用。

    判断真假：js中哪些值是真的，哪些是假的

  • 数字类型中，只有0，0.0，NaN是假的，其他都是真的。

  • 字符串中非空字符串都是真的，包括“空格”。

  • undefined是假的，变量已声明但未赋值。

  • null（object）是空对象，也是假的。（undefined 与 null 的“值”相同，但是类型不同）

  • [ ]空数组是真的 空的“{ }”是真的。

  • var x = prompt（“请输入内容：”）

    console.log（isNaN（x））；//被强制整数类型转换后，不是数字，值为真，是数字，值为假。//强制整数类型转换后，被转换后是NaN为真。

    console.log（Boolean（））；

4.未定义的值-undefined

5.空值-null

Undefined和null的区别：

它们的值其实是相等的。就是类型不一样。

↑

** 引用类型

1.object :用于表示复杂的数据结构，如对象、数组、函数等。

2.array :用于表示有序的集合，可以包含不同类型的数据。

3.function ：用于定义可执行的代码块。

基本数据类型和引用数据类型的存储地址不同。

↑

** 判断数据类型

typeof

作用：typeof:检测数据类型的关键字

语法1：typeof v

语法2：typeof（v）

说明：v表示检测的数据；

返回值：typeof方法返回结果的数据类型是string；

即：两个typeof一定得到的是“string”

↑

  1. 基本数据类型（原始类型）：
    • Number：用于表示数字，包括整数和浮点数。
    • String：用于表示文本数据，由一系列字符组成。
    • Boolean：用于表示逻辑值，只有两个可能的值：true和false。
    • Undefined：表示未定义的值，通常在变量声明但未初始化时使用。
    • Null：表示空值，通常用于表示变量没有值。
    • Symbol（ES6新增）：用于创建唯一的标识符。
  2. 引用数据类型：
    • Object：用于表示复杂的数据结构，如对象、数组、函数等。
    • Array：用于表示有序的集合，可以包含不同类型的数据。
    • Function：用于定义可执行的代码块。
  3. 特殊数据类型：
    • BigInt（ES11新增）：用于表示任意精度的整数。

例如

  • 100 的类型是 number：这是一个整数，属于JavaScript中的数值类型。
  • true 的类型是 boolean：这是一个布尔值，表示真或假。
  • hello 的类型是 string：这是一个字符串，由一系列字符组成。
  • null 的类型是 object：这是一个特殊的值，表示空对象指针。尽管它的类型被认为是object，但它实际上是一个原始值。
  • 2023明天会更好 的类型是 string：这是一个包含数字和中文字符的字符串。

**数据类型转换

javaScript中数据类型的转换分为两种，分别为隐式转换和强制转换。方便后续运算类型一致。

强制转换也叫显式转换，就是人为的调用方法对数据类型进行转换。

隐式转换，是在一些语言计算需要的时候，进行数据类型的自动转换

为什么要数据类型转换：方便后续运算类型一致。

↑

**强制转换：

1.Number（）可以将任意类型数据转为数值类型【只能转换纯数字的字符串，包括其它进制的数字进行转换】

“ 0b ”开头是二进制

“ 0x ”开头是十六进制

“ 0o ”开头是八进制

2.Boolean（）可以将任意类型数据转为数布尔类型

  • 判断真假：js中哪些值是真的，哪些是假的

  • 数字类型中，只有0，0.0，NaN是假的，其他都是真的。

  • 字符串中非空字符串都是真的，包括“空格”。

  • undefined是假的，变量已声明但未赋值。

  • null（object）是空对象，也是假的。（undefined 与 null 的“值”相同，但是类型不同）

  • [ ]空数组是真的 空的“{ }”是真的。

  • var x = prompt（“请输入内容：”）

    console.log（isNaN（x））；//被强制整数类型转换后，不是数字，值为真，是数字，值为假。//强制整数类型转换后，被转换后是NaN为真。

    console.log（Boolean（））；

3.String（) 可以将任意类型数据转为字符串类型

toString():除了null和undefined之外的数据都可用toString转

语法：值.toString()

4.parselnt() 取整【可以转换以数字开头的字符串】

规律：

1)从第一个字符开始转换，如果第一个字符就是非数字，那么得到的一定是NaN，

2)如果第一个不是非数字，就向后转换，直到遇到一个小数点，或非数字，则停止转换，将前面转面转的内容输出

5.parseFloat（）取浮点数

规律：

1)从第一个字符开始转换，如果第一个字符就是非数字，那么得到的一定是NaN，

2)如果第一个不是非数字，就向后转换，直到遇到第二个小数点，或非数字，则停止转换，将前面转面转的内容输出

浮点数在运算中有问题，不能直接按照浮点数来相比较值是 否相等

6.isNaN（）检测是否是非数字

var x = prompt（“请输入内容：”）

console.log（isNaN（x））；//被强制整数类型转换后，不是数字，值为真，是数字，值为假。//强制整数类型转换后，被转换后是NaN为真。

语法：isNaN(检测值)

返回值：非数字 = = =>true 数字===》false;

说明：isNaN()；会发生一个隐式转换，会尝试着将检测值转为number;然后进行判断

7、 隐式转换

语法：值 + ””

↑

**运算符

运算符是指能够完成一系列计算操作的符号。

JavaScript的运算符：算术运算符、赋值运算符、关系运算符、逻辑运算符、三元运算符。

一元运算： 自增运算:++,

i++：是先返回原来的值，在加一。后置自增

++i：是先加1，在返回之后的值。前置自增

i+=1：

都是 i= i+1

运算数的个数：一元、二元、三元

如果操作数只有一个，称之为一元运算符，或者单目运算符。

如果操作数有两个，称之为二元运算符，或者双目运算符，这是最多的

如果操作数有三个，称之为三元运算符，或者三目运算符，在js中，只有一个?:。

a、+ 两个功能：1.拼接 2.相加

规律：

1）如果 + 有一端是字符串，那么一定是字符串的拼接；

2)如果两端都没有字符串，那么将两端内容转为数字进行相加；

b、- * / % 先对操作数进行隐式转换，转换为number，再进行运算

关系运算符

用来进行比较的。比较的结果通常是布尔值真和假。

==：相等，只比较值是否相等（不常用）

===：全等，比较值的同时比较数据类型是否相等

！=：不相等，比较值是否不相等（不常用）

！==：不全等，比较值的同时比较数据类型是否不相等

其返回值：boolean型

注意：

=、= =和===之间的区别。

=表示赋值，

= =表示判断值是否相等，

===表示判断绝对相等（值和类型）。

逻辑运算符

在js中， 有如下三个逻辑运算符：

&&（与号） 与 ： 参与的变量 都是true 结果是 true。 （&&与运算：全真为真，一假全假）【全真，返回最后一个值；有假值时，返回第一个假值】

|| 或 ： 参与的变量 只要有个true 结果就是 true 。 （||或运算：一真为真，全假为假）【全假，返回最后一个值；有真值时，返回第一个真值；短路运算】

！ 非，取反 ：

假值：0 ，NaN，“”，null，undefined

（!非运算：逆转真假）

&&运算中

逻辑与找假值 : 遇到第一个假值就停下来，返回这个假的值；如果没有假值，则返回最后一个值；

| |运算中

逻辑或找真值 : 如果遇到第一个真值，就将这个值返回，如果没有找到真值，返回最后一个；

！运算中

先将值隐式转为布尔类型，再取反；

返回值：返回值一定是布尔类型

&&的优先级高于| |

三元运算符

在js中，有且仅有一个三元运算符，就是?:

格式：表达式1 ？表达式2：表达式3

运算规则：如果表达式1的值为真，那么结果就是表达式2，否则结果就是表达式3。

三元运算符，能够简化我们的代码，实际上相当于if...else语句。

？：的优先级比较低。

运算符是有优先级的，不同的运算顺序会导致结果不同。可以加括号让其优先运算。

↑

image

算术运算符

算术运算符用于执行基本的数学运算。

  • +：加法运算符，用于将两个数值相加。
  • -：减法运算符，用于将两个数值相减。
  • *：乘法运算符，用于将两个数值相乘。
  • /：除法运算符，用于将两个数值相除。
  • %：取模运算符，用于返回两个数值相除的余数。
  • **：指数运算符，用于计算一个数值的指数。

比较运算符

比较运算符用于比较两个值的大小或相等性。

  • ==：等于运算符，用于比较两个值是否相等。
  • ===：全等运算符，用于比较两个值是否相等且类型相同。
  • !=：不等于运算符，用于比较两个值是否不相等。
  • !==：不全等运算符，用于比较两个值是否不相等或类型不同。
  • >：大于运算符，用于比较左边的值是否大于右边的值。
  • <：小于运算符，用于比较左边的值是否小于右边的值。
  • >=：大于等于运算符，用于比较左边的值是否大于或等于右边的值。
  • <=：小于等于运算符，用于比较左边的值是否小于或等于右边的值。

赋值运算符

赋值运算符用于给变量赋值。

  • =：简单赋值运算符，用于将右边的值赋给左边的变量。
  • +=：加法赋值运算符，用于将右边的值加到左边的变量上，并将结果赋给左边的变量。
  • -=：减法赋值运算符，用于将右边的值从左边的变量中减去，并将结果赋给左边的变量。
  • *=：乘法赋值运算符，用于将右边的值乘以左边的变量，并将结果赋给左边的变量。
  • /=：除法赋值运算符，用于将左边的变量除以右边的值，并将结果赋给左边的变量。
  • %=：取模赋值运算符，用于将左边的变量除以右边的值，并将余数赋给左边的变量。
  • **=：指数赋值运算符，用于将左边的变量的指数设置为右边的值，并将结果赋给左边的变量。

逻辑运算符

逻辑运算符用于组合多个条件。

  • &&：逻辑与运算符，用于判断多个条件是否同时为真。
  • ||：逻辑或运算符，用于判断多个条件中是否至少有一个为真。
  • !：逻辑非运算符，用于对一个条件取反。

条件运算符

条件运算符也称为三元运算符，用于根据条件返回不同的值。

  • condition ? expr1 : expr2：如果condition为真，则返回expr1，否则返回expr2。

条件语句

· if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

· if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

· if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

· switch 语句 - 使用该语句来选择多个代码块之一来执行

if语句

只有当指定条件为 true 时，该语句才会执行代码。

1.if

if（条件）{

​ 条件达成后执行

}else{

​ 条件未达成然后执行

}

2.

if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

if else if ….语句

if（条件）{

​ 条件达成后执行

}else if（条件）{

​ 条件达成然后执行

}

3.

if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

if else if else 语句

if（条件）{

​ 条件达成后执行

}else if（条件）{

​ 条件达成然后执行

}else{

条件未达成然后执行

}

案例

    <script>
        // 判断奇偶数
        var n=10
        if(n%2===0){
            console.log("偶数")
        }else{
            console.log("奇数")
        }
    </script> 

    <script>
        // 判断成绩等级
        var input=111
        if(input>=90&&input<100){
            console.log("A")
        }else if(input>=80&&input<90){
            console.log("B")
        }else if(input>=70&&input<80){
            console.log("C")
        }else if(input>=60&&input<70){
            console.log("D")
        }else if(input>=0&&input<60){
            console.log("E")
        }else{
            console.log("输入错误")
        }

        
    </script>
    <script>
        // 判断闰年
        var NianFen=2020
        if (NianFen%4===0 && NianFen%100!=0){
            console.log("闰年")
        }else if(NianFen%100===0 && NianFen%400===0){
            console.log("世纪闰年")
        }else{
            
            console.log("不是闰年")
        }
    </script>

switch语句

switch 语句 - 使用该语句来选择多个代码块之一来执行

在switch中，有四个关键字：switch、case、break【退出，选择结束就退出】、default

switch（要判断的变量）{

​ case 情况1：

​ 情况1时要执行的代码

​ break； 返回

​ case 情况2：

​ 情况2时要执行的代码

​ break； 返回

​ case 情况3：

​ 情况3时要执行的代码

​ break； 返回

default：{

​ 都未达成情况后执行的代码

​ }

​ break；

}

案例

<script>
        // switch支付情况案例
        var zifu=4
        switch(zifu){
            case 1:
                document.write("未付款")
                break;
            case 2:
                document.write("已付款")
                break;
            case 3:
                document.write("已发货")
                break;
            case 4:
                document.write("已完成")
                break;
            default:{
                document.write("出错了")
                }
        }
    //     注意事项:
    //     1.必须是严格===
    //     2.break，必须写
    //     3.不要写比较的运算符
    //     4.default是条件都未达成，然后执行的代码

        </script>

  <script>
            // 查找月份天数
            var yufen=6
            switch (yufen) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    document.write("31天") 
                    break;
                case 2:
                    document.write("28天")
                    break;
                case 4:
                case 6:
                case 9:
                case 11:
                    document.write("30天")
                default:
                    break;
            }
        </script>

页面交互框

confirm()

功能：confirm()表示确认框；

使用：var a = confirm(“提示文字”)

  1. 说明：变量a保

当点击取消，confirm的返回值false;存的是confirm的返回值，是布尔值

  1. 当点击确定，confirm的返回值true;

循环语句

循环的作用：重复执行一段代码

循环的三个要素：初始值 终止条件 步长（更新循环变量）

循环有三种：

  1. while

  2. do...while

  3. for

while

while循环的使用细节：

  1. 在循环体中，一定要修改循环变量的值，否则就会陷入死循环。

  2. 循环变量的初始化一定放在while之前

  3. while之后，有一个（），表示要判断的条件，里面就是一个条件表达式

  4. 循环体，可以使用{}，也可以不使用{}，但是如果不使用，循环体就只有一条语句，建议大家任何情况下都加上{}。

var 变量=0 【把变量初始化】

while（变量执行的条件）{

循环体语句

改变循环的变量

}

<script>
        var n=0
        while (n<10) {
            document.write()
            n++
            
        }
    </script>

 // 1-100相加的和
        var s=1
        var he=0
        while (s<=100) {
            he+=s
            s++   
        }
        document.write(he)

do while 语句

不论条件真假，都先执行一次

![屏幕截图 2025-06-20 144133](E:\luo wu yi用户\Pictures\Camera Roll\Javascript\屏幕截图 2025-06-20 144133.png)

For循环

for括号里面必须有且仅有两个分号

image

for 循环和while如何选用？

大部分情况，它们之间是一样的。

for循环通常针对循环次数确定的循环，while循环可以实现循环次数不确定的循环。

for循环写法更加简洁。

循环内部的跳转语句

在js中，有如下两种跳转语句：

Break （ 跳出循环 ）

Continue （ 跳过本次循环 ）

break：结束本层循环

continue：跳过（结束）本次循环，继续进入下一次循环

函数

函数可以将程序中繁琐的代码模块化。

函数：可以看做一个容器，将我们可能会重复使用的代码存放在一起，然后返复调用

函数的作用

  1. 代码重用(如何复用)

  2. 用于组织代码

函数的组成

  1. 函数体

  2. 函数名

  3. 函数关键字

第一种声明式

第二种是匿名函数（匿名函数就是赋值函数）

image
image
image



### 定义函数

**语法格式**：

<u>f</u>unction  函数名（[参数1,参数2…]）{

   函数体；

   [return表达式]

}

例：

< script>

​    function sum(n) {   //这里的n是形参，用来接受实参的值

​      let s=0;

​      for(let i=1;i<=n;i++){

​        s+=i;

​      }

​      return s ;    //返回值，并且结束函数，将函数内部的数据，返回到函数外部

​    }

​    

​    alert(sum(200));   //这里的200是实参，执行函数时，传递实参

  < /script>



**说明**：

**function**是定义函数的关键字，function的后面是函数名，函数名是必选项，“参数1,参数2…”是可选项，函数体是必选项，用于实现函数功能，

**return**语句是可选项，用于返回函数值。

**函数作用域**是指在函数内部定义的变量和函数，只能在该函数内部访问，外部无法访问

### 调用函数

**语法格式**：

函数名（[参数1,参数2…]）

**说明**：

函数定义后并不会自动执行，而是需要在特定的位置调用函数。

### arguments

arguments是实参的一个集合







案例：

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义函数</title>
</head>

<body>
    <script type="text/javascript">
        function printStr() {
            alert("这是一个函数");
        }
        //函数的定义
        printStr(); //调用函数


    </script>

</body>

</html>

案例：

![image](https://img2024.cnblogs.com/blog/3672404/202507/3672404-20250707171057187-389945620.png)



# <u>DOM</u>

​         <u>是文档对象模型（Document Object Model，DOM）是JavaScript操作网页的接口。</u>

<u>**DOM**节点的分类：</u>

<u> DOM节点分为三大类：元素（标签）节点、属性</u><u>节点、文本节点；</u>
![image](https://img2024.cnblogs.com/blog/3672404/202507/3672404-20250707171109881-1940859952.png)



**DOM概念**

1.根节点，处于节点树的最顶层，如html

2.父节点，一个节点之上的节点，如head的父节点是html

3.子节点，一个节点之下的节点是该节点的子节点，如p是body的子节点。

4.兄弟节点，处于同一层次的节点，如head和body是兄弟节点

5.叶子节点，节点树最底层的节点，如“标题”“文档段落”等文本

![image](https://img2024.cnblogs.com/blog/3672404/202507/3672404-20250707171118691-621602494.png)

# 获取元素

要想设置某个元素，首先要获取相应元素。

![image](https://img2024.cnblogs.com/blog/3672404/202507/3672404-20250707171128731-256820072.png)

例如，获取网页中id为txtName的文本框中的值，使用如下代码：

document.getElementById('txtName').value

# 对象

什么是对象？

**在js中，一切皆是对象。Object**

对象，生活中可见和不可见的东西，在世界中，客观存在的都是一个对象。

在描述一个对象的时候，通常是从两个方面来描述的：

 静态的特征：静态特征（属性）

 动态的行为：动态行为（方法，函数）

 把**静态的特征和动态的行为组合**在一起，就形成了一个完整的对象。

**对象：一系列属性的无序集合**

### 创建对象的方法：

### 第一种：

![image](https://img2024.cnblogs.com/blog/3672404/202507/3672404-20250707171140691-2084751823.png)
 var diannao = {

​      'cpu': '英特尔酷睿i7-13700K',

​      '内存': '32G',

​      '硬盘':'5T',

​      '游戏': function(){

​        console.log('打开鸣潮');

​      },

​      '游戏2': function(){

​        console.log('打开csgo');

​      },

​      '游戏2': () =>{

​        console.log('打开cf');

​      },

​    };

​    console.log(diannao.硬盘);

​    console.log(diannao['内存']);

​    diannao.游戏();

​    diannao.游戏2();

### 第二种：new关键词

let phone = new Object

phone.cpu = ‘骁龙8ge2’；

phone.内存 = ‘32G’;

phone.游戏=function(){ 

console.log(‘打开金铲铲’);

};

console.log(phone.cpu);



###  内置的Date类对象

Date对象是js内置对象。

**作用**：提供关于日期时间的相关的操作。



| **获取：** |                                                              |
| ---------- | ------------------------------------------------------------ |
|            | 1、时间对象.getFullYear()：返回4位数的年份                   |
|            | 2、时间对象.getMonth()：返回日期中的月份，返回值为0-11       |
|            | 实际月份：1 2 3  ....12                                      |
|            | getMonth: 0 1  2 .....11                                     |
|            | 3、时间对象.getDate()：返回月份中的天数，返回值为1-31        |
|            | 4、时间对象.getDay();返回星期：返回0-6 0---星期日 1---星期一 |
|            | 5、时间对象.getHours()：返回小时,返回的是0-23                |
|            | 6、时间对象.getMinutes()：返回分                             |
|            | 7、时间对象.getSeconds()：返回秒                             |
|            | 8、时间对象.getTime()：返回表示日期的毫秒数 //1970年1月1日8:0:0到当时间的毫秒数 |

```html
        function getNow() {
            let now = new Date();
            let year = now.getFullYear();//获取年
            let month = now.getMonth();//获取月份
            let week = now.getDay();//获取星期
            let day = add0(now.getDate());//获取天
            let dastr = `${year}年${add0(month + 1)}月${day}日 星期${week}`;//字符串的拼接用反引号`.....`包起来
            let hour = add0(now.getHours());//获取小时
            let minute = add0(now.getMinutes());//获取分钟
            let second = add0(now.getSeconds());//获取秒
            let timestr = `${hour}:${minute}:${second}`;
            let box = document.getElementById('box');
            box.innerHTML="<p>"+dastr+"</p>"+"<p>"+timestr+"</p>"
            // console.log(dastr);
        }
        setInterval(getNow,1000);//每间隔1秒钟，执行一次代码

内置的Math类对象

Math ： 内置对象。

功能：提供数学相关的一些运算。

 console.log(Math.PI);//π
 console.log(Math.E);//自然常数
 console.log(Math.floor(3.111));//相下取整
 console.log(Math.ceil(3.111));//相上取整
 console.log(Math.round(3.4));//四舍五入
 console.log(Math.log2(1024));//求以2为底的对数
 console.log(Math.random());//0~1 的随机小数

生成六位随机验证码

 function getRandomInt(n,m){
            return Math.floor(Math.random()*(m-n+1)+n)
        }
        // 生成六位验证码
        console.log(getRandomInt(100000,999999));

Array类对象 数组

数组：数组是值的有序集合，就是一组数据。

数组里面的值可以是任意类型的数据，数组间也可以进行嵌套使用。

数组中，每一个值（如100，’js’，true）都称之为一个元素。

每一个元素在数组中所处的位置，称之为index（下标，索引）。是数字来表示，从0开始。

可以通过下标数来获取这个数组中的对应的值，

也可以通过增加下标数来增加数组的值，

数组也可以看作是一个特殊的对象。

<script>
        //创建一个数组
        let shu1 = [1,2,3,'a','张三',true];
        //通过下标来获取值
        console.log(shu1[0]);
        //也可以通过下标来进行修改和增加对应的值
        shu1[6] = 'b'
        console.log(shu1)
    
        //通过下标获取数组中的所有值
        for (let i=0 ;i < shu1.length ;i++){
            console.log(shu1[i]);
        }
        
        //for i in 写法，获取对象中所有key（键）
        for (const key in shu1){
            console.log(key,'->',shu1[key]);
        }

        //for v of 写法，获取对象中所有的value（值）
        for (const element of shu1){
            console.log(element);
        }
      //数组嵌套使用
        let shu2 = [[1,2,3],['a','b','c']];
        //可以通过两个【】【】来获取想要的值
        console.log(shu2[0][1])
   //通过for 嵌套循环来获取数组里的所有值
   for (let i=0 ;i < shu2.length ;i++){
      for (let j=0 ;j < shu2[i].length ;j++){
            console.log(shu2[i][j]);
        }
        }
    
    
    </script>

数组的排序

let arr = [1,2,3,11,7,66,33,14]

arr.sort【su t】(function(a,b){return【ri ten】 a-b});

console.log(arr);

功能：数组的排序：

说明：

1)如果返回a-b，升序 返回b-a 降序；

2)如果sort方法不传参，表示按照字符串的方式排序；

3)这个方法会改变原数组；

数组的第二个创建方法：

new的方式

let arr = new Array（）//创建一个空数组

  1. new Array();括号里面不传参，表示创建一个空数组

  1. new Array();括号里传了一个数字参数;这个参数表示数组的长度

  2. new Array();括号里传一个非数字参数，这个参数表示数组项

  3. new Array():括号里面传多个参数时，这些参数都是数组项

数据的结构：

  1. 队列：先进先出的数据结构。

push 添加值(结尾) shift 获取值（开头） 或者 unshift添加值（开头） pop获取值【删除原数组的值】（结尾）

  1. 栈：先进后出的数据结构。

删除或增加原数组的值

push 添加值【增加】(结尾)

shift 获取值【删除原数组的值】（开头）

unshift添加值【增加】（开头）

pop获取值【删除原数组的值】（结尾）

let arr = new Array（1，2，3，4，5）

arr.push（123）；//追加一位数到数组最后面

let x = arr.pop（）；//弹出最后一个元素

arr.unshift（123）；//在数组开头插入一个元素

arr.shift（）；//在数组开头获取一个元素

万能 splice【s p li si】

arr.splice（2，0，‘a’）//在原下标2的地方添加一个‘a’,删除0个元素

arr.splice（0，2）//从下标0开始删除两个元素

arr.splice（1，1，‘x’）//在原本下标1的元素替换为’x‘

arr.slice(0，2) ；//返回截取的内容，

sllice的截取时，包含开始位置，不包含截取位置

arr.slice(2);//从下标2开始位置一直截取最后

数组的反转：reverse【ri vi si】

arr.reverse();

console.log（arr）；

数组的合并 concat【kan ka t】

arr1.concat(arr2,arr3....);

console.log（arr1.concat（arr2））；

说明：不会改变原数组；

返回值：合并后的新数组；

indexOf() 从前向后找

语法：arr.indexOf(****目标值(val)，开始查找的位置(index))；

​ 功能：从index位置开始，向后查找val首次出现的位置，

​ 返回值：如果找到，返回val的下标，如果找不到，返回-1；

console.log（arr.indexOf（‘x’））；//查找x的下标数

![屏幕截图 2025-06-25 154726](E:\luo wu yi用户\Pictures\Camera Roll\Javascript\屏幕截图 2025-06-25 154726.png)
image

lastIndexOf() 从后向前找

语法：arr.lastIndexOf(****目标值(val)，开始查找的位置(index));

​ 功能：从index位置开始，向前查找val出现的位置；

​ 返回值：如果找到，返回val的下标，如果找不到，返回-1；

image

数组转字符串 join:

语法：arr.join("连接符");

功能：将数组的每一项通过连接符，拼接为一个新字符串；

返回值：字符串；

说明：1)join（）不会改变原数组；

​ 2)当join()不传参数时，默认用逗号连接；

image

字符串

什么是字符串

字符串可以是引号中的任意文本。字符串可以由双引号（“ ”）或单引号（‘ ’ ）表示 ，如 ‘hello’ ， “中国”

字符串可以理解为一个元素内容不可变的由字符构成的特殊数组。

注意：字符串一旦创建，任何的方法都不可以修改这个字符串;

创建字符串

  1. 字面量方式
    image

  2. new方式

image

字符串的基本操作

1. 字符串的length属性

语法：str.length

功能：表示字符串的长度，字符的个数

说明：字符串的长度只能获取不能设置；但数组的长度既可以获取，也可以设置；

2.访问字符串中的字符 （索引即下标）

语法：str[下标]

功能：获取字符串中指定下标的字符

参数：下标从0开始；最大下标为str.length-1

3.遍历字符串

image

4.charAt()

功能：查找字符串中指定位置的字符;

​ 语法：str.charAt(index);

​ 参数：index表示位置(下标)

​ 返回值：对应位置的字符；

image

5.查找目标值在字符串中的位置（从前往后找）index【in d k s】Of()

功能：查找目标值在字符串中的位置（从前往后找）

​ 语法：str.indexOf(target,index);

​ 参数：target:查找目标值 ，index:开始查找的位置

​ 说明：index可以省略，如果省略默认从下标0开始找

​ 返回值：找到返回下标，找不到返回-1
image

6.查找目标值在字符串中的位置 （从后往前找）lastIndexOf()

功能：查找目标值在字符串中的位置（从后往前找）

​ 语法：str.lastIndexOf(target,index); //从index位置开始向前找target

​ 参数：target:查找目标值 ，index:开始查找的位置

​ 说明：index可以省略，如果省略默认从最后一个下标开始向前找

​ 返回值：找到返回下标，找不到返回-1
image

7.字符串的截取slice【s la s】()

​ 功能：字符串的截取

​ 语法：str.slice(start,end);

​ 参数：start:开始截取的下标，end表示截取结束的下标（包含开始，不包含结束）

​ 返回值：截取到的字符串；

​ 说明：1)str.slice(start,end) //从start下标截取到end下标（不包含end）

​ 2)str.slice(start); 从start下标开始一直截取到最后

​ 3)str.slice();//全部截取

​ 4)slice支持负值，负值可以从后往前数，找到对应的下标
image

8.substr【sa b s t】()

​ 语法：str.substr(start,count)

​ 功能：从start下标开始，截取count个字符

​ 参数：start：开始下标， count:****截取的个数

​ 返回值：截取到的字符串

​ 说明：1)str.substr(start,count); //从start下标开始，截count个字符

​ 2)str.substr(start);//从start下标开始一直截取到最后

​ 3)str.substr();//全部截取
image

9.substring();

​ 语法：str.substring(start,end);

​ 功能：从start下标开始截取到end下位；（不包含end）;

​ 返回值：截取到是字符串

​ 说明：1）substring不支持负值，如果遇到负值或NaN直接转0

​ 2）自动将小值作为开始下标，大值作为结束下边；
image

10.字符串的合并 concat【ken ka t】

​ 语法：str1.concat(str2,str3,....);

​ 功能：将多个字符串拼接一个新的字符串

​ 返回值：返回一个新字符串
image

11.字符串的替换 replace【r p l s】

​ 语法：str.replace("被替换的字符","新替换字符");

​ 功能：字符的替换

​ 说明：只能替换第一个
image

12. 转大写 toUpperCase【to po kas】();

​ 语法：str.toUpperCase();

​ 功能：将小写字母转为大写
image

13. 转小写 toLowerCase【to lao kas】();

​ 语法：str.toLowerCase();

​ 功能：将大写字符转小写

image

14.字符串的去前后导空格

语法：str.trim();

功能：去掉字符串前面和后面的空格

注意：中间的空格不能去掉
image

15.字符串转数组

语法：str.split(分隔符);

功能:将字符串转为数组
image

DOM

文档对象类型

API 和 Web API

API （Application Programming Interface，应用程序编程接口）：

一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

2.Web API：

  • 针对浏览器，提供的一套操作浏览器功能和页面元素的API（分别对应BOM和DOM），做页面交互效果。因为Web API很多，因此称为Web APIs。
  • 比如：我们想要浏览器弹出一个警示框，直接使用alert(‘弹出’)，alert就是用的API。
  • Web API一般都有输入和输出（函数的传参和返回值），很多都是方法（函数)
  • MDN详细 APl : https://developer.mozilla.org/zh-CN/docs/Web/API

文档模型

  • 文档：一个页面就是一个文档，DOM中用 document表示
  • 元素：页面中的所有标签都是元素，DOM中用element表示
  • 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中用node表示
  • DOM把以上内容都看作是对象，DOM因此也叫文本对象模型

获取元素

  • 通过ID获取：document.getElementById('id')
  • 通过标签名获取：document.getElementsByTagName('li')
  • 通过HTML5新增的方法获取：document.getElementsByClassName('类名')；document.querySelectorAll('类名')
  • 获取 特殊元素

常见的鼠标事件

image

  • innerText和innerHTML的区别

  1. innerText 不识别html标签 非标准 去除空格和换行【只能获取标签内的内容】

  2. innerHTML 识别html标签 W3C标准 保留空格和换行的【可以获取到标签加内容】

共同点 ：

这两个属性是可读写的，可以获取元素里面的内容

posted @ 2025-07-07 17:15  落无一  阅读(12)  评论(0)    收藏  举报