JavaScript基础笔记
一、JS代码的编写位置
JS代码需写在<script>标签中，常见编写方式：
- 标签事件属性中（不推荐，结构与行为耦合）
- 例：
<button onclick="alert('你点击我干嘛');">点我一下</button>
- 例：
- 超链接
href中（不推荐）- 例：
<a href="javascript: alert('让你点你就点');">你也点我一下</a>
- 例：
<script>标签内（推荐）<scripttype="text/javascript">alert("我是script标签中的代码！");</script>- 外部JS文件（推荐，可复用）
- 引入方式：
<script type="text/javascript" src="js/script.js"></script> - 注意：引入外部文件的
<script>标签内不能再写代码，需额外加<script>标签写内部代码。
- 引入方式：
二、JS基本语法
- 注释
- 多行注释：
/* 注释内容 */ - 单行注释：
// 注释内容
- 多行注释：
- 大小写敏感：
alert()和Alert()是不同的。 - 语句结尾：每条语句以
;结尾（浏览器会自动补，但建议手动加）。 - 空格/换行：JS会忽略多个空格和换行，不影响执行。
三、字面量和变量
| 类型 | 说明 | 示例 |
|---|---|---|
| 字面量 | 不可改变的值（直接使用） | 123、"hello" |
| 变量 | 保存字面量，值可修改 | 声明：var a;；赋值：a=123;；声明+赋值：var a=123; |
四、标识符（自定义名称）
命名规则：
- 可包含：字母、数字、
_、$； - 不能以数字开头；
- 不能是JS关键字/保留字（如
var、if等）； - 推荐驼峰命名法：首字母小写，后续单词首字母大写（例：
helloWorld）。
五、JS数据类型
分为基本数据类型和引用数据类型：
- 基本类型：
String（字符串）、Number（数值）、Boolean（布尔）、Null（空值）、Undefined（未定义）； - 引用类型：
Object（对象）。
1. String（字符串）
- 需用引号包裹（单/双引号均可）；
- 引号不能嵌套（单引号内可放双引号，反之同理）；
- 转义字符：用
\表示特殊字符（例：\"表示双引号）。varstr='我说:"今天天气真不错！"';// 正确str="我说:\"今天天气真不错！\"";// 转义写法
2. Number（数值）
- 包含整数、浮点数；
- 特殊值：
Number.MAX_VALUE：JS能表示的最大数；Number.MIN_VALUE：JS能表示的最小数；Infinity：正无穷（超过最大值时出现）；-Infinity：负无穷；NaN：表示“非数字”（Not A Number）；
- 注意：浮点数运算可能不精确。
3. Boolean（布尔）
- 只有两个值：
true（真）、false（假），用于逻辑判断。
4. Null & Undefined
| 类型 | 说明 | typeof检测结果 |
|---|---|---|
Null | 表示空对象，值为null | object |
Undefined | 变量声明后未赋值，值为undefined | undefined |
六、强制类型转换（以转String为例）
将其他类型转为字符串的方法：
toString()方法- 语法：
变量.toString()； - 注意：
null、undefined无此方法。
vara=123;varb=a.toString();// b是字符串"123"- 语法：
String()函数- 语法：
String(变量)； - 可转换
null、undefined。
- 语法：
七、强制类型转换（补充）
2. 转换为Number
| 方法 | 说明 | 示例 & 规则 |
|---|---|---|
Number()函数 | 通用类型转换 | - 字符串：纯数字→数字；含非数字→NaN；空串/全空格→0- 布尔： true→1、false→0- null→0- undefined→NaN |
parseInt() | 仅转字符串为整数（非字符串先转字符串） | - 例：parseInt("123abc")→123；parseInt("abc123")→NaN- 可指定进制： parseInt("070", 8)（按8进制解析） |
parseFloat() | 仅转字符串为浮点数（逻辑同parseInt） | - 例：parseFloat("3.14abc")→3.14 |
3. 转换为Boolean
使用Boolean()函数，转换规则：
- 数字：除
0、NaN→false，其余→true； - 字符串：除空串→
false，其余→true； null、undefined→false。
八、其他进制的数字
- 16进制：以
0x开头（例：0x10→十进制16）； - 8进制：以
0开头（例：070→十进制56）； - 注意：
parseInt("070")在不同浏览器解析不同，需指定进制（如parseInt("070", 10)按十进制解析）。
九、运算符
1. 算数运算符
| 运算符 | 说明 | 特殊规则 |
|---|---|---|
+ | 加法/字符串拼接 | - 两个字符串→拼接； - 其他值+字符串→转字符串后拼接； - 其余情况→转Number后相加 |
-/*///% | 减法/乘法/除法/取余 | 非Number值先转Number，再运算；与NaN运算→NaN |
2. 一元运算符
+（正号）：非Number值转Number（例：+true→1）；-（负号）：转Number后取反；- 自增
++/自减--：- 后增
a++：先返回原变量值，再自增； - 前增
++a：先自增，再返回新值； - 自减同理（
a--/--a）。
- 后增
3. 逻辑运算符
| 运算符 | 说明 | 规则（短路运算） |
|---|---|---|
! | 非运算（取反） | 非布尔值先转布尔，再取反（例：!0→true） |
&& | 与运算 | 第一个值为false→返回第一个值；否则返回第二个值（例：5 && 6→6；0 && 6→0） |
| ` | ` |
4. 赋值运算符
- 基础：
=（赋值）； - 复合：
+=、-=、*=、/=、%=（例：a += 5等价于a = a + 5）。
5. 关系运算符
- 比较大小：
>、<、>=、<=，返回布尔值； - 特殊规则：
- 非数值→转Number后比较；
- 两个字符串→比较字符的Unicode编码（逐位比较）。
6. 相等运算符
| 运算符 | 说明 | 规则 |
|---|---|---|
== | 相等（自动类型转换） | 类型不同先转换；undefined和null相等；NaN与任何值不相等 |
!= | 不相等（自动类型转换） | 与==逻辑相反 |
=== | 全等（不类型转换） | 类型不同直接返回false；类型相同再比较值 |
!== | 不全等（不类型转换） | 与===逻辑相反 |
- 判定
NaN：用isNaN()函数（例：isNaN(NaN)→true）。
7. 条件运算符（三元运算符）
- 语法：
条件表达式 ? 语句1 : 语句2； - 执行：条件为
true→执行语句1；否则执行语句2； - 例：
var max = a > b ? a : b（取a、b最大值）。
十、代码块与流程控制语句
1. 代码块
用{}包裹的一组语句，仅起“分组作用”，内部变量外部可见（无作用域隔离）。
2. 流程控制语句
（1）条件判断语句（if语句）
- 语法1：
if(条件表达式){语句;// 条件为true时执行} - 语法2（if-else）：
if(条件表达式){语句1;// true执行}else{语句2;// false执行} - 语法3（多分支）：
if(条件1){语句1;}elseif(条件2){语句2;}else{语句3;}
1. 条件判断语句（if语句）
- if语句的控制范围：默认仅控制紧随其后的一条语句；若需控制多条语句，需用
{}包裹成代码块。vara=10;if(a>10){// 代码块包裹，控制多条语句alert("a比10大~~~");alert("谁也管不了我~~~");} - 多分支if-else if-else：从上到下依次判断条件，满足则执行对应代码块，执行后结束语句；所有条件不满足则执行
else。
2. 条件分支语句（switch语句）
- 语法：
switch(条件表达式){case表达式1:语句1;break;// 跳出switchcase表达式2:语句2;break;default:语句n;// 所有case不匹配时执行break;} - 执行规则：
- 条件表达式与
case后的表达式做全等比较（===）； - 匹配成功则从当前
case开始执行，直到遇到break； - 无匹配则执行
default。
- 条件表达式与
十一、循环语句
| 循环类型 | 语法 | 执行逻辑 | 特点 |
|---|---|---|---|
| while循环 | while(条件表达式) { 循环体 } | 先判断条件，满足则执行循环体 | 可能一次都不执行 |
| do-while循环 | do { 循环体 } while(条件表达式) | 先执行循环体，再判断条件 | 至少执行一次 |
| for循环 | for(初始化表达式; 条件表达式; 更新表达式) { 循环体 } | 1. 初始化（仅1次） 2. 判断条件 3. 执行循环体 4. 更新表达式 5. 重复2-4 | 结构更紧凑，适合已知循环次数 |
十二、break与continue
| 关键字 | 作用 |
|---|---|
| break | 跳出当前switch语句/循环语句（终止执行） |
| continue | 跳过当前轮循环的剩余代码，直接进入下一轮循环（仅对最近的循环生效） |
