给新手的 JavaScript 基础要点梳理

给新手的 JavaScript 基础要点梳理

前端三件套与浏览器引擎

网页由 HTML、CSS、JavaScript 协同构成：HTML 负责结构和内容，CSS 控制样式和布局，JS 处理交互和动态逻辑，缺一不可。

浏览器解析这些代码时依赖两个核心引擎：渲染引擎（内核）负责 HTML 和 CSS，JS 引擎（比如 Chrome 的 V8）专门执行 JavaScript。

如何引入 JavaScript

JS 是脚本语言，必须嵌入 HTML 才能运行。引入方式有三种，实际开发中优先级是外链式 > 内嵌式 > 行内式。

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

直接把 JS 代码写在 HTML 标签的事件属性或 a 标签的 href 里。因为把行为与结构强耦合，后期维护很麻烦。

<!-- 非 a 标签：事件属性 onclick 点击触发 -->
<div onclick="alert('点击触发行内 JS')">点击我</div>
<!-- a 标签：href 中写 javascript: 开头的 JS 代码 -->
<a href="javascript:console.log('a 标签触发 JS')">点我打印内容</a>

内嵌式（练习阶段可用）

在 HTML 中通过 <script> 标签包裹代码，可以放在 <head> 或 <body> 里。代码与 HTML 部分分离，适合写点测试逻辑。

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

外链式（开发必用）

创建独立 .js 文件，通过 <script src="..."> 引入。这是标准做法，让 JS、HTML、CSS 彻底分离，可复用，好维护。

<script src="./index.js"></script>

一个容易踩的坑：带 src 属性的 script 标签内部不能再写 JS 代码，写了也会被忽略。如果需要补充脚本，再加一个新的 script 标签即可。

script 标签放在哪里

JS 默认加载后立即执行，顺序从上到下。习惯上把 script 放在 </body> 之前，主要有几个好处：避免操作未渲染的 DOM 元素时报错；先加载页面内容再跑脚本，用户体验更好，不会长时间白屏。这也是业界通行的写法。

注释的习惯

注释是写给开发者看的解释，浏览器会完全忽略。写注释能帮自己理清思路，也方便协作。

单行注释用 //，多行用 /* ... */。快捷键 Ctrl + / 可以快速切换注释。

// 这是单行注释
var num = 10; // 声明变量，初始值 10

/*
  这是多行注释
  可以跨好几行
*/
var name = "张三";

字面量与变量

字面量

字面量就是白纸黑字写出来的固定值，看到它就知道是什么——比如数字 1、字符串 'hello'、布尔 true。它们通常用来给变量赋值，单独使用的情况不多。

常见字面量类型：数字（整数、小数、负值）、字符串（单/双/反引号括起来）、布尔（true、false），以及 undefined 和 null 这两个特殊值。

变量

变量相当于内存里一个带标签的盒子，可以存字面量、运算结果等等，值可以随时修改。

声明

用 var 关键字声明，可以一次声明一个，也可以同时声明多个。

var age;
var name, sex, score;

命名规则（硬要求，违反会报错）

• 不能是关键字或保留字（比如 var、if、for、name 等）。
• 只能包含字母、数字、下划线 _ 和美元符 $。
• 不能以数字开头。
• JS 严格区分大小写：age 和 Age 是两个变量。

命名规范（软建议，养成好习惯）

• 见名知意：存年龄用 age，存用户名用 userName。
• 驼峰格式：多个单词时，第一个单词全小写，后面每个单词首字母大写，如 userAge。
• 别用中文或拼音，也尽量避免 name，它有点特殊。

赋值与初始化

= 在 JS 里是赋值运算符，把右边的值赋给左边的变量。可以声明与赋值分开，也可以一次搞定（推荐）。

// 先声明再赋值
var age;
age = 18;

// 声明 + 赋值，即初始化（推荐写法）
var userName = "张三";

使用的四种情况

// 1. 只声明不赋值 → 值为 undefined
var a;
console.log(a); // undefined

// 2. 声明并赋值 → 正常取值
var b = 100;
console.log(b); // 100

// 3. 不声明直接赋值 → 可以用，但强烈不推荐，污染全局，易出错
c = 200;
console.log(c); // 200

// 4. 不声明不赋值直接使用 → 报错 ReferenceError
console.log(d); // ?? d is not defined

更新值

变量可以任意重新赋值，新值覆盖旧值，旧值消失。

var num = 10;
num = 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. 直接在页面 body 中写入内容：document.write(内容)
// 支持 HTML 标签
document.write('我是写入页面的内容');
document.write('<h1>这是一个一级标题</h1>');

获取用户输入主要靠 prompt 和 confirm，返回值有固定规律，需要记住。

// 1. prompt(提示文本)：弹出带输入框的对话框
// 点确定返回输入的字符串（没输入则返回空字符串 ''）
// 点取消返回 null
var userInput = prompt('请输入你的姓名');
console.log(userInput);

// 2. confirm(提示文本)：弹出确认弹窗
// 点确定返回 true，取消返回 false
var isAgree = confirm('是否同意协议？');
console.log(isAgree);

数据类型

JS 的数据类型分为基本类型和复杂类型，我们先搞定基本类型：数字（Number）、字符串（String）、布尔（Boolean）、未定义（undefined）和空（null）。

JS 是弱类型语言，变量没有固定类型，赋什么值它就变什么类型。

var a = 10;     // Number
a = "张三";      // 变成 String

Number（数字）

一切数字，包括整数、小数、负数，还有一些特殊值。

// 十进制
100、-5、3.14

// 其他进制
0b1010  // 二进制，等于十进制 10
012     // 八进制，等于十进制 10
0x1a    // 十六进制，等于十进制 26

// 科学计数法
2e5     // 2 * 10^5 = 200000

// 特殊值
NaN       // Not a Number，类型仍是 Number，和任何值都不相等，包括自己
Infinity  // 正无穷
-Infinity // 负无穷

数字的范围可以通过 Number.MAX_VALUE 和 Number.MIN_VALUE 查看。

String（字符串）

引号包起来的内容就是字符串，单引号、双引号、反引号都行。为了不和 HTML 属性冲突，JS 中通常用单引号。

字符串嵌套时注意引号搭配：外单内双、外双内单，别一套引号类型到底就行。

var str1 = '单引号字符串';
var str2 = "双引号字符串";
var str4 = '他说："你好呀"'; // 外单内双，正确

获取字符串长度用 .length，空格也算一个字符。转义字符用反斜杠 \ 开头，常用的有 \n（换行）和 \t（制表）。

console.log('hello'.length); // 5
console.log('你好 JS'.length); // 5

console.log('换行符：\n 我换行了');
console.log('缩进符：\t 我缩进了');
console.log('输出引号：我是\"双引号\"');
console.log('输出斜杠：\\ 我是斜杠');

Boolean（布尔）

只有 true 和 false 两个值，主要用在条件判断。他们参与数学计算时，true 当成 1，false 当成 0。

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

undefined（未定义）

当变量只声明没赋值时，默认就是 undefined。参与任何数学运算结果都是 NaN。

var a;
console.log(a); // undefined
console.log(undefined + 1); // NaN

null（空）

null 表示主动设置的空值，和 undefined 那种系统默认的空不一样。null 在计算时会被转成 0。

var a = null;
console.log(a); // null
console.log(null + 1); // 1

用 typeof 查看类型

typeof 运算符可以告诉我们变量或值的类型，结果是一个字符串。

// 写法一
typeof 123        // 'number'
typeof 'abc'      // 'string'
typeof true       // 'boolean'
typeof undefined  // 'undefined'

// 写法二，先算括号内
typeof (10 + 20)  // 'number'

一个历史遗留问题：typeof null 返回 'object'，记住就行。

typeof null // 'object'

类型转换

JS 运算符对类型有要求，类型不匹配时会发生转换。转换分强制（明确调用）和自动（隐式）两种，转换规则就那么几条，记住了就行。

转字符串

强制转换可以用 数据.toString() 或 String(数据)，区别是 toString() 不能用于 null 和 undefined（会报错），而 String() 全能。

var num = 123;
num.toString();    // '123'
String(null);      // 'null'

自动转换最常见的是加号 +，只要有一边是字符串，加号就变成拼接符，自动将另一边转成字符串。

'123' + 456      // '123456'
null + '空值'     // 'null空值'

转布尔值

Boolean() 可以强制转换，规则很简单：只有 6 个值转成 false，其余都是 true。这六个值是：0、NaN、''（空字符串）、false、null、undefined。

Boolean(0)          // false
Boolean('')         // false
Boolean(' ')        // true，空格也是非空字符串

! 取反运算符也会引发隐式转换：单取反 ! 先转布尔再取反，双取反 !! 相当于直接获取原值的布尔值，而且比 Boolean() 写起来更短。

!123   // false
!!0    // false

转数值（重点中的重点）

强制转换：Number、parseInt、parseFloat

Number(数据) 尝试整体转换，能转成数字就转，否则返回 NaN。需要注意空字符串转成 0。

Number('123')     // 123
Number('123abc')  // NaN
Number('')        // 0

parseInt(数据) 从左到右逐位解析，只取整数部分，碰到非数字就停，第一位不是数字直接 NaN。这个方法会忽略开头结尾的空格，也不认识小数点。

parseInt('123abc')   // 123
parseInt('88.99')    // 88
parseInt('a123')     // NaN

parseFloat(数据) 和 parseInt 类似，但能保留第一个小数点，第二个小数点略过。

parseFloat('88.99abc')   // 88.99
parseFloat('88.99.123')  // 88.99

自动转换（隐式）

除了加号可能会变成字符串拼接外，其他算术运算符（- * / % ++ --）都会自动把操作数转成数字，规则和 Number() 一致。一元加/减号也会触发数值转换。

'5' - '2'    // 3
'10' * 2     // 20
'abc' - 1    // NaN
+true         // 1
-null         // 0

运算符

JavaScript 里运算符负责执行计算、比较和逻辑判断。常用的大致分这几类：

• 算术：+ - * / % ++ --
• 比较：> < >= <= == != === !==
• 逻辑：&& || !
• 赋值：= += -= *= /= %=
• 三元（条件）：条件 ? 值1 : 值2

关于优先级，大致是算术 > 比较 > 逻辑 > 赋值。

自增和自减的前后置区别

这是一道常考题。

• 前置 ++变量：先自增，再参与运算。
• 后置 变量++：先用原值参与运算，再自增。

var a = 1;
console.log(++a + 1); // a变成2，2+1=3
console.log(a++ + 1); // 原a=2，2+1=3，然后a变成3

相等与全等

== 比较时会进行类型转换，只要求值相同；=== 则要求类型和值都一致，推荐日常使用 ===，避免意料之外的转换。

'10' == 10        // true，类型转换后比较
'10' === 10       // false，类型不同

null == undefined // true
null === undefined// false

NaN == NaN        // false，NaN 不等于任何东西

逻辑与短路运算

&& 两边都为真结果才为真，|| 有一边为真结果就为真，! 取反。

短路特性很实用：

• 表达式1 && 表达式2：如果 1 为假直接返回 1，否则返回 2。
• 表达式1 || 表达式2：如果 1 为真直接返回 1，否则返回 2。

// 如果 score 存在就用它，否则默认0
var finalScore = userScore || 0;

赋值运算符

除了简单的 =，还有组合写法，比如 a += 5 相当于 a = a + 5。

三元运算符

简化版的 if...else，格式：条件 ? 成立时的值 : 不成立时的值。

var age = 18;
var status = age >= 18 ? '成年' : '未成年';

流程控制

代码执行有三种基本结构：顺序、分支和循环，所有复杂逻辑都是它们的组合。

分支：if 和 switch

if 语句

最灵活的判断方式。

单分支：条件为真才执行。

if (score >= 60) {
    console.log('及格');
}

双分支（最常用）：if...else，二选一。

if (num % 2 === 0) {
    console.log('偶数');
} else {
    console.log('奇数');
}

多分支：多个 else if 链，从第一个条件开始依次判断，符合条件的块执行后跳出。

if (score >= 90) {
    console.log('优秀');
} else if (score >= 80) {
    console.log('良好');
} else if (score >= 60) {
    console.log('及格');
} else {
    console.log('不及格');
}

switch 语句

当需要判断一个变量是否等于某些特定值时，switch 比多个 if 更清晰，而且它用的是 === 全等匹配。

每个 case 后面别忘了 break，否则会继续执行下一个 case（穿透效应）。

switch (month) {
    case 1:
        console.log('一月');
        break;
    case 2:
        console.log('二月');
        break;
    default:
        console.log('月份输入有误');
}

循环：while、do-while、for

一个合格的循环必须包含四要素：初始值、条件表达式、循环体、更新变量，缺任何一项都可能变成死循环。

while 循环

先判断条件，再执行循环体，可能一次也不执行。

var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i++;
}
console.log(sum); // 5050

do-while 循环

先执行循环体，再判断条件，至少执行一次。

var i = 1;
var sum = 0;
do {
    sum += i;
    i++;
} while (i <= 100);

for 循环（最常用）

for 把四要素写在了一起，结构紧凑。循环体内的代码重复执行，直到条件不满足。

var sum = 0;
for (var i = 1; i <= 100; i++) {
    sum += i;
}
console.log(sum); // 5050

循环控制

• break：直接终止整个循环，后面的迭代不再进行。
• continue：跳过本次循环体中后面的代码，直接进入下一次迭代。

双层 for 循环

循环里再套循环，外层每执行一次，内层要完整跑一轮。常用于处理二维表、打印图形、九九乘法表等。

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

数组

数组是存储多个数据的有序容器，每个元素都有一个索引，从 0 开始计数。

创建数组常用字面量方式，简单直接：

var arr = [1, 2, '张三', true, null]; // 元素可以是任意类型

也可以用构造函数 new Array()，但不常用。

访问数组用 arr[索引]，获取长度用 arr.length。

遍历数组最经典的方式是用 for 循环配合索引：

var arr = [10, 20, 30, 40];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]); // 依次打印 10 20 30 40
}

最后一个元素的索引是 长度 - 1，也就是 arr[arr.length - 1]。

---

至此，JavaScript 最基础的核心语法点就梳理完了。这些是后续深入学习 DOM 操作、事件、AJAX 等前必须扎实掌握的内容。多动手写，多在控制台尝试，比死记硬背管用得多。