JavaScript数据交互
一、JavaScript 基本概念与引入方式
1.1 JavaScript 是什么
一种运行在客户端的脚本语言，由 Brendan Eich 在 10 天内设计完成。
最初名为 LiveScript，后更名为 JavaScript。
不需要编译，由 JS 引擎（如 V8）逐行解释执行。
也可用于服务器端开发（Node.js）、桌面应用（Electron）、移动端（Cordova）等。
1.2 JavaScript 的作用
表单动态校验（密码强度检测） （ JS 产⽣最初的⽬的 ）、⽹⻚特效、服务端开发(Node.js)、桌⾯程序(Electron)、App(Cordova)、控制硬件-物联⽹(Ruff)、游戏开发(cocos2d-js)
1.3 HTML/CSS（标记语言--描述类语言）/JS（脚本语言--编程类语言）的关系
HTML：结构，决定网页的结构和内容（决定看到了什么），相当于人的身体
CSS：样式，决定网页给用户呈现的模样（决定好不好看），相当于给人穿衣服，化妆
JavaScript：行为与交互，实现业务逻辑和页面控制（决定功能），相当于人的各种动作
1.4 JS 的组成
ECMAScript：语法规范，规定了JS的编程语法和基础核⼼知识，是所有浏览器⼚商共同遵守的⼀套JS语法⼯业标 准。
DOM：⽂档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语⾔的标准 编程接⼝。通过 DOM 提供的接⼝可以对⻚⾯上的各种元素进⾏操作（⼤⼩、位置、颜⾊等）
BOM：浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独⽴于内容的、可 以与浏览器窗⼝进⾏互动的对象结构。通过BOM可以操作浏览器窗⼝，⽐如弹出框、控制浏览器跳转、 获取分辨率等。
1.5 JavaScript 的引入方式
| 方式 | 语法 | 特点 |
|---|---|---|
| 内联式 | <button onclick="alert('Hello')"> | 不推荐，可读性差 |
| 内嵌式 | <script>console.log('Hello')</script> | 适合学习和小规模代码 |
| 外部式 | <script src="script.js"></script> | 推荐，利于维护和复用 |
二、JavaScript 基础语法
2.1 变量与常量
①什么是变量---数据存储的容器
本质：变量是程序在内存中申请的⼀块⽤来存放数据的空间
内存层面：
变量实际上是对内存位置的抽象引用
基本类型直接存储值，引用类型存储内存地址
JavaScript 引擎自动管理内存分配和回收
②变量的定义
| 关键字 | 作用 | 是否可重新赋值 | 作用域 |
|---|---|---|---|
var | ES5声明变量 | 是 | 函数作用域 |
let | ES6+声明变量 | 是 | 块级作用域 |
const | 声明常量 | 否 | 块级作用域 |
最佳实践：
优先使用
const，当值不会重新赋值时使用，提高代码安全性需要重新赋值时用
let，当需要重新赋值时使用避免使用
var，除非需要兼容老旧环境
③JavaScript 变量命名的核心规范包括：
-遵循基本语法规则（字母、数字、下划线、$符号，不能以数字开头）
-不能使用关键字和保留字
-区分大小写
-使用驼峰命名法（推荐）
-命名应具有语义化，便于理解和维护
-遵循特殊类型变量的命名约定（布尔值、数组、函数等）
2.2 输入与输出
| 方法 | 作用 | 返回值 |
|---|---|---|
| alter(对象) | 弹出警告框 | 无 |
| console.log(对象) | 控制台输出 | 无 |
| prompt("提示文本内容") | 弹出输入框 | 用户输入的字符串 |
2.3 数据类型
简单数据类型（基本类型）---存储具体的值
| 类型 | 说明 | 示例 |
|---|---|---|
Number | 数字 | 10, 3.14 |
String | 字符串 | "hello" |
Boolean | 布尔值 | true, false |
Undefined | 变量定义未赋值 | let a; |
Null | 空对象 | let a = null; |
复杂数据类型（引用类型）---存储对象的内存地址值
object---null，数组，函数
类型检测
typeof variable：返回类型字符串variable instanceof Array：返回布尔值
类型转换
| 转换目标 | 方法 | 示例 |
|---|---|---|
| 转字符串 | String(), toString() | String(123) → "123" |
| 转数字 | parseInt(), parseFloat(), Number() | parseInt("10px") → 10 |
| 转布尔 | Boolean() | Boolean("") → false |
隐式转换：+ 操作符，可用于转字符串；!! 操作符，可用于转布尔
注意：
- parseInt() 和 parseFloat() 会从字符串的开始解析数字，直到遇到非数字字符为止
- parseInt() 转换的数据只包含整数部分，不含小数的部分
- parseFloat() 转换的数据包含整数部分，也含小数的部分
- Number() 对于不能转换的字符串会返回 NaN
- toString() 方法可以用于数字、布尔值、对象等类型转换为字符串
- 在比较运算中，JavaScript会自动进行类型转换（隐式转换）
- 使用严格相等运算符 === 可以避免自动类型转换
三、运算符与流程控制
3.1 运算符
①算数运算符:
- +：加法；
- -：减法
- *：乘法
- /：除法
- %：取模（求余数）
②递增和递减运算符:
- ++：递增（将变量值加1）-------相当于Python的 +=1
- --：递减（将变量值减1）-------相当于Python的 -=1
注意点：++，--参与运算
++，-- 前置：
先对变量进行递增或递减操作
然后返回变量的新值
++，-- 后置：
先返回变量的当前值
然后对变量进行递增或递减操作
③⽐较运算符:
- ==：相等（不严格，会进行类型转换）---只比较值是否一样，不比较类型
- ===：全等（严格相等，值和类型都必须相同）-------比较值和类型是否一样
- !=：不相等
- !==：不全等
- >、<、>=、<=：大于、小于、大于等于、小于等于
④逻辑运算符
- &&：逻辑与（两个条件都为真时才为真）---相当于Python的and
- ||：逻辑或（任一条件为真即为真）---相当于Python的or
- !：逻辑非（取反）---相当于Python的not
⑤赋值运算符:
- =：简单赋值
- +=：加并赋值
- -=：减并赋值
- *=：乘并赋值
- /=：除并赋值
- %=：取模并赋值
3.2 流程控制
①顺序控制
程序按照代码书写的顺序依次执行，这是最基础的执行方式。
②条件分支
-根据条件判断来决定执行哪一段代码。
-常见的分支控制语句包括：
if语句---单分支，双分支，多分支
//单分支
if(条件){执行逻辑代码}
//双分支if(条件){执行逻辑代码}else{执行逻辑代码}
//多分支if(条件1){执行逻辑代码1}else if(条件2){执行逻辑代码2}else{执行逻辑代码3}switch语句switch (表达式) {case 值1:// 当表达式等于值1时执行的代码break;case 值2:// 当表达式等于值2时执行的代码break;default:// 当表达式不匹配任何case时执行的代码}③循环结构
重复执行某段代码直到满足特定条件为止。
循环三要素：初始化; 条件; 更新
//常见的循环控制语句包括：
for循环
for (初始化; 条件; 更新) {// 循环体
}// 示例
for (let i = 0; i < 5; i++) {console.log(i);
}while循环
while (条件) {// 循环体
}// 示例
let i = 0;
while (i < 5) {console.log(i);i++;
}do-while循环
do {// 循环体
} while (条件);// 示例
let j = 0;
do {console.log(j);j++;
} while (j < 5);
循环控制：
break：跳出整个循环continue：跳过本次循环，继续下一次
四、函数
4.1 函数声明与调用
①函数的作用：可以复用的功能代码块
②函数的创建与使用：
-具名函数（命名函数）创建：
function 函数名称(形参1，形参2……){
函数体
}
-匿名函数（函数表达式）创建
let 函数变量名称= function(形参1，形参2……){
函数体
}
-箭头函数
let 函数变量名称= (形参1，形参2……)=>{
函数体
}
// 具名函数
function greet(name) {return "Hello, " + name;
}// 匿名函数（函数表达式）
const greet = function(name) {return "Hello, " + name;
};// 箭头函数（ES6+）
const greet = (name) => "Hello, " + name;4.2 参数与返回值
参数可设置默认值：
function greet(name = "Guest")不定参：
function sum(...numbers)return返回值，若无 return 则返回undefined
4.3 函数作用域与 this
函数内部变量为局部变量
this指向调用者（动态变化）箭头函数中的
this继承自外层作用域
五、数组与对象
5.1 数组
①数组对象的作用是：使用单独的变量名来存储一系列的值。
②创建方式
-字面量-----[元素1，元素2，……]----推荐
-构造函数---- new Array(元素1，元素2，……)
③基本操作方法（重点）
增：
- push()： 在数组末尾添加一个或多个元素----新数组的长度
- unshift()： 在数组开头添加一个或多个元素---新数组的长度
- splice()： 在数组指定位置添加元素----空数组 []
删
- pop()： 删除并返回数组的最后一个元素----被删除的元素
- shift()： 删除并返回数组的第一个元素----被删除的元素
- splice()： 删除指定位置的元素----包含被删除元素的数组
改
- 通过索引直接赋值： 修改指定索引位置的元素----新值
- splice()： 替换指定位置的元素----包含被替换元素的数组
查
- 通过索引访问：获取指定索引位置的元素---指定位置的元素
- indexOf()：查找元素第一次出现的索引---元素索引或-1
- lastIndexOf()：查找元素最后一次出现的索引---元素索引或-1
- find()：查找满足条件的第一个元素---元素值或undefined
- findIndex()：查找满足条件的第一个元素的索引---元素索引或-1
- includes()：判断数组是否包含指定元素---true或false
// 创建
const arr = [1, 2, 3];
const arr2 = new Array(1, 2, 3);// 增删改查
arr.push(4); // 末尾添加
arr.pop(); // 末尾删除
arr.unshift(0); // 开头添加
arr.shift(); // 开头删除
arr.splice(1, 1, 99); // 删除索引1处1个元素，插入99
arr.indexOf(2); // 查找索引
arr.includes(2); // 是否包含5.2 对象
①作用：
用于描述现实世界中的事物，可以包含属性和方法
是JavaScript中的一种复杂数据类型，存储的是内存地址值
②创建
let obj = {
属性名1: 属性值1,
属性名2: 属性值2
};
③基本操作方法
增：
- 直接添加属性：对象.属性名 = 值 或 对象[属性名] = 值
删：
- delete 对象.属性名
改：
- 修改属性值：对象.属性名 = 新值
查：
- 访问属性：对象.属性名 或 对象[属性名]
- 使用 Object.keys(obj) 获取所有属性名
- 使用 Object.values(obj) 获取所有属性值
- 使用 Object.entries(obj)获取对象属性名和属性值
const person = {name: "Alice",age: 25,greet() {console.log("Hello");}
};// 增删改查
person.city = "Beijing";
delete person.age;
person.name = "Bob";
console.log(person.name);六、DOM 操作
DOM文档对象模型---操作页面的标签，文本，属性
DOM对象----document object model
document 是DOM的顶层对象
6.1 DOM对象获取的常用方式
- getElementById():通过元素的id属性获取元素---单个元素对象或null
- getElementsByClassName():通过class属性获取元素集合--HTMLCollection伪数组（具体数组的特性，但没数组的相关操作方法）
- getElementsByTagName():通过标签名获取元素集合----HTMLCollection
- querySelector():通过CSS选择器获取第一个匹配元素---单个元素对象或null
- querySelectorAll():通过CSS选择器获取所有匹配元素---NodeList
6.2 DOM事件基本操作
1.事件三要素
- 事件源：引发事件的HTML元素
- 事件类型：如点击(click)、鼠标悬停(mouseover)等
- 事件处理程序：响应事件的函数
2. 事件处理方法
on+事件名称=回调函数------不能获取动态添加元素节点的对象及相关数据
addEventListener(事件名称，回调函数)----能获取动态添加元素节点的对象及相关数据--推荐使用
6.3 DOM的基本操作
①文本内容操作
- 元素对象.innerHTML
- 元素对象.innerText
②标签属性操作
- 元素对象.src
- 元素对象.href
- 元素对象.id
- 元素对象.className
③标签样式操作
- 元素对象.style
- 元素对象.className
6.4 this对象
全局环境：
- this指向全局对象（浏览器中是window）
函数调用：
- 对象方法：this指向调用该方法的对象
- 箭头函数：this继承自外层作用域
- 事件处理：this指向触发事件的元素
- 构造函数：this指向新创建的实例（了解）
七、BOM 操作
7.1 定时器
setTimeout(回调函数,毫秒时间) ----临时计时器----一次性使用
setInterval(回调函数,毫秒时间) ---- 循环计时器--- 循环使用
// 一次性定时器
const timer = setTimeout(() => {console.log("执行一次");
}, 1000);// 循环定时器
const interval = setInterval(() => {console.log("每隔1秒执行");
}, 1000);// 清除定时器
clearTimeout(timer);
clearInterval(interval);7.2 Location 与 History
①location URL
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 （80 或 443）
- location.protocol 返回所使用的 web 协议（http: 或 https:）
②history
- history.back() - 与在浏览器点击后退按钮相同（上一页）
- history.forward() - 与在浏览器中点击向前按钮相同（下一页）
- history.go(-1) - 上一页
- history.go(1) - 下一页
// 获取当前URL信息
console.log(location.href);
console.log(location.hostname);// 页面跳转
location.href = "https://example.com";// 历史记录操作
history.back(); // 后退
history.forward(); // 前进
history.go(-1); // 后退一页