一、JS 基础语法

JS 基础语法是编写所有代码的基础，主要包含变量声明、数据类型、运算符三大核心内容，规定了 JS 数据存储、识别、运算的基础规则。

1. 变量声明

操作类型	方法 / 属性	使用示例	作用说明
变量声明	var	var name = “小明”;	旧版变量声明方式，属于函数作用域，支持重复声明，存在变量提升，适合简单测试，项目中不推荐使用。
变量声明	let	let score = 80;	主流变量声明方式，属于块级作用域，不可重复声明，支持修改变量值，用于存储会变化的数据。
变量声明	const	const PI = 3.14;	常量声明方式，块级作用域，声明时必须赋值，基础数据值不可修改，用于存储固定不变的数据。

var a = 10;
let b = 20;
const PI = 3.14;
console.log(a, b, PI);

2. 数据类型

操作类型	方法 / 属性	使用示例	作用说明
基础数据类型	String 字符串	let str = “你好 JS”;	存储文本、中文、符号、数字文本，必须用单 / 双引号包裹，是页面提示、文字展示的核心类型。
基础数据类型	Number 数字	let num = 99;	存储整数、小数，无需引号，用于数值计算、分数、价格、数量等数据存储。
基础数据类型	Boolean 布尔	let flag = true;	只有 true（真）、false（假）两个值，专门用于条件判断、状态标记。
基础数据类型	Undefined 未定义	let a;	变量声明后未赋值，默认值为 undefined，代表变量存在但无数据。
基础数据类型	Null 空值	let b = null;	手动给变量赋值为空，代表主动清空数据，常用于初始化清空变量。
引用数据类型	Array / Object	let arr = [1,2,3];	存储批量、结构化数据，数据存在堆内存，可动态修改内部数据，用于复杂数据存储。

let str = "我是字符串";
let num = 88;
let flag = true;
console.log(typeof str, typeof num);

3. 运算符

操作类型	方法 / 属性	使用示例	作用说明
算术运算	+、-、*、/、%	let res = 10 + 5;	完成数学加减乘除、取余运算，用于数值计算、判断数字奇偶、计算总价等场景。
自增自减运算	++、–	i++、count–	变量自动加 1 或减 1，多用于循环计数、数量增减场景。
赋值运算	=、+=、-=	num += 10;	给变量赋值或叠加赋值，快速更新变量数值。
比较运算	>、<、、=	score > 60	对比两个数据大小、是否相等，返回布尔值，用于所有条件判断场景。
逻辑运算	&&、、!	num>60 && num<100	组合多个判断条件，实现多条件同时满足、满足其一、取反判断。

---

let a = 10;
let b = a + 5;
let c = a > 6;
console.log(b, c);

二、流程控制

JS 默认从上到下顺序执行代码，流程控制可以改变代码执行顺序，分为条件判断、循环语句、循环控制三类，是实现程序逻辑、交互判断的核心。

1. 条件判断

操作类型	方法 / 属性	使用示例	作用说明
单条件判断	if	if(score > 60){}	满足指定条件就执行代码，不满足则不执行，适用于单一条件判断。
双条件判断	if…else	if(score>60){}else{}	二选一执行，条件成立执行 if 代码，不成立执行 else 代码。
多条件判断	else if	if(){}else if(){}else{}	多条件依次匹配，实现分级判断，如成绩优秀、良好、及格、不及格分级。
固定值判断	switch	switch(num){case 1:}	精准匹配固定数值，适合固定选项判断，如星期、状态码匹配。
简化判断	三元表达式	score>60?“及格”:“不及格”	简化简单的 if else 双分支判断，写法简洁，适合简单二一场景。

let score = 75;
if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

2. 循环语句

操作类型	方法 / 属性	使用示例	作用说明
计数循环	for 循环	for(let i=0;i<10;i++){}	最常用循环，自定义初始值、条件、步长，适合已知循环次数的场景，遍历列表、重复执行代码。
条件循环	while 循环	while(flag){}	先判断条件，条件成立再执行代码，适合未知循环次数、依靠状态判断的场景。
先执行后判断循环	do…while 循环	do{}while(flag)	先执行一次代码，再判断条件，保证代码至少执行一次。
遍历循环	for…of 循环	for(let item of arr){}	专门遍历数组、字符串等可迭代数据，直接获取每一项数据，写法简单。

// 1. for 循环
for (let i = 1; i <= 3; i++) {
    console.log("for循环：" + i);
}
// 2. while 循环
let i = 1;
while (i <= 3) {
    console.log("while循环：" + i);
    i++;
}

3. 循环控制

操作类型	方法 / 属性	使用示例	作用说明
终止循环	break	break;	直接终止并跳出当前整个循环，不再执行后续循环次数，用于找到目标后停止循环。
跳过单次循环	continue	continue;	跳过本次循环剩余代码，直接进入下一次循环，不终止整体循环。

// 1. break 终止循环
for (let i = 1; i <= 5; i++) {
    if (i === 3) break;
    console.log("break：" + i);
}
// 2. continue 跳过本次
for (let i = 1; i <= 5; i++) {
    if (i === 3) continue;
    console.log("continue：" + i);
}

---

三、函数基础

函数是封装重复逻辑的可复用代码块，可按需调用，大幅减少冗余代码，是 JS 实现交互、功能封装的核心，新手重点掌握定义、调用、参数、返回值、作用域。

操作类型	方法 / 属性	使用示例	作用说明
函数定义	function 声明函数	function add(){}	基础函数定义方式，结构清晰易懂，可先调用后定义，适合新手编写功能函数。
函数表达式定义	变量赋值函数	let fn = function(){}	将匿名函数赋值给变量，必须先定义后调用，避免函数提升混乱，项目常用。
精简函数定义	箭头函数	let fn = ()=>{}	简化函数写法，无独立 this，适合简单逻辑、遍历回调等场景。
函数调用	函数名 ()	add();	执行封装好的函数内部代码，实现功能复用，可多次重复调用。
函数传参	形参、实参	function add(a,b){} add(1,2)	形参接收外部数据，实参传递真实数据，让函数可适配不同数据，通用性更强。
函数返回值	return	return a+b;	终止函数执行，并返回运算结果，可将结果赋值给外部变量使用。
全局变量使用	全局变量	let num=10; function fn(){}	函数外部定义的变量，所有函数、代码均可访问，全局通用。
局部变量使用	局部变量	function fn(){let a=1}	函数内部定义的变量，仅当前函数内部可访问，函数执行完毕自动销毁。

// 1. 函数定义
function add(a, b) {
    // 2. 返回结果
    return a + b;
}
// 3. 函数调用
let result = add(10, 20);
console.log("函数结果：" + result);

---

四、数组与对象

数组和对象是 JS 核心复杂数据类型，用于存储批量、结构化数据，数组适合有序数据，对象适合键值对数据，是页面数据渲染、数据存储的基础。

1. 数组操作

操作类型	方法 / 属性	使用示例	作用说明
数组定义	[]	let arr = [1,2,3,4];	创建有序数组，用于存储一组同类、有序数据。
获取数组元素	下标索引	arr[0]	通过数字下标精准获取数组中对应位置的元素。
末尾添加元素	push()	arr.push(5)	在数组末尾新增一个或多个元素，数组长度自动增加。
末尾删除元素	pop()	arr.pop()	删除数组最后一个元素，数组长度自动减少。
头部添加元素	unshift()	arr.unshift(0)	在数组最前面新增元素。
头部删除元素	shift()	arr.shift()	删除数组第一个元素。
遍历数组	for 循环	for(let i=0;i<arr.length;i++)	循环取出数组每一个元素，用于批量处理、渲染数据。

// 1. 数组定义
let arr = [10, 20, 30];

// 2. 获取数组元素（下标0开始）
console.log("获取第1个元素：", arr[0]);

// 3. 末尾添加元素
arr.push(40);
console.log("末尾添加后：", arr);

// 4. 末尾删除元素
arr.pop();
console.log("末尾删除后：", arr);

// 5. 头部添加元素
arr.unshift(0);
console.log("头部添加后：", arr);

// 6. 头部删除元素
arr.shift();
console.log("头部删除后：", arr);

// 7. 遍历数组
console.log("开始遍历：");
for (let i = 0; i < arr.length; i++) {
    console.log("下标" + i + "：" + arr[i]);
}

2. 对象操作

操作类型	方法 / 属性	使用示例	作用说明
对象定义	{}	let obj = {name:“张三”,age:18}	创建对象，以键值对形式存储事物的多个属性信息。
属性访问	点语法	obj.name	快速获取对象对应属性的数值。
属性修改	点语法赋值	obj.age = 20	修改对象已有属性的数值。
新增属性	动态赋值	obj.gender = “男”	动态给对象添加新的属性和数据。
删除属性	delete	delete obj.age	删除对象指定的属性。

---

// 1. 对象定义
let user = { name: "张三", age: 18 };
// 2. 访问属性
console.log("姓名：", user.name);
// 3. 修改属性
user.age = 20;
// 4. 新增属性
user.gender = "男";
// 5. 删除属性
delete user.age;
console.log(user);

五、DOM 基础操作

DOM 文档对象模型，是 JS 操作网页的核心，通过 DOM 方法可以获取、修改、创建、删除网页元素，实现网页动态交互效果。

1. 获取元素操作

操作类型	方法 / 属性	使用示例	作用说明
按 ID 获取元素	getElementById()	document.getElementById(“box”)	根据元素 id 精准获取单个页面元素，操作最精准。
按类名获取元素	getElementsByClassName()	document.getElementsByClassName(“item”)	根据类名获取一组元素，返回类数组集合。
按标签获取元素	getElementsByTagName()	document.getElementsByTagName(“div”)	根据标签名获取页面所有同名标签元素。
选择器获取单个元素	querySelector()	document.querySelector(“#box”)	通过 CSS 选择器匹配，获取第一个符合条件的元素。
选择器获取所有元素	querySelectorAll()	document.querySelectorAll(“.list”)	通过 CSS 选择器匹配，获取所有符合条件的元素集合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">盒子</div>
<p class="item">内容1</p>
<p class="item">内容2</p>
</body>

<script>
// 1. getElementById
let box = document.getElementById("box");
// 2. getElementsByClassName
let items = document.getElementsByClassName("item");
// 3. querySelector
let qs = document.querySelector("#box");
// 4. querySelectorAll
let qsa = document.querySelectorAll(".item");
console.log(box, items, qs, qsa);
</script>
</html>

2. DOM 内容操作

操作类型	方法 / 属性	使用示例	作用说明
纯文本读写	innerText	ele.innerText = “文字内容”	读写元素纯文本内容，自动忽略 HTML 标签，只展示文字。
标准文本读写	textContent	ele.textContent = “文字”	读写纯文本，兼容性更好，可读取隐藏元素文本。
HTML 结构读写	innerHTML	ele.innerHTML = “加粗”	读写元素内部 HTML 结构，可解析标签，实现动态渲染样式内容。
表单值读写	value	input.value = “输入内容”	专门获取、修改输入框、文本域等表单元素的内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM 内容操作</title>
</head>
<body>
    <div id="txt"></div>
    <input type="text" id="username" placeholder="请输入姓名">

    <script>
        // 获取元素
        let txt = document.getElementById('txt');
        let username = document.getElementById('username');

        // 1. innerText 纯文本
        txt.innerText = '今天天气很好';

        // 2. innerHTML 插入带标签内容
        txt.innerHTML = '今天是 <span style="color:red">星期五</span>';

        // 3. value 设置输入框默认值
        username.value = '张三';
    </script>
</body>
</html>

3. DOM 样式操作

操作类型	方法 / 属性	使用示例	作用说明
单行样式修改	style. 样式名	ele.style.color = “red”	动态设置单个行内样式，样式名使用驼峰命名。
批量样式修改	style.cssText	ele.style.cssText=“color:red;font-size:16px”	一次性设置多个行内样式，高效简洁。
获取最终样式	getComputedStyle()	getComputedStyle(ele).width	获取元素最终渲染样式，包含 css 样式、继承样式，仅可读不可改。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM 样式操作</title>
</head>
<body>
    <div id="box">我是一个盒子</div>

    <script>
        let box = document.getElementById('box');

        // 1. 单个样式修改
        box.style.color = '#fff';
        box.style.background = '#409eff';
        box.style.fontSize = '18px';
        box.style.padding = '12px';
        box.style.borderRadius = '6px';

        // 2. 批量样式修改（二选一即可）
        // box.style.cssText = 'color:#fff; background:#67c23a; padding:12px; border-radius:6px;';
    </script>
</body>
</html>