JavaScript 零基础入门核心文档（2025 最新整理，新手友好版）前言本文档是结合前端最新技术规范+JavaS

前言

本文档是结合前端最新技术规范+JavaScript基础核心知识点整理，内容循序渐进、重点突出、案例清晰，完全适配零基础初学者，所有知识点无冗余，都是前端开发必备的JS核心基础。

学习提示：JS是弱类型脚本语言，核心是「理解语法规则 + 多敲代码练习」，本文所有案例均可直接复制运行。

一、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 属性引入，这是开发标准写法。

核心特点：

JS、HTML、CSS 完全分离，代码结构清晰，可复用性极高
一个JS文件可以被多个HTML页面引入，便于项目维护

语法规范：

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

⚠️ 重要注意点：带 src 属性的script标签，标签内部不能再写JS代码，写了也会被浏览器忽略；如需补充代码，新增一个空的script标签即可。

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

JS的执行特点：加载后立即执行，执行顺序从上到下，推荐放置在 <body> 闭合标签 </body> 的前面，原因：

避免JS代码执行时，HTML标签还未渲染，导致获取标签失败报错
先渲染页面内容，再执行JS，提升用户体验（不会白屏等待）
标准写法，行业通用

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

注释：对代码的解释说明，浏览器会忽略所有注释内容，不执行、不渲染。作用：方便自己理解、方便团队协作，写注释是程序员的基本素养！

✅ 单行注释

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

✅ 多行注释

/*
  这是多行注释，
  可以注释多行内容
  快捷键：Shift + Alt + A
*/
var name = "张三";
var age = 18;

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

✅ 1. 字面量

概念：字面量是「固定不变的值」，是JS中最基础的数据形式，所见即所得，看到它就知道值和类型。作用：字面量是用来给变量赋值的「原材料」，可以直接使用，但一般不会单独使用。

常见类型：

数字字面量：1、2、3、100、3.14、-5（所有数字）
字符串字面量：'张三'、"hello"、`JS基础`（引号包裹的内容，单/双/反引号都可以）
布尔字面量：true（真）、false（假）（只有这两个值）
特殊字面量：undefined（未定义）、null（空值）

✅ 2. 变量

✔️ 核心概念

变量 = 内存中开辟的一块「存储空间」，可以理解为一个装数据的盒子。作用：存储字面量、存储运算结果、存储程序运行的中间值，变量的值可以随时修改。

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

使用 关键字 var 声明变量，关键字是JS内置的有特殊含义的单词，不能自定义。

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

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

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

变量名不能使用 关键字/保留字（如var、if、for、name等）
变量名只能由：字母(a-zA-Z)、数字(0-9)、下划线(_)、美元符号($) 组成
变量名不能以数字开头
JS是严格区分大小写的：age 和 Age 是两个完全不同的变量

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

见名知意：看到变量名就知道存的是什么，例如：存年龄用age，存姓名用userName
驼峰命名法：多个单词组成时，第一个单词小写，后面每个单词首字母大写，例如：userName、userAge、studentScore
不要用中文、拼音作为变量名
尽量不要用name作为变量名（系统有特殊用途）

✔️ 变量的赋值 & 初始化

赋值符号：= （JS中，等号的作用是「赋值」，不是「等于」）
赋值逻辑：把 = 右侧的值，存入左侧的变量中

// 1. 先声明，后赋值
var age;
age = 18; // 把数字18存入变量age中

// 2. 声明 + 赋值 同时进行 = 变量初始化（推荐写法）
var userName = "张三";
var userScore = 99;

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

// 情况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的输入 & 输出语句（调试必备）

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

作用：把数据展示出来，用于调试代码、查看运行结果，是学习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>');

✅ 输入语句（常用2个）

作用：获取用户输入的内容，实现「人机交互」，返回值有固定规则，必记！

// 1. prompt(提示文本) → 弹出带输入框的弹窗，有「确定」和「取消」按钮
// ✔ 点击确定：返回用户输入的内容（字符串类型），无输入则返回空字符串 ''
// ✔ 点击取消：返回 null
var userInput = prompt('请输入你的姓名');
console.log(userInput);

// 2. confirm(提示文本) → 弹出确认弹窗，有「确定」和「取消」按钮
// ✔ 点击确定：返回布尔值 true
// ✔ 点击取消：返回布尔值 false
var isAgree = confirm('是否同意协议？');
console.log(isAgree);

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

✅ 核心说明

JS是弱类型语言：变量没有固定的类型，声明变量时不需要指定类型，赋值什么类型，变量就是什么类型。
```
var a = 10; // a是数字类型
a = "张三"; // a变成字符串类型
```
JS的数据类型分为两大类：基本数据类型（5种） + 复杂数据类型，本文先讲基础必学的「基本数据类型」。
基本数据类型：数字型(Number)、字符串型(String)、布尔型(Boolean)、未定义型(undefined)、空值型(null)

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

包含：整数、小数、正负数字、特殊数字，是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中最小的正数

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

✅ 核心规则

用 单引号 ''、双引号 ""、反引号 `` 包裹的内容，都是字符串
推荐：HTML中属性用双引号，JS中字符串用单引号，避免冲突
字符串嵌套规则：外单内双、外双内单，不能嵌套同一种引号

✅ 常用语法

// ① 字符串声明
var str1 = '我是单引号字符串';
var str2 = "我是双引号字符串";
var str3 = `我是反引号字符串`;
var str4 = '他说："你好呀"'; // 外单内双，正确

// ② 获取字符串长度：字符串.length → 返回字符个数，空格也算一个字符
console.log('hello'.length); // 5
console.log('你好 JS'.length); // 5（你、好、空格、J、S → 共5个）

// ③ 转义字符（必记2个）：以 \ 开头，解决特殊字符无法直接书写的问题
console.log('换行符：\n我换行了'); // \n 换行
console.log('缩进符：\t我缩进了'); // \t 缩进（tab键效果）
console.log('输出引号：我是\"双引号\"'); // \" 输出双引号，\' 输出单引号
console.log('输出斜杠：\\我是斜杠'); // \\ 输出一个 \

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

布尔值是「逻辑判断」的核心，只有两个固定值，没有其他可能：

true → 表示「真」「成立」「是」，参与数学运算时等价于 1
false → 表示「假」「不成立」「否」，参与数学运算时等价于 0

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

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

唯一值：undefined 触发场景：变量只声明，不赋值时，变量的默认值就是 undefined。

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

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

唯一值：null 含义：表示「空」，主动声明变量为空值，和undefined的区别是：

null：主动的「空」，有明确的含义
undefined：被动的「未定义」，是变量的默认值

var a = null;
console.log(a); // null
// 参与运算：等价于 0
console.log(null + 1); // 1
console.log(null - true); // -1

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

✔️ 作用

判断任意数据/变量的「数据类型」，返回值是一个字符串，告知我们检测结果。

✔️ 两种语法格式

// 格式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'

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

✅ 核心说明

JS是弱类型语言，运算符对「数据类型」有固定要求，当类型不匹配时，会自动转换类型，这个过程叫「类型转换」。
类型转换分为2种：强制转换（显式转换）、自动转换（隐式转换），都是「把一种类型转为另一种类型」，核心是「转字符串、转布尔值、转数值」三大类。
所有转换规则都是「死规则」，记住即可，转数值是重中之重！

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

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

// 方式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空值'

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

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

✅ 【黄金规则，背会】

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

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

所有运算中，「转数值」是最常用的，也是规则最多的，必须全部记牢！

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

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

✅ 转换规则：能整体转为数字则转，整体不行则返回 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）

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

✅ 转换规则：

从第一位开始解析，遇到「数字」就保留，遇到「非数字」停止解析
第一位不是数字，直接返回 NaN
开头/结尾的空格忽略，不认识小数点

console.log(parseInt('123abc')); // 123
console.log(parseInt('88.99')); // 88
console.log(parseInt('a123')); // NaN
console.log(parseInt('  99 100  ')); // 99

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

✅ 转换规则：和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的运算规则，必学）

运算符：用于对数据进行「运算/判断/逻辑处理」的符号，JS的运算符分为以下大类，全部是基础，必记。

优先级：算术运算符 > 比较运算符 > 逻辑运算符 > 赋值运算符

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

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

✅ 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

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

用于多条件组合判断，返回值是「布尔值/原值」，开发中if/循环的条件判断全靠它，核心：短路运算

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

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

表达式1 && 表达式2：如果表达式1为真，返回表达式2；如果表达式1为假，返回表达式1（右侧不执行）
表达式1 || 表达式2：如果表达式1为真，返回表达式1（右侧不执行）；如果表达式1为假，返回表达式2

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

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

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

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

语法：条件表达式 ? 表达式1 : 表达式2 规则：条件为true，执行表达式1；条件为false，执行表达式2

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

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

✅ 核心概念

流程控制：控制代码的「执行顺序」，决定代码按照什么逻辑运行，分为3种结构，所有JS逻辑都是这3种结构的组合：

顺序结构：默认，代码从上到下，依次执行
分支结构：根据条件，执行不同的代码（选路走）
循环结构：满足条件，重复执行一段代码（反复做）

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

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

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

if (条件表达式) {
  // 条件为true时，执行的代码
}

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

if (条件表达式) {
  // 条件为true时执行
} else {
  // 条件为false时执行
}
// 案例：判断奇偶
var num = 10;
if (num % 2 === 0) {
  console.log('偶数');
} else {
  console.log('奇数');
}

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

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

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

语法：根据一个「固定值」匹配不同的case，执行对应代码，核心是全等匹配（===）

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

✅ 特点：case只能写「定值」，不能写范围；break必须加，否则会出现「case穿透」；效率比if高，适合定值判断（如：月份、星期、成绩等级）。

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

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

初始值：声明变量，作为循环的开始
条件表达式：判断是否继续循环
循环体：重复执行的代码段
更新变量：修改初始值，让循环能结束

✅ 1. while 循环（先判断，后执行，可能一次都不执行）

语法：

var 初始值 = 0;
while (条件表达式) {
  循环体;
  更新变量;
}
// 案例：求1~100的和
var sum = 0;
var i = 1;
while (i <= 100) {
  sum += i;
  i++;
}
console.log(sum); // 5050

✅ 2. do-while 循环（先执行，后判断，至少执行一次）

语法：

var 初始值 = 0;
do {
  循环体;
  更新变量;
} while (条件表达式);

区别：while是「先判断再执行」，do-while是「先执行再判断」，适合「必须执行一次」的场景（如：用户输入验证）。

✅ 3. for 循环（开发最常用，语法简洁，推荐）

语法：for(初始值; 条件表达式; 更新变量) { 循环体 }

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

✅ 循环控制语句（break / continue，必记）

用于控制循环的执行流程，解决「提前结束循环」的需求：

break：直接退出整个循环，循环彻底结束，不再执行后续迭代
continue：跳过本次循环的剩余代码，直接进入下一次循环

✔️ 三、双层for循环（进阶，开发常用）

语法：循环中嵌套另一个循环，外层循环执行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开始。

✅ 数组的创建方式（2种）

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

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

✅ 数组的核心语法（必记）

访问数组元素：数组名[索引] → 索引从0开始
获取数组长度：数组名.length → 返回数组元素的个数
遍历数组：用for循环，遍历所有元素，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]);
}

最后：零基础学习建议（2025最新，良心建议）

基础阶段（1-2周）：吃透本文所有知识点，每一个语法都敲代码练习，不要只看不动手，JS的基础是「肌肉记忆」。
练习重点：变量、数据类型转换、运算符、流程控制、数组，这5个是JS的基石，所有复杂逻辑都是基于这些基础。
工具推荐：浏览器（Chrome/Firefox）+ VSCode，所有代码都在浏览器的Console面板调试，学会用console.log()打印结果。
核心心态：零基础学JS一定会遇到「看不懂、写不出、报错」的情况，这是正常的，解决报错的过程就是成长的过程，坚持下去就会突破。

结语：本文档涵盖了JavaScript所有核心基础知识点，是2025年最新整理的零基础入门版，无冗余、无过时内容，适合所有前端初学者。学好这些内容，你就具备了编写JS基础逻辑的能力，后续可以继续学习「函数、对象、DOM/BOM」等进阶知识点。加油！💪

JavaScript 零基础入门核心文档（2025 最新整理，新手友好版）

前言

一、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个必备条件（缺一不可，否则死循环）

✅ 1. while 循环（先判断，后执行，可能一次都不执行）

✅ 2. do-while 循环（先执行，后判断，至少执行一次）

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