JavaScript大前端
JavaScript 零基础入门核心知识点
本文档涵盖 JavaScript 零基础入门核心知识点，包括 Web 前端原理、JS 引入方式、注释、变量与字面量、数据类型及转换、运算符、流程控制（分支与循环）、数组等基础语法。内容循序渐进，适合初学者系统学习 JS 编程规范与逻辑实现。
本文档涵盖 JavaScript 零基础入门核心知识点，包括 Web 前端原理、JS 引入方式、注释、变量与字面量、数据类型及转换、运算符、流程控制（分支与循环）、数组等基础语法。内容循序渐进，适合初学者系统学习 JS 编程规范与逻辑实现。
浏览器是解析运行前端代码的工具，核心分为 2 部分，各司其职：
JS 是脚本语言，必须写在 HTML 页面中才能运行，共有 3 种引入方式，优先级：外链式 > 内嵌式 > 行内式
直接把 JS 代码写在 HTML 标签的事件属性（on 开头） 或 a 标签的 href 中，特点：JS 和 HTML 强耦合，代码杂乱，维护困难。
<!-- 非 a 标签：事件属性 onclick 点击触发 -->
<div onclick="alert('点击触发行内 JS')">点击我</div>
<!-- a 标签：href 中写 javascript: 开头的 JS 代码 -->
<a href="javascript:console.log('a 标签触发 JS')">点我打印内容</a>
在 HTML 页面中，通过 <script> 标签包裹 JS 代码，可写在 <head> 或 <body> 中。
特点：JS 和 HTML 部分分离，适合写少量测试代码/页面专属的简单逻辑。
<script>
// 这里写 JS 代码
alert('我是内嵌式的 JS 代码');
console.log('控制台打印内容');
</script>
创建独立的 .js 后缀的 JS 文件，通过 <script> 标签的 src 属性引入，这是开发标准写法。
<!-- HTML 页面中引入 -->
<script src="./index.js"></script>
⚠️ 重要注意点：带
src属性的 script 标签，标签内部不能再写 JS 代码，写了也会被浏览器忽略；如需补充代码，新增一个空的 script 标签即可。
JS 的执行特点：加载后立即执行，执行顺序从上到下，推荐放置在 <body> 闭合标签 </body> 的前面，原因：
注释：对代码的解释说明，浏览器会忽略所有注释内容，不执行、不渲染。
作用：方便自己理解、方便团队协作，写注释是程序员的基本素养！
// 这是单行注释，注释一行内容
// 快捷键：Ctrl + / (一键注释/取消注释)
var num = 10;
// 注释：声明一个变量 num，值为 10
/* 这是多行注释，可以注释多行内容 */
var name = "张三";
var age = 18;
概念：字面量是「固定不变的值」，是 JS 中最基础的数据形式，所见即所得，看到它就知道值和类型。
作用：字面量是用来给变量赋值的「原材料」，可以直接使用，但一般不会单独使用。
常见类型：
JS 基础（引号包裹的内容，单/双/反引号都可以）变量 = 内存中开辟的一块「存储空间」，可以理解为一个装数据的盒子。
作用：存储字面量、存储运算结果、存储程序运行的中间值，变量的值可以随时修改。
使用 关键字 var 声明变量，关键字是 JS 内置的有特殊含义的单词，不能自定义。
// 语法：var 变量名;
var age;
// 声明一个变量，变量名是 age
var name, sex, score;
// 同时声明多个变量，用逗号分隔
age 和 Age 是两个完全不同的变量age，存姓名用 userNameuserName、userAge、studentScorename 作为变量名（系统有特殊用途）= （JS 中，等号的作用是「赋值」，不是「等于」）= 右侧的值，存入左侧的变量中// 1. 先声明，后赋值
var age;
age = 18;
// 把数字 18 存入变量 age 中
// 2. 声明 + 赋值 同时进行 = 变量初始化（推荐写法）
var userName = "张三";
var userScore = 99;
// 情况 1：只声明，不赋值 → 使用时返回 undefined（未定义）
var a;
console.log(a); // undefined
// 情况 2：声明 + 赋值 → 使用时返回赋值的值
var b = 100;
console.log(b); // 100
// 情况 3：不声明，直接赋值 → 可以用，但【强烈不推荐】，全局污染，易报错
c = 200;
console.log(c); // 200
// 情况 4：不声明，不赋值，直接使用 → 直接报错（最常见错误）
console.log(d); // Uncaught ReferenceError: d is not defined
变量的值可以随时重新赋值，新值会覆盖旧值，旧值无法找回。
⚠️ 注意：使用变量时不要加引号，加了引号就是「字符串」，不再是变量！
var num = 10;
num = 20; // 更新变量值为 20
console.log(num); // 20
console.log('num'); // 输出字符串 'num'，不是变量的值
作用：把数据展示出来，用于调试代码、查看运行结果，是学习 JS 最常用的语法。
// 1. console.log(内容) → 控制台打印（开发最常用，重点）
// 浏览器按 F12 → Console 面板查看，不会影响页面，支持打印任意数据
console.log(123);
console.log("张三");
console.log(true);
// 2. alert(提示信息) → 浏览器弹出提示框，有确定按钮，会阻塞代码执行
alert('这是一个提示框');
// 3. document.write(内容) → 直接在网页的 body 中写入内容，支持解析 HTML 标签
document.write('我是写入页面的内容');
document.write('<h1>这是一个一级标题</h1>');
作用：获取用户输入的内容，实现「人机交互」，返回值有固定规则，必记！
// 1. prompt(提示文本) → 弹出带输入框的弹窗，有「确定」和「取消」按钮
// ✔ 点击确定：返回用户输入的内容（字符串类型），无输入则返回空字符串 ''
// ✔ 点击取消：返回 null
var userInput = prompt('请输入你的姓名');
console.log(userInput);
// 2. confirm(提示文本) → 弹出确认弹窗，有「确定」和「取消」按钮
// ✔ 点击确定：返回布尔值 true
// ✔ 点击取消：返回布尔值 false
var isAgree = confirm('是否同意协议？');
console.log(isAgree);
JS 是弱类型语言：变量没有固定的类型，声明变量时不需要指定类型，赋值什么类型，变量就是什么类型。
var a = 10; // a 是数字类型
a = "张三"; // a 变成字符串类型
包含：整数、小数、正负数字、特殊数字，是 JS 中最常用的类型之一。
// ① 十进制数字（最常用）
100、-5、3.14
// ② 其他进制（了解）
0b1010; // 二进制，前缀 0b，对应十进制 10
012; // 八进制，前缀 0，对应十进制 10
0x1a; // 十六进制，前缀 0x，对应十进制 26
// ③ 科学计数法
2e5; // 表示 2 * 10^5 = 200000
// ④ 特殊数字（必记）
NaN; // 非数字，属于 Number 类型，特点：和任何值都不相等，包括自己
Infinity; // 正无穷大
-Infinity;// 负无穷小
console.log(Number.MAX_VALUE); // JS 中最大的数字
console.log(Number.MIN_VALUE); // JS 中最小的正数
// ① 字符串声明
var str1 = '我是单引号字符串';
var str2 = "我是双引号字符串";
var str3 = `我是反引号字符串`;
var str4 = '他说："你好呀"'; // 外单内双，正确
// ② 获取字符串长度：字符串.length → 返回字符个数，空格也算一个字符
console.log('hello'.length); // 5
console.log('你好 JS'.length); // 5（你、好、空格、J、S）
// ③ 转义字符（必记 2 个）：以 \ 开头，解决特殊字符无法直接书写的问题
console.log('换行符：\n 我换行了'); // \n 换行
console.log('缩进符：\t 我缩进了'); // \t 缩进（tab 键效果）
console.log('输出引号：我是\"双引号\"'); // \" 输出双引号
console.log('输出斜杠：\\ 我是斜杠'); // \\ 输出一个 \
布尔值是「逻辑判断」的核心，只有两个固定值，没有其他可能：
true → 表示「真」「成立」「是」，参与数学运算时等价于 1false → 表示「假」「不成立」「否」，参与数学运算时等价于 0console.log(true + 1); // 2
console.log(false - 1); // -1
console.log(true == 1); // true
console.log(false == 0); // true
唯一值：undefined
触发场景：变量只声明，不赋值时，变量的默认值就是 undefined。
var a;
console.log(a); // undefined
// 参与运算：和任何值运算，结果都是 NaN
console.log(undefined + 1); // NaN
console.log(undefined + true); // NaN
唯一值：null
含义：表示「空」，主动声明变量为空值，和 undefined 的区别是：
var a = null;
console.log(a); // null
// 参与运算：等价于 0
console.log(null + 1); // 1
console.log(null - true); // -1
判断任意数据/变量的「数据类型」，返回值是一个字符串，告知我们检测结果。
// 格式 1：typeof 要检测的数据 → 推荐，简洁
console.log(typeof 123); // 'number'
console.log(typeof 'abc'); // 'string'
console.log(typeof true); // 'boolean'
console.log(typeof undefined); // 'undefined'
// 格式 2：typeof (要检测的数据) → 优先运算括号内的内容，再检测类型
console.log(typeof (10 + 20)); // 'number'
typeof null 的返回值是 'object' → 这是 JS 的历史 bug，记住即可！
console.log(typeof null); // 'object'
// 方式 1：数据.toString() → 通用，null/undefined 不能用，会报错
var num = 123;
console.log(num.toString()); // '123'
console.log(true.toString()); // 'true'
// 方式 2：String(数据) → 万能，能转换任意类型的数据，无报错
console.log(String(123)); // '123'
console.log(String(null)); // 'null'
console.log(String(undefined)); // 'undefined'
通过 + 加号 实现，当加号一侧是字符串时，加号会变成「字符串拼接符」，自动把另一侧转为字符串后拼接。
console.log('123' + 456); // '123456' → 字符串拼接
console.log(true + 'hello'); // 'truehello'
console.log(null + '空值'); // 'null 空值'
在 JS 中，只有 6 个值 转为布尔值是 false，其余所有值转布尔值都是 true！
❌ 转 false 的 6 个值：
0、NaN、''(空字符串)、false、null、undefined
console.log(Boolean(0)); // false
console.log(Boolean('')); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(false)); // false
// 其余全为 true
console.log(Boolean(1)); // true
console.log(Boolean(' ')); // true（空格字符串）
console.log(Boolean('0')); // true（非空字符串）
!：先把数据转为布尔值，再取反!!：先转布尔值→取反→再取反，等价于直接获取数据的布尔值，开发常用！console.log(!123); // false
console.log(!0); // true
console.log(!!123); // true → 等价于 Boolean(123)
console.log(!!''); // false → 等价于 Boolean('')
所有运算中，「转数值」是最常用的，也是规则最多的，必须全部记牢！
✅ 转换规则：能整体转为数字则转，整体不行则返回 NaN
// 基础转换
console.log(Number('123')); // 123
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
// 重点：包含非数字的字符串，直接返回 NaN
console.log(Number('123abc')); // NaN
console.log(Number('')); // 0（空字符串转数字是 0）
✅ 转换规则：
console.log(parseInt('123abc')); // 123
console.log(parseInt('88.99')); // 88
console.log(parseInt('a123')); // NaN
console.log(parseInt(' 99 100 ')); // 99
✅ 转换规则：和 parseInt 一致，唯一区别是「能识别一个小数点」
console.log(parseFloat('88.99abc')); // 88.99
console.log(parseFloat('88.99.123')); // 88.99
console.log(parseFloat('a88.99')); // NaN
除了「+ 加号」可能是字符串拼接，其余所有运算符（- * / % ++ --）都会自动把数据转为数值，规则和 Number() 一致。
console.log('5' - '2'); // 3 → 转数字后相减
console.log('10' * 2); // 20 → 转数字后相乘
console.log('88.99' / 10); // 8.899
console.log('abc' - 1); // NaN → 转数字失败
console.log(+true); // 1 → 一元 + 号，强制转数值
console.log(-null); // 0 → 一元 - 号，强制转数值
运算符：用于对数据进行「运算/判断/逻辑处理」的符号，JS 的运算符分为以下大类，全部是基础，必记。
优先级：算术运算符 > 比较运算符 > 逻辑运算符 > 赋值运算符
+ 加 - 减 * 乘 / 除 % 取余（求余数）
++ 自增（变量 +1）-- 自减（变量 -1）
++ 变量 / -- 变量 → 先自增/自减，再参与运算（先己后人）变量++ / 变量-- → 先参与运算，再自增/自减（先人后己）var a = 1;
console.log(++a + 1); // 3 → a 先变成 2，再加 1
console.log(a++ + 1); // 3 → 先算 1+1，a 再变成 2
console.log(a); // 2
所有比较运算符的返回值都是 布尔值（true/false），用于条件判断，必记 2 个核心：== 等于 和 === 全等
> 大于 < 小于 >= 大于等于 <= 小于等于
== 等于（只比数值，自动类型转换） != 不等于
=== 全等（数值 + 类型都要相等，无转换） !== 不全等
// == 等于：只比数值，类型不同会自动转换
console.log('10' == 10); // true
console.log(true == 1); // true
console.log('' == 0); // true
console.log(null == undefined); // true
console.log(NaN == NaN); // false → NaN 和任何值都不等，包括自己
// === 全等：数值 + 类型都要一致，推荐使用，避免类型转换的坑
console.log('10' === 10); // false
console.log(true === 1); // false
console.log(null === undefined); // false
用于多条件组合判断，返回值是「布尔值/原值」，开发中if/循环的条件判断全靠它，核心：短路运算
&& 逻辑与（且）：两边都为真，结果才为真；有一个假，结果就为假
|| 逻辑或（或）：有一个为真，结果就为真；两边都假，结果才为假
! 逻辑非（取反）：把布尔值取反，!true → false，!false → true
表达式 1 && 表达式 2：如果表达式 1 为真，返回表达式 2；如果表达式 1 为假，返回表达式 1（右侧不执行）表达式 1 || 表达式 2：如果表达式 1 为真，返回表达式 1（右侧不执行）；如果表达式 1 为假，返回表达式 2= 基础赋值 += 加后赋值 -= 减后赋值 *= 乘后赋值 /= 除后赋值 %= 取余后赋值
var a = 10;
a += 5; // 等价于 a = a + 5 → a=15
a *= 2; // 等价于 a = a*2 → a=30
语法：条件表达式 ? 表达式 1 : 表达式 2
规则：条件为 true，执行表达式 1；条件为 false，执行表达式 2
// 判断年龄是否成年
var age = 18;
var res = age >= 18 ? '成年' : '未成年';
console.log(res); // 成年
流程控制：控制代码的「执行顺序」，决定代码按照什么逻辑运行，分为 3 种结构，所有 JS 逻辑都是这 3 种结构的组合：
if (条件表达式) {
// 条件为 true 时，执行的代码
}
if (条件表达式) {
// 条件为 true 时执行
} else {
// 条件为 false 时执行
}
// 案例：判断奇偶
var num = 10;
if (num % 2 === 0) {
console.log('偶数');
} else {
console.log('奇数');
}
if (条件 1) {
// 条件 1 成立执行
} else if (条件 2) {
// 条件 2 成立执行
} else if (条件 3) {
// 条件 3 成立执行
} else {
// 所有条件都不成立执行
}
// 案例：成绩评级
var score = 85;
if (score >= 90) {
console.log('优秀');
} else if (score >= 80) {
console.log('良好');
} else if (score >= 60) {
console.log('及格');
} else {
console.log('不及格');
}
语法：根据一个「固定值」匹配不同的 case，执行对应代码，核心是全等匹配（===）
switch (匹配值) {
case 值 1:
执行代码 1;
break; // 跳出 switch，防止穿透
case 值 2:
执行代码 2;
break;
default:
所有 case 都不匹配时执行;
}
✅ 特点：case 只能写「定值」，不能写范围；break 必须加，否则会出现「case 穿透」；效率比 if 高，适合定值判断（如：月份、星期、成绩等级）。
语法：
var 初始值 = 0;
while (条件表达式) {
循环体;
更新变量;
}
// 案例：求 1~100 的和
var sum = 0;
var i = 1;
while (i <= 100) {
sum += i;
i++;
}
console.log(sum); // 5050
语法：
var 初始值 = 0;
do {
循环体;
更新变量;
} while (条件表达式);
区别：while 是「先判断再执行」，do-while 是「先执行再判断」，适合「必须执行一次」的场景（如：用户输入验证）。
语法：for(初始值; 条件表达式; 更新变量) { 循环体 }
// 案例：求 1~100 的和，和 while 等价，但代码更简洁
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum); // 5050
用于控制循环的执行流程，解决「提前结束循环」的需求：
语法：循环中嵌套另一个循环，外层循环执行 1 次，内层循环执行全部次数
作用：处理二维数据（如：数组的数组）、打印图形（正方形、三角形、九九乘法表）
// 案例：打印 5 行 5 列的正方形
for (var i = 1; i <= 5; i++) {
var str = '';
for (var j = 1; j <= 5; j++) {
str += '* ';
}
console.log(str);
}
数组：是 JS 中一种「存储多个数据的容器」，可以理解为一个「大盒子」，里面能装任意类型的数据（数字、字符串、布尔值、甚至数组）。
特点：数据按「顺序存储」，通过「索引（下标）」访问，索引从 0 开始。
// 方式 1：字面量创建 → 推荐，简洁高效
var arr = [1, 2, '张三', true, null]; // 数组中的每一项叫「数组元素」
// 方式 2：构造函数创建 → 了解即可
var arr2 = new Array(1, 2, 3); // [1,2,3]
数组名 [索引] → 索引从 0 开始数组名.length → 返回数组元素的个数arr[i] 访问每一项var arr = [10, 20, 30, 40];
console.log(arr[0]); // 10（第一个元素）
console.log(arr[arr.length - 1]); // 40（最后一个元素）
// 遍历数组：打印所有元素
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online