JavaScript 零基础入门核心知识点 | 极客日志

JavaScript大前端

JavaScript 零基础入门核心知识点

档涵盖 JavaScript 零基础入门核心知识点，包括 Web 前端原理、JS 引入方式、注释、变量与字面量、数据类型及转换、运算符、流程控制（分支与循环）、数组等基础语法。内容循序渐进，适合初学者系统学习 JS 编程规范与逻辑实现。

协议工匠发布于 2026/3/29更新于 2026/6/332 浏览

一、Web 前端三大组成 & 浏览器工作原理

Web 前端三剑客（缺一不可）

HTML：网页的结构层，决定页面有什么内容（骨架）
CSS：网页的样式层，决定页面长什么样子（美化）
JavaScript(JS)：网页的行为层，决定页面的交互效果、动态逻辑（灵魂）

浏览器的两大核心引擎

浏览器是解析运行前端代码的工具，核心分为 2 部分，各司其职：

渲染引擎（浏览器内核）：专门解析 HTML + CSS，负责页面的渲染和布局
JS 引擎：专门解析和执行 JavaScript 代码（例如 Chrome 的 V8 引擎）

二、JavaScript 的引入方式（重点）

JS 是脚本语言，必须写在 HTML 页面中才能运行，共有 3 种引入方式，优先级：外链式 > 内嵌式 > 行内式

1. 行内式（不推荐，了解即可）

直接把 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>

2. 内嵌式（推荐练习使用）

在 HTML 页面中，通过 <script> 标签包裹 JS 代码，可写在 <head> 或 <body> 中。
特点：JS 和 HTML 部分分离，适合写少量测试代码/页面专属的简单逻辑。

<script>
// 这里写 JS 代码
alert('我是内嵌式的 JS 代码');
console.log('控制台打印内容');
</script>

3. 外链式（开发推荐，必用）

创建独立的 .js 后缀的 JS 文件，通过 <script> 标签的 src 属性引入，这是开发标准写法。

核心特点：

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

<!-- HTML 页面中引入 -->
<script src="./index.js"></script>

// 这是单行注释，注释一行内容
// 快捷键：Ctrl + / (一键注释/取消注释)
var num = 10;
// 注释：声明一个变量 num，值为 10

/* 这是多行注释，可以注释多行内容 */
var name = "张三";
var age = 18;

// 语法：var 变量名;
var age;
// 声明一个变量，变量名是 age
var name, sex, score;
// 同时声明多个变量，用逗号分隔

// 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'，不是变量的值

// 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);

var a = 10; // a 是数字类型
a = "张三"; // a 变成字符串类型

// ① 十进制数字（最常用）
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('输出斜杠：\\ 我是斜杠'); // \\ 输出一个 \

console.log(true + 1); // 2
console.log(false - 1); // -1
console.log(true == 1); // true
console.log(false == 0); // true

var a;
console.log(a); // undefined
// 参与运算：和任何值运算，结果都是 NaN
console.log(undefined + 1); // NaN
console.log(undefined + true); // NaN

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'

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 空值'

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('')

// 基础转换
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

console.log(parseFloat('88.99abc')); // 88.99
console.log(parseFloat('88.99.123')); // 88.99
console.log(parseFloat('a88.99')); // NaN

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 → 一元 - 号，强制转数值

+ 加 - 减 * 乘 / 除 % 取余（求余数）
++ 自增（变量 +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

> 大于 < 小于 >= 大于等于 <= 小于等于
== 等于（只比数值，自动类型转换） != 不等于
=== 全等（数值 + 类型都要相等，无转换） !== 不全等

// == 等于：只比数值，类型不同会自动转换
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

&& 逻辑与（且）：两边都为真，结果才为真；有一个假，结果就为假
|| 逻辑或（或）：有一个为真，结果就为真；两边都假，结果才为假
! 逻辑非（取反）：把布尔值取反，!true → false，!false → true

= 基础赋值 += 加后赋值 -= 减后赋值 *= 乘后赋值 /= 除后赋值 %= 取余后赋值

var a = 10;
a += 5; // 等价于 a = a + 5 → a=15
a *= 2; // 等价于 a = a*2 → a=30

// 判断年龄是否成年
var age = 18;
var res = age >= 18 ? '成年' : '未成年';
console.log(res); // 成年

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('不及格');
}

switch (匹配值) {
    case 值 1:
        执行代码 1;
        break; // 跳出 switch，防止穿透
    case 值 2:
        执行代码 2;
        break;
    default:
        所有 case 都不匹配时执行;
}

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 (条件表达式);

// 案例：求 1~100 的和，和 while 等价，但代码更简洁
var sum = 0;
for (var i = 1; i <= 100; i++) {
    sum += i;
}
console.log(sum); // 5050

// 案例：打印 5 行 5 列的正方形
for (var i = 1; i <= 5; i++) {
    var str = '';
    for (var j = 1; j <= 5; j++) {
        str += '* ';
    }
    console.log(str);
}

// 方式 1：字面量创建 → 推荐，简洁高效
var arr = [1, 2, '张三', true, null]; // 数组中的每一项叫「数组元素」

// 方式 2：构造函数创建 → 了解即可
var arr2 = new Array(1, 2, 3); // [1,2,3]

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]);
}

JavaScript 零基础入门核心知识点

一、Web 前端三大组成 & 浏览器工作原理

Web 前端三剑客（缺一不可）

浏览器的两大核心引擎

二、JavaScript 的引入方式（重点）

1. 行内式（不推荐，了解即可）

2. 内嵌式（推荐练习使用）

3. 外链式（开发推荐，必用）

核心特点：

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

语法规范：

4. script 标签的最佳放置位置

三、JS 的注释（必备语法，一定要写）

单行注释

多行注释

四、字面量 & 变量（JS 的核心基础，重中之重）

1. 字面量

2. 变量

✔️ 核心概念

✔️ 变量的声明（创建盒子）

✔️ 变量的命名规则 & 规范（必须遵守 + 建议遵守）

✅ 【命名规则】- 硬性要求，不遵守必报错

✅ 【命名规范】- 软性要求，不遵守不报错，但必须养成习惯

✔️ 变量的赋值 & 初始化

✔️ 变量的使用规则（4 种常见情况，必记）

✔️ 变量的更新

五、JS 的输入 & 输出语句（调试必备）

输出语句（常用，必记 3 个）

输入语句（常用 2 个）

六、JS 的数据类型（核心重点，重中之重）

核心说明

✔️ 1. 数字型 (Number) - 表示所有数字

✅ 包含的内容

✅ 数字的取值范围

✔️ 2. 字符串型 (String) - 表示所有文本内容

✅ 核心规则

✅ 常用语法

✔️ 3. 布尔型 (Boolean) - 只有两个值，做判断专用

✔️ 4. 未定义型 (undefined) - 变量的默认值

✔️ 5. 空值型 (null) - 表示一个「空盒子」

✅ 检测数据类型 - typeof 运算符（必用）

✔️ 作用

✔️ 两种语法格式

✔️ 必记特殊点

七、数据类型转换（核心重点，面试必考）

核心说明

✔️ 一、转字符串（2 种强制转换 + 1 种自动转换）

✅ 强制转换（主动转换，推荐）

✅ 自动转换（隐式转换，常用）

✔️ 二、转布尔值（1 种强制转换 + 1 种自动转换，必记规则）

✅ 强制转换：Boolean(数据) → 万能，转换任意类型

✅ 【黄金规则，背会】

✅ 自动转换：! 取反运算符

✔️ 三、转数值（重中之重，开发/面试必考，3 种强制转换 + 1 种自动转换）

✅ 强制转换（3 种，各有规则，全部必记）

1. Number(数据) → 整体转换，把数据当做一个整体

2. parseInt(数据) → 解析整数，从左到右逐个解析，只认整数

3. parseFloat(数据) → 解析浮点数，从左到右逐个解析，认识一个小数点

✅ 自动转换（隐式转换，开发常用）

八、运算符（JS 的运算规则，必学）

✅ 1. 算术运算符（数学运算）

✔️ 重点：自增/自减 前置和后置的区别（必考）

✅ 2. 比较运算符（判断大小/相等，返回布尔值）

✔️ 黄金规则（必背）

✅ 3. 逻辑运算符（逻辑判断，必记 3 个）

✔️ 短路运算规则（开发常用）

✅ 4. 赋值运算符（给变量赋值）

✅ 5. 三元运算符（简化的 if 判断，常用）

九、流程控制（核心逻辑，JS 的灵魂）

核心概念

✔️ 一、分支结构（if 语句 + switch 语句）

✅ 1. if 分支语句（万能，开发首选，能判断所有条件）

① 单分支：满足条件才执行，不满足不执行

② 双分支：二选一，满足执行 if，不满足执行 else（最常用）

③ 多分支：多选一，满足哪个条件就执行哪个，else 可选

✅ 2. switch 分支语句（适合「定值匹配」，效率高）

✔️ 二、循环结构（重复执行代码，必学 3 种）

✅ 循环的 4 个必备条件（缺一不可，否则死循环）

✔️ 重点：自增/自减前置和后置的区别（必考）