JS基础知识点

JS（即 JavaScript ）是网页前端开发三大核心技术之一，是一门跨平台、面向对象的脚本语言，主要用于控制网页行为使其具备交互功能，像点击按钮弹出提示、验证表单输入是否合法这类场景，都可借助它实现。它和 Java 是完全不同的语言，当年为了蹭 Java 热度才命名的JavaScript。二者在概念、设计上差异显著，不过基础语法存在相似性（其实很多编程语言的基础语法都有类似之处）。

JS的发展史？

JavaScript（简称 JS）由 Brendan Eich 于 1995 年发明，并在 1997 年成为 ECMA 标准（即 ECMAScript）。我们常说的 ES6（ECMAScript 6）于 2015 年发布，这个版本引入了众多重要新特性：例如用 let 和 const 声明变量，解决了此前 var 声明变量时存在的作用域混乱问题；箭头函数 () => {} 提供了更简洁的函数定义方式，优化了代码的可读性与书写体验。ES6 还规范了 JavaScript 的模块化系统，通过 import 和 export 语句，开发者能够便捷地管理代码模块，实现代码的复用与拆分。这对大型项目的开发和维护至关重要，既解决了过去 JavaScript 在模块化方面的不足，也让代码结构更清晰、可维护性更强。

自 ES6 之后，JavaScript 语言规范进入快速迭代且稳定发展的阶段，后续版本均在其基础上进行补充完善。ES6 的出现，标志着 JavaScript 从简单的网页脚本语言向功能强大的通用编程语言转变，不仅推动其在现代 Web 开发等场景广泛应用，还拓展到 Node.js 服务端、小程序等开发领域，成为了行业内默认的开发标准。

看完本篇文章可以对JS有个基础的认知，也可以将本文章当作简单的复习资料，如果大家想了解更全面的内容可以前往官网查看哦，里面有非常详细的知识点介绍还有对应的示例。w3school 在线教程全球最大的中文 Web 技术教程。https://www.w3school.com.cn/

HTML基础知识点 HTML基础知识点-CSDN博客文章浏览阅读398次，点赞15次，收藏7次。html基础知识点，超详细，适合遗忘后的快速回顾学习，对0基础的小白也具有一定的学习价值https://blog.csdn.net/m0_71546806/article/details/149711309

CSS基础知识点 CSS基础知识点-CSDN博客文章浏览阅读471次，点赞12次，收藏12次。CSS基础知识点，超详细，适合复习回顾用https://blog.csdn.net/m0_71546806/article/details/149725229

接下来让我们来一起开始学习吧！

1. JS基础知识

1.1 JS引入方式

1.1.1 内部脚本

把 JS 代码直接写在 HTML 文件里，需用 <script> 标签包裹，用法特点：

语法要求：JS 代码必须放在 <script></script> 标签中间，浏览器会识别并执行标签内的代码。
位置灵活：HTML 里可在任意位置放任意数量的 <script> 标签（<head> 或 <body> 里都行）。不过建议放 <body> 底部，因为 JS 可能操作 DOM 元素，等页面结构加载完再执行脚本，能避免 “元素未找到” 的错误，还能让页面先显示内容，改善加载速度。

示例：

<!DOCTYPE html>
<html>
<body>
  <button onclick="showAlert()">点我</button>
  <!-- 内部脚本，放在 body 底部 -->
  <script>
    function showAlert() {
      alert("Hello JavaScript"); 
    }
  </script>
</body>
</html>

1.1.2 外部脚本

把 JS 代码单独写在 .js 文件里，再引入到 HTML 中，适合复杂项目（解耦代码、方便复用），规则如下：

文件规范：外部 .js 文件只存纯 JS 代码，不能有 <script> 标签。比如创建 demo.js 文件，内容就是业务逻辑：
```
// demo.js 内容（无 script 标签）
function showMsg() {
  alert("Hello from external file!");
}
```

1.2 JS基础语法

1.2.1 书写规范

1). 区分大小

JavaScript 是一门区分大小写的编程语言。这意味着变量名、函数名、操作符以及关键字等，字母的大小写不同，就代表不同的实体。在实际开发中，一定要严格注意大小写，否则可能会导致变量未定义、函数调用错误等问题。

2). 分号使用

JavaScript 中，每行结尾的分号是可选的。这是因为 JavaScript 解析器会自动通过一些规则来推断语句的结束位置，即自动分号插入（ASI，Automatic Semicolon Insertion）机制。不过，建议手动添加分号，以提高代码的可读性和避免潜在的错误。

// 不加分号可能导致的问题示例
function getValue() {
  return {
    num: 10
  };
}
let result = getValue()
["num"]; // 这里如果没有分号，解析器可能会将其解析为 getValue()["num"]，导致错误
// 正确写法，手动加分号
function getValue() {
  return {
    num: 10
  };
}
let result = getValue();
result["num"];

3). 注释

单行注释：使用 // 来表示，用于注释一行代码，通常用来解释某一行代码的功能。例如：

// 定义一个变量存储年龄
let age = 18;

多行注释：使用 /* */ 来表示，能注释掉多行代码，常用于注释一段代码块或对函数、类等进行功能说明。例如：

/*
  这个函数用于计算两个数的和
  @param num1 第一个数
  @param num2 第二个数
  @return 两数之和
*/
function sum(num1, num2) {
  return num1 + num2;
}

4). 大括号表示代码块

大括号 {} 用于定义代码块，比如在 if 语句、for 循环、while 循环、函数定义等场景中，用来包含需要执行的一组语句。即使代码块中只有一条语句，也建议加上大括号，以增强代码的可读性和可维护性，避免在后续添加代码时出现逻辑错误。例如：

// 推荐写法，即使只有一条语句也加上大括号
if (true) {
  console.log("条件为真");
}
for (let i = 0; i < 5; i++) { 
  console.log(i);
}
function sayHello() {
  console.log("Hello!");
}

// 不推荐写法，可能在后续添加代码时导致逻辑问题
if (true) 
  console.log("条件为真"); 
// 如果后续想再添加一条语句，容易遗漏大括号，导致逻辑错误

5). 变量命名规范

虽然 JavaScript 对变量命名没有严格的强制规范，但遵循良好的命名习惯有助于团队协作和代码维护：

驼峰命名法：变量名、函数名通常使用小驼峰命名法，即第一个单词的首字母小写，后面每个单词的首字母大写，例如 userName、getElementById 。
语义化：变量名要能清晰表达其用途，比如用 count 表示计数，用 isLogin 表示是否登录的状态。
避免使用保留字：不要使用 JavaScript 中的关键字（如 if、for、let 等）和保留字作为变量名。

6). 代码缩进

为了让代码结构更加清晰，便于阅读和理解，需要使用合适的缩进。一般来说，推荐使用 2 个空格或 4 个空格进行缩进，在团队开发中要保持统一。

1.2.2 JavaScript 的输出语句

1). 交互与提示（window.alert()）

用途：向用户弹出警告框，显示提示 / 警告信息（如表单验证报错）。
特点：模态弹窗，会阻塞页面操作，用户点 “确认” 才继续。

2). 页面内容输出（document.write()）

用途：直接向 HTML 文档写入内容（如动态生成简单列表 / 文本）。
风险：页面加载完成后调用，会清空原有内容后重写，需谨慎用。

3). 调试与日志（console.log()）

用途：向浏览器控制台输出信息（变量值、代码执行状态等）。开发调试排查问题、验证逻辑时用，是项目调试基础技能。

1.2.3 变量

1).变量的基本概念

JavaScript 中，变量用于存储数据，是编程里操作数据的基础载体，可存数字、字符串、对象等各类数据。

2).var 声明变量

(1). 基础用法

用 var 关键字声明变量，示例：

var age = 20; // 声明并赋值，存数字类型
var name; 
name = "张三"; // 先声明再赋值，存字符串类型

(2). 弱类型特性

JavaScript 是弱类型语言，var 声明的变量可随时改变存储的数据类型，示例：

var a = 20; 
a = "张三"; // 从数字类型转为字符串类型，不会报错

(3). 变量名规则

组成字符：字母、数字、下划线（_）、美元符号（$）。
限制：数字不能开头，否则是无效变量名，示例：

var _age = 18; // 合法
var $name = "李四"; // 合法
// var 2num = 100; // 非法，数字开头

命名习惯：建议用驼峰命名法，即首单词首字母小写，后续单词首字母大写，示例：var userName = "小明";

3).ES6 新增声明方式（let、const）

(1). let 声明变量

块级作用域：声明的变量仅在所处代码块（{} 包裹区域）内有效，示例：

if (true) {
  let num = 10; 
  console.log(num); // 10，代码块内可访问
}
// console.log(num); // 报错，代码块外无法访问

禁止重复声明：同一作用域内，不能重复声明同名变量，示例：

let age = 20; 
// let age = 30; // 报错，重复声明

对比 var：var 存在变量提升等问题，let 让变量作用域更清晰，现代开发中更推荐优先用 let 声明变量。

(2). const 声明常量

只读特性：声明的是常量，一旦赋值，值不能再改变，示例:

const PI = 3.14159; 
// PI = 3; // 报错，尝试修改常量值

块级作用域：和 let 类似，作用域限定在所处代码块内，示例：

if (true) {
  const MAX_NUM = 100; 
  console.log(MAX_NUM); // 100，代码块内可访问
}
// console.log(MAX_NUM); // 报错，代码块外无法访问

声明时赋值：必须在声明时就赋值，不能先声明再赋值，示例：

const COLOR; 
// COLOR = "red"; // 报错，声明时未赋值
const COLOR = "blue"; // 合法

使用场景：存储固定不变的值，如数学常量、配置项等

1.2.4 数据类型

1). 原始类型（基本类型）

原始类型存储的是简单数据值，操作时直接访问值本身，包含 6 种：

(1). number（数字类型）

涵盖：整数（10、-5 ）、小数（3.14、-0.5 ）、特殊值 NaN（Not a Number，如 parseInt('abc') 会返回 NaN ，表示 “非数字” ）。
特点：弱类型语言特性，变量可随时切换存储数字类型

(2). string（字符串类型）

定义：由字符组成的文本，用单引号（'张三' ）或双引号（"李四" ）包裹，ES6 也支持反引号（Hello ${name}` ，用于拼接变量）。
场景：存储文字描述、用户输入等

(3). boolean（布尔类型）

取值：只有 true（真）和 false（假），用于逻辑判断（如条件语句、开关状态）。

(4). null（空类型）

含义：主动表示 “空对象”（虽然 typeof null 返回 object ，属于历史设计问题），用于刻意清空对象引用

(5). undefined（未定义类型）

含义：变量声明了但未赋值时，默认值就是 undefined ，表示 “未定义” 状态。

(6). symbol（符号类型，ES6 新增）

特点：唯一值，用于创建对象的唯一属性名，避免属性名冲突
场景：复杂对象（如框架、库）中，用于隐藏内部属性，防止被外部意外修改。

let key1 = Symbol('key'); 
let key2 = Symbol('key'); 
console.log(key1 === key2); // false，即使描述相同，Symbol 值也唯一
let obj = {
  [key1]: 'value1' 
};

2).引用类型

引用类型存储的是对象的 “引用地址”，而非值本身。操作时通过地址找到实际对象

(1).object（对象类型）详细知识点见1.3.3

定义：一组键值对（{ key: value } ）的集合，可存储任意类型数据（数字、字符串、函数等）

特点：引用传递：赋值给新变量时，传递的是 “地址”，修改新变量会影响原对象

动态扩展：可随时添加、删除属性

(2). array（数组类型，属于特殊对象）详细知识点见1.3.1

定义：有序的列表，用方括号（[] ）包裹，可存不同类型数据

特点：

下标访问：通过索引（从 0 开始）获取元素，如 list[0] 取 10 。
内置方法：push（末尾加元素）、pop（末尾删元素）、map（遍历处理）等

(3). function（函数类型，属于特殊对象）

定义：可复用的代码块，用 function 关键字或箭头函数（=> ）定义，示例：

// 普通函数
function add(a, b) { 
  return a + b;
}
// 箭头函数
let multiply = (a, b) => a * b;

特点：

可赋值给变量、作为参数传递、作为返回值，示例：

function callFunc(func) { 
  func();
}
let sayHi = function() { 
  console.log('Hi');
};
callFunc(sayHi); // 函数作为参数传递

注意事项：在JS中，允许传递任意数量的实参，不会因 “实参数量与形参数量不匹配” 报错。若实参数量少于形参，多余形参默认赋值为 undefined；若实参数量多于形参，多余实参不会 “失效”，可通过 arguments（普通函数）或剩余参数（...rest）获取并使用。

3). 数据类型检测（typeof 与 instanceof ）

(1). typeof 运算符

作用：返回数据的 “类型字符串”，快速判断原始类型（null 除外），示例：

console.log(typeof 10); // 'number'
console.log(typeof '张三'); // 'string'
console.log(typeof true); // 'boolean'
console.log(typeof undefined); // 'undefined'
console.log(typeof Symbol()); // 'symbol'
// 注意：null 会返回 'object'（历史设计问题）
console.log(typeof null); // 'object' 
// 引用类型：除 function 外，都返回 'object'
console.log(typeof { a: 1 }); // 'object'
console.log(typeof [1,2]); // 'object'
console.log(typeof function(){}); // 'function'

(2). instanceof 运算符

作用：判断引用类型的 “具体类型”（基于原型链），示例：

let arr = [1,2]; 
console.log(arr instanceof Array); // true，判断是否为数组
let obj = { a: 1 }; 
console.log(obj instanceof Object); // true，判断是否为对象

1.2.5 运算符

1). 算术运算符

用于执行数学运算，操作数字类型（也可处理能转数字的其他类型）

运算符	说明	示例	结果
`+`	加法（数字相加 / 字符串拼接）	`5 + 3` / `'Hello' + 'World'`	`8` / `'HelloWorld'`
`-`	减法（数字相减）	`10 - 4`	`6`
`*`	乘法	`3 * 5`	`15`
`/`	除法（返回浮点数结果）	`10 / 3`	`3.333...`
`%`	取余（求余数）	`10 % 3`	`1`
`++`	自增（先返回值再 +1 / 先 +1 再返回，分前缀、后缀）	`let a=5; a++`（后缀，返回 `5` 后变 `6` ） `let b=5; ++b`（前缀，先变 `6` 再返回 `6` ）	-
`--`	自减（类似自增，值减 1 ）	`let c=5; c--`（返回 `5` 后变 `4` ） `let d=5; --d`（先变 `4` 再返回 `4` ）	-

注意：+ 遇到字符串时，会优先作为字符串拼接，而非算术加法，示例：

let result = '10' + 20; 
console.log(result); // '1020'（字符串拼接）
let numResult = 10 + 20; 
console.log(numResult); // 30（算术加法）

2). 赋值运算符

用于给变量赋值，或结合算术运算 “快捷赋值”，核心是简化代码：

运算符	说明	示例（等价写法）
`=`	基本赋值	`let a = 10;`
`+=`	加法赋值（`a = a + b` ）	`a += 5;` 等价 `a = a + 5;`
`-=`	减法赋值（`a = a - b` ）	`a -= 3;` 等价 `a = a - 3;`
`*=`	乘法赋值（`a = a * b` ）	`a = 2;` 等价 `a = a 2;`
`/=`	除法赋值（`a = a / b` ）	`a /= 2;` 等价 `a = a / 2;`
`%=`	取余赋值（`a = a % b` ）	`a %= 3;` 等价 `a = a % 3;`

3).比较运算符

用于判断两个值的关系（大小、相等性等），返回布尔值（true / false ）：

运算符	说明	示例	结果
`>`	大于	`5 > 3`	`true`
`<`	小于	`5 < 3`	`false`
`>=`	大于等于	`5 >= 5`	`true`
`<=`	小于等于	`5 <= 3`	`false`
`==`	相等（会隐式类型转换）	`10 == '10'`	`true`（转成同类型比较）
`===`	严格相等（不类型转换）	`10 === '10'`	`false`（类型不同直接不等）
`!=`	不相等（会类型转换）	`10 != '10'`	`false`（转成同类型后相等，取反）
`!==`	严格不相等（不类型转换）	`10 !== '10'`	`true`（类型不同，直接不等）

关键区别：== vs ===

==：自动转换类型后比较（如 10 和 '10' 转成数字后相等），易引发隐蔽 bug，现代开发推荐用 === 。
===：要求 “值和类型都相同” 才返回 true，更严谨，示例：

let num = 10; 
console.log(num == '10'); // true（类型转换后相等）
console.log(num === '10'); // false（类型不同，严格不等）
console.log(num === 10); // true（值和类型都相同）

4).逻辑运算符

用于逻辑判断（多条件组合），返回布尔值，常见场景：条件语句（if、while ）、表单验证等

&& 逻辑与（“且”，全为真才真）
|| 逻辑或（“或”，有一个真就真）
! 逻辑非（“取反” ）

短路特性（重要！开发高频优化点）：

&&：左边为 false 时，直接返回 false，右边不执行，示例：

let num = 0; 
// num 为 0（假），右边代码不执行，避免报错
num && console.log('num 大于 0');

||：左边为 true 时，直接返回 true，右边不执行，示例：

let name = '张三'; 
// name 有值（真），右边代码不执行
name || console.log('name 未赋值');

5).三元运算符（条件运算符）

语法：条件表达式 ? 值1 : 值2
说明：条件为 true 时返回值1，否则返回值2，是 if-else 的简化写法，示例：

let age = 18; 
let result = age >= 18 ? '成年' : '未成年'; 
console.log(result); // 成年

6).运算符优先级

不同运算符混合使用时，执行顺序有优先级，类似数学运算（先乘除后加减），关键规则：

括号 () 优先级最高，可强制改变执行顺序
常见优先级：() > 算术运算符（*、/ 高于 +、- ） > 比较运算符 > 逻辑运算符 > 赋值运算符

7).类型转换的核心规则（总结表）

原始值	转数字（`Number()`）	转布尔（`Boolean()`）	转字符串（`String()`）
`10`（数字）	`10`	`true`	`'10'`
`'10'`（字符串）	`10`	`true`	`'10'`
`''`（空字符串）	`0`	`false`	`''`
`0`（数字）	`0`	`false`	`'0'`
`NaN`（非数字）	`NaN`	`false`	`'NaN'`
`null`	`0`	`false`	`'null'`
`undefined`	`NaN`	`false`	`'undefined'`

1.2.6 流程控制语句

1).条件判断语句

(1). if...else if...else

if (条件表达式1) {
    // 条件1为 true 时执行的代码
} else if (条件表达式2) {
    // 条件1为 false 且条件2为 true 时执行的代码
} else {
    // 所有条件都为 false 时执行的代码
}

(2). switch

switch (表达式) {
    case 值1:
        // 表达式结果等于值1时执行的代码
        break;
    case 值2:
        // 表达式结果等于值2时执行的代码
        break;
    // 可多个 case
    default:
        // 表达式结果与所有 case 值都不匹配时执行的代码
}

2).循环执行语句

(1).for 循环

for (初始化表达式; 条件表达式; 更新表达式) {
    // 循环体，条件为 true 时重复执行的代码
}

(2).while 循环

while (条件表达式) {
    // 循环体，条件为 true 时重复执行的代码
}

(3).do...while 循环

do {
    // 循环体，至少执行一次的代码
} while (条件表达式);

1.3 JS对象

JS对象包括Array、String、JSON、BOM、DOM等

1.3.1 Array

1).数组定义

方式一：new Array() 构造函数
通过 new Array() 创建数组，可传元素列表或指定长度（长度指定时，元素初始为 undefined ）。

// 传入元素列表
var arr1 = new Array(1, 2, 3, 4); 
// 传入长度（创建长度为 3，元素均为 undefined 的数组 ）
var arr2 = new Array(3);

方式二：数组字面量 []（推荐）
用 [] 直接定义数组，简洁常用。

// 包含多种类型元素的数组
var arr = [1, 'hello', true, {name: '张三'}];

2).数组访问与修改

访问元素
通过 ** 索引（下标）** 访问数组元素，索引从 0 开始。

var arr = [1, 2, 3];
// 输出 1
console.log(arr[0]);

修改元素
通过索引赋值，可修改已有元素，或给超出当前长度的索引赋值（会扩展数组长度，中间未赋值位置为 undefined ）。

var arr = [1, 2, 3];
// 修改索引 1 的元素为 20
arr[1] = 20; 
// 给索引 10 赋值，数组长度变为 11，索引 3-9 为 undefined
arr[10] = 50;

3).数组属性与方法

(1).核心属性

length 获取或设置数组长度。设置长度小于原长度时，会截断数组；大于原长度时，新增位置为 undefined 。

(2).常用方法

遍历方法：forEach() 遍历数组每个有值的元素，执行传入函数（不改变原数组，无返回值）。

var arr = [1, 2, 3];
// 遍历输出 1、2、3
arr.forEach(function (item) { 
  console.log(item);
});
// ES6 箭头函数简化
arr.forEach(item => console.log(item));

新增元素：push() 在数组末尾添加一个或多个元素，返回新数组长度，会改变原数组。

var arr = [1, 2];
// 添加元素 3、4，数组变为 [1, 2, 3, 4]，返回 4
var newLength = arr.push(3, 4); 
console.log(newLength); // 输出 4

删除 / 插入 / 替换：splice() 功能丰富，可删除、插入、替换数组元素，会改变原数组。语法：splice(起始索引, 删除数量, 插入元素1, 插入元素2...)

// 删除元素
var arr = [1, 2, 3, 4];
// 从索引 2 开始，删除 2 个元素，数组变为 [1, 2]
arr.splice(2, 2); 

// 插入元素
var arr = [1, 2];
// 从索引 1 开始，删除 0 个元素，插入 3、4，数组变为 [1, 3, 4, 2]
arr.splice(1, 0, 3, 4); 


// 替换元素
var arr = [1, 2, 3];
// 从索引 1 开始，删除 1 个元素（2），插入 20，数组变为 [1, 20, 3]
arr.splice(1, 1, 20);

pop()：删除数组最后一个元素，返回被删除元素，改变原数组。

var arr = [1, 2];
// 删除 2，数组变为 [1]，返回 2
var removed = arr.pop();

unshift()：在数组开头添加元素，返回新长度，改变原数组。

var arr = [2, 3];
// 添加 1，数组变为 [1, 2, 3]，返回 3
var newLength = arr.unshift(1);

slice()：截取数组部分元素，返回新数组（不改变原数组），语法：slice(起始索引, 结束索引)（结束索引不包含）。

var arr = [1, 2, 3, 4];
// 截取索引 1 到 3（不包含 3 ），返回 [2, 3]
var newArr = arr.slice(1, 3);

1.3.2 String

1).字符串创建方式

方式一：new String() 构造函数

// 创建字符串对象
var strObj = new String("Hello String"); 
console.log(strObj); // 输出 String {"Hello String"}

方式二：字符串字面量（推荐）

// 双引号
var str1 = "Hello String"; 
// 单引号
var str2 = 'Hello String'; 
// 模板字符串（支持变量插值）
var name = "John";
var str3 = `Hello ${name}`;

2).字符串核心属性

length获取字符串的长度（包含空格、特殊字符，不区分中英文）。

var str = "Hello String";
// 输出 11（H e l l o   S t r i n g 共 11 个字符 ）
console.log(str.length);

3).常用字符串方法

charAt(index) 返回字符串指定索引位置的字符（索引从 0 开始，超出索引返回空字符串）。

var str = "Hello String";
// 索引 4 对应字符 'o'
console.log(str.charAt(4)); 
// 索引 100 超出范围，返回空字符串
console.log(str.charAt(100));

indexOf(searchValue, startIndex) 从前往后检索子串位置，返回首次匹配的索引；无匹配则返回 -1 。startIndex 为可选参数，指定开始检索位置。

var str = "Hello String";
// 检索 "lo"，首次出现在索引 3
console.log(str.indexOf("lo")); 
// 从索引 5 开始检索，无匹配返回 -1
console.log(str.indexOf("lo", 5));

trim() 去除字符串两端的空格（不影响中间空格），返回新字符串（原字符串不变）。

var str = "  Hello String  ";
// 去除两端空格，返回 "Hello String"
var newStr = str.trim(); 
console.log(newStr);

substring(start, end) 提取字符串中从 start 索引到 end 索引（含头不含尾）的子串，返回新字符串。end 省略则提取到末尾。

var str = "Hello String";
// 提取索引 0-4（含 0，不含 5 ），返回 "Hello"
console.log(str.substring(0, 5)); 
// 提取索引 6 到末尾，返回 "String"
console.log(str.substring(6));

slice(start, end) 类似 substring，但支持负数索引（负数表示从末尾开始计数）。

var str = "Hello String";
// 提取索引 -6 到 -1（含 -6，不含 -1 ），返回 "String"
console.log(str.slice(-6, -1));

replace(searchValue, replaceValue) 替换首次匹配的子串，返回新字符串（原字符串不变）。

var str = "Hello String";
// 将 "Hello" 替换为 "Hi"，返回 "Hi String"
console.log(str.replace("Hello", "Hi"));

split(separator, limit) 按分隔符拆分字符串为数组，limit 限制拆分数量。

var str = "Hello,World,JS";
// 按逗号拆分，返回 ["Hello", "World", "JS"]
console.log(str.split(",")); 
// 限制拆分 2 个，返回 ["Hello", "World"]
console.log(str.split(",", 2));

4）字符串特点

不可变性：字符串一旦创建，内容无法直接修改，所有方法返回的是新字符串（原字符串保持不变）。

var str = "Hello";
// 原字符串不变，返回 "HelloWorld"
str.concat("World"); 
console.log(str); // 仍为 "Hello"

灵活拼接：支持用 +、+= 或模板字符串拼接，模板字符串更简洁且支持换行、变量插值。

var name = "John";
// 传统拼接
var str1 = "Hello, " + name + "!"; 
// 模板字符串拼接（推荐）
var str2 = `Hello, ${name}!`;

1.3.3 JSON

1). JS自定义对象

定义方式（对象字面量）用 {} 包裹属性和方法，简洁直观，是最常用方式。

// 语法
var 对象名 = {
  属性名1: 属性值1,
  属性名2: 属性值2,
  // 方法（函数）
  方法名: function(参数) {
    // 逻辑代码
  }
  // ES6+ 简化写法
  方法名() {
    // 逻辑代码
  }
};

// 示例
var user = {
  name: "Tom",
  age: 20,
  // 传统方法定义
  eat: function() {
    alert("用膳~");
  },
  // ES6+ 简化方法定义
  sleep() {
    alert("就寝~");
  }
};

属性: 存储数据（如字符串、数字、布尔等任意类型），通过 对象名.属性名 访问。

console.log(user.name); // 访问属性，输出 "Tom"
user.age = 21; // 修改属性值

方法:对象内的函数，封装逻辑，通过对象名.方法名() 调用。

user.eat(); // 调用方法，弹出 "用膳~"
user.sleep(); // 调用方法，弹出 "就寝~"

2) JSON的概念

JSON（JavaScript Object Notation），即 JavaScript 对象标记法，是基于 JS 对象语法的文本格式，因语法简洁、结构清晰，常用于网络数据传输（如接口请求 / 响应）。

3)JSON语法规则

基本结构

以 {}（对象）或 []（数组）开头，键值对组织数据。
键（属性名）必须用双引号包裹，值支持类型：
数字（整数 / 浮点数）、字符串（双引号）、布尔（true/false）、数组、对象、null。

{
  "name": "Tom",
  "age": 20,
  "hobbies": ["篮球", "音乐"],
  "isStudent": true,
  "address": {
    "city": "北京",
    "street": "XX路"
  }
}

4)JSON与 JS 对象的区别

对比项	JSON	JS 对象
键的引号	必须双引号（`"key"`）	可省略（`key` 或 `"key"`）
值的类型限制	严格（如字符串用双引号）	更灵活（字符串可用单引号）
本质	文本（字符串）	内存中的数据结构

5)JSON 与 JS 对象的转换

(1). JSON 字符串 → JS 对象（解析）

用 JSON.parse() 方法，将 JSON 格式的字符串转为 JS 对象，方便代码操作。

语法：

let jsObj = JSON.parse(jsonStr);

示例：

let jsonStr = '{"name":"Tom","age":20}';
// 解析为 JS 对象 { name: "Tom", age: 20 }
let user = JSON.parse(jsonStr); 
console.log(user.name); // 访问属性

(2).JS 对象 → JSON 字符串（序列化）

用 JSON.stringify() 方法，将 JS 对象转为 JSON 格式的字符串，用于网络传输。

语法：

let jsonStr = JSON.stringify(jsObj);

示例：

let user = { name: "Tom", age: 20 };
// 转为 JSON 字符串 '{"name":"Tom","age":20}'
let jsonStr = JSON.stringify(user); 
console.log(jsonStr); // 用于接口请求传输

1.3.4 BOM

1). BOM的概念

BOM（Browser Object Model）即浏览器对象模型，是 JS 操作浏览器功能的接口，将浏览器组件（窗口、地址栏等）封装为对象，实现交互控制。通过操作 Window、Navigator、Screen、History、Location 等对象，控制浏览器行为（如弹窗、跳转、获取设备信息）。

2). Window（浏览器窗口对象）

作用：控制浏览器窗口（弹窗、定时器、获取其他 BOM 对象）。
获取：直接用 window（可省略前缀），如 alert() 等价于 window.alert()。
常用属性：
- window.history：访问历史记录对象（History ）。
- window.location：访问地址栏对象（Location ）。
- window.navigator：访问浏览器信息对象（Navigator ）。
常用方法：
- alert()：弹出警告框。
- confirm()：弹出确认框（返回 true/false ）。
- setInterval()：周期性执行函数（定时器，如轮询）。
- setTimeout()：延迟执行一次函数（延时器）。

// 警告框
alert("Hello BOM"); 
// 确认框
let isConfirm = confirm("确认删除？"); 
// 2秒执行一次（周期定时器）
setInterval(() => console.log("执行中..."), 2000); 
// 3秒后执行一次（延时器）
setTimeout(() => alert("延时执行"), 3000);

3). Location（地址栏对象）

作用：操作浏览器地址栏（获取 / 设置 URL、跳转页面）。
获取：window.location 或直接 location（省略 window ）。
核心属性：
- href：获取当前 URL 或设置新 URL（实现页面跳转）。

// 获取当前地址
console.log(location.href); 
// 跳转到新地址
location.href = "https://www.baidu.cn";

4). History（历史记录对象）

作用：操作浏览器历史记录（前进、后退）。
常用方法：
- history.back()：后退到上一页。
- history.forward()：前进到下一页。

（注：实际开发中因安全限制，直接操作历史记录场景较少，更多用于单页应用路由模拟。）

5). Navigator（浏览器对象）

作用：获取浏览器信息（如版本、设备、用户代理）。
常用属性：
- navigator.userAgent：浏览器标识（区分设备、浏览器类型）。

// 判断是否为手机端浏览器
if (navigator.userAgent.match(/Mobile/)) { 
  console.log("手机端浏览器");
}

6). Screen（屏幕对象）

作用：获取屏幕硬件信息（分辨率、尺寸）。
常用属性：
- screen.width：屏幕宽度。
- screen.height：屏幕高度。

// 输出屏幕分辨率
console.log(`屏幕分辨率：${screen.width}x${screen.height}`);

1.3.5 DOM

1).DOM的概念

DOM（Document Object Model，文档对象模型）是 JS 操作 HTML/XML 文档的接口，将文档解析为对象树，让 JS 能动态修改内容、样式、结构。

作用：把 HTML 文档的每个部分（如标签、属性、文本）封装为对象，通过 JS 操作这些对象，实现页面动态交互（如修改内容、响应事件）。
组成：
- Document：整个文档对象（代表页面整体）。
- Element：元素对象（如 <div>、<a> 等标签）。
- Attribute：属性对象（如 href、class 等）。
- Text：文本对象（标签内的文字）。

2).DOM 树结构

HTML 文档被解析为树形结构，每个标签、文本、属性都是树的节点，例如：

<html>
  <head>
    <title>DOM</title>
  </head>
  <body>
    <h1>DOM对象标题</h1>
    <a href="https://baidu.cn">百度</a>
  </body>
</html>

对应 DOM 树：

文档(Document)
└─ html(Element)
   ├─ head(Element)
   │  └─ title(Element)
   │     └─ 文本(Text: "DOM")
   └─ body(Element)
      ├─ h1(Element)
      │  └─ 文本(Text: "DOM对象标题")
      └─ a(Element)
         ├─ 属性(Attribute: href="https://baidu.cn")
         └─ 文本(Text: "百度")

3).获取 DOM 元素（Element）

通过 document 对象提供的方法，获取页面中的元素，常用方式：

(1). getElementById(id) 根据 ID 属性获取元素（页面唯一，返回单个元素）。

// 获取 id 为 "h1" 的元素
let h1 = document.getElementById('h1');

(2).getElementsByTagName(tag) 根据标签名获取元素（返回元素数组，需遍历操作）。

// 获取所有 <div> 元素
let divs = document.getElementsByTagName('div'); 
for (let i = 0; i < divs.length; i++) {
  console.log(divs[i]);
}

(3).getElementsByName(name) 根据 name 属性获取元素（返回元素数组）。

// 获取 name 为 "hobby" 的元素
let hobbies = document.getElementsByName('hobby');

(4).getElementsByClassName(class) 根据 class 属性获取元素（返回元素数组）。

// 获取 class 为 "cls" 的元素
let divs = document.getElementsByClassName('cls'); 
for (let i = 0; i < divs.length; i++) {
  console.log(divs[i]);
}

4).操作 DOM 元素

获取元素后，查阅官方文档，通过属性 / 方法修改元素的内容、样式、结构。下面是一些常见的DOM操作
(1). 修改内容（innerHTML/innerText）
innerHTML：识别 HTML 标签，可修改结构。
innerText：仅处理文本，忽略 HTML 标签。

let div = document.getElementsByClassName('cls')[0];
// 修改内容
div.innerHTML = "新内容 "; 
// 仅修改文本
div.innerText = "新文本";

(2). 修改样式（style）
通过 style 属性修改 CSS 样式。

let h1 = document.getElementById('h1');
// 修改颜色（驼峰命名，如 backgroundColor 对应 CSS 的 background-color）
h1.style.color = "red"; 
// 修改字体大小
h1.style.fontSize = "20px";

(3).响应事件（如点击事件）

给元素绑定事件（如 onclick ），触发时执行函数。

let btn = document.getElementById('btn');
// 点击按钮时弹出提示
btn.onclick = function() { 
  alert("按钮被点击了！");
};

1.4 JS事件

事件是浏览器与用户交互的触发点（如点击、输入），JS 通过事件绑定 / 监听响应用户操作，实现动态交互。

1.4.1 事件绑定方式

1). HTML 标签属性绑定（内联方式）

直接在 HTML 标签中写 on事件名，调用全局函数。

语法：

<标签 on事件名="函数名()">内容</标签>

示例（点击事件 onclick ）：

<input type="button" onclick="onClickFn()" value="按钮">
<script>
function onClickFn() {
  alert('点击触发！');
}
</script>

特点：

简单直观，但耦合 HTML 与 JS，不利于维护（不推荐复杂场景）。

2).DOM 属性绑定（脚本方式）

先获取 DOM 元素，再通过 元素.事件名 = 函数 绑定。

语法：

// 1. 获取元素
let 元素 = document.getElementById('id'); 
// 2. 绑定事件
元素.事件名 = function() { 
  // 事件逻辑
};

示例（点击事件 onclick ）：

<input type="button" id="btn" value="按钮">
<script>
// 获取元素
let btn = document.getElementById('btn'); 
// 绑定点击事件
btn.onclick = function() { 
  alert('点击触发！');
};
</script>

特点：

分离 HTML 与 JS，更灵活；但同一事件只能绑定一个函数（重复绑定会覆盖）。

1.4.2 常见事件类型

事件名	说明	典型场景
`onclick`	鼠标单击	按钮点击、链接跳转
`onblur`	元素失去焦点	输入框离开时校验内容
`onfocus`	元素获得焦点	输入框聚焦时显示提示
`onload`	页面 / 图像加载完成	页面初始化后执行逻辑（如数据请求）
`onsubmit`	表单提交	提交前校验表单数据
`onkeydown`	键盘按键按下	监听快捷键（如回车提交）
`onmouseover`	鼠标移入元素	显示悬浮菜单、提示信息
`onmouseout`	鼠标移出元素	隐藏悬浮菜单、恢复样式