JavaScript基础笔记
2026/5/9 8:36:00 网站建设 项目流程

JavaScript基础笔记

一、JS代码的编写位置

JS代码需写在<script>标签中,常见编写方式:

  1. 标签事件属性中(不推荐,结构与行为耦合)
    • 例:<button onclick="alert('你点击我干嘛');">点我一下</button>
  2. 超链接href(不推荐)
    • 例:<a href="javascript: alert('让你点你就点');">你也点我一下</a>
  3. <script>标签内(推荐)
    <scripttype="text/javascript">alert("我是script标签中的代码!");</script>
  4. 外部JS文件(推荐,可复用)
    • 引入方式:<script type="text/javascript" src="js/script.js"></script>
    • 注意:引入外部文件的<script>标签内不能再写代码,需额外加<script>标签写内部代码。
二、JS基本语法
  1. 注释
    • 多行注释:/* 注释内容 */
    • 单行注释:// 注释内容
  2. 大小写敏感alert()Alert()是不同的。
  3. 语句结尾:每条语句以;结尾(浏览器会自动补,但建议手动加)。
  4. 空格/换行:JS会忽略多个空格和换行,不影响执行。
三、字面量和变量
类型说明示例
字面量不可改变的值(直接使用)123"hello"
变量保存字面量,值可修改声明:var a;;赋值:a=123;;声明+赋值:var a=123;
四、标识符(自定义名称)

命名规则

  1. 可包含:字母、数字、_$
  2. 不能以数字开头;
  3. 不能是JS关键字/保留字(如varif等);
  4. 推荐驼峰命名法:首字母小写,后续单词首字母大写(例: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表示空对象,值为nullobject
Undefined变量声明后未赋值,值为undefinedundefined
六、强制类型转换(以转String为例)

将其他类型转为字符串的方法:

  1. toString()方法
    • 语法:变量.toString()
    • 注意:nullundefined无此方法。
    vara=123;varb=a.toString();// b是字符串"123"
  2. String()函数
    • 语法:String(变量)
    • 可转换nullundefined
七、强制类型转换(补充)
2. 转换为Number
方法说明示例 & 规则
Number()函数通用类型转换- 字符串:纯数字→数字;含非数字→NaN;空串/全空格→0
- 布尔:true→1、false→0
-null→0
-undefinedNaN
parseInt()仅转字符串为整数(非字符串先转字符串)- 例:parseInt("123abc")→123;parseInt("abc123")NaN
- 可指定进制:parseInt("070", 8)(按8进制解析)
parseFloat()仅转字符串为浮点数(逻辑同parseInt- 例:parseFloat("3.14abc")→3.14
3. 转换为Boolean

使用Boolean()函数,转换规则:

  • 数字:除0NaNfalse,其余→true
  • 字符串:除空串→false,其余→true
  • nullundefinedfalse
八、其他进制的数字
  • 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. 逻辑运算符
运算符说明规则(短路运算)
!非运算(取反)非布尔值先转布尔,再取反(例:!0true
&&与运算第一个值为false→返回第一个值;否则返回第二个值(例:5 && 6→6;0 && 6→0)
``
4. 赋值运算符
  • 基础:=(赋值);
  • 复合:+=-=*=/=%=(例:a += 5等价于a = a + 5)。
5. 关系运算符
  • 比较大小:><>=<=,返回布尔值;
  • 特殊规则:
    • 非数值→转Number后比较;
    • 两个字符串→比较字符的Unicode编码(逐位比较)。
6. 相等运算符
运算符说明规则
==相等(自动类型转换)类型不同先转换;undefinednull相等;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;}
  • 执行规则
    1. 条件表达式与case后的表达式做全等比较(===)
    2. 匹配成功则从当前case开始执行,直到遇到break
    3. 无匹配则执行default
十一、循环语句
循环类型语法执行逻辑特点
while循环while(条件表达式) { 循环体 }先判断条件,满足则执行循环体可能一次都不执行
do-while循环do { 循环体 } while(条件表达式)先执行循环体,再判断条件至少执行一次
for循环for(初始化表达式; 条件表达式; 更新表达式) { 循环体 }1. 初始化(仅1次)
2. 判断条件
3. 执行循环体
4. 更新表达式
5. 重复2-4
结构更紧凑,适合已知循环次数
十二、break与continue
关键字作用
break跳出当前switch语句/循环语句(终止执行)
continue跳过当前轮循环的剩余代码,直接进入下一轮循环(仅对最近的循环生效)

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询