Web 前端 JS 基本语法速成指南
（2026 年最新实用版，适合 0-3 个月快速上手）
JavaScript（简称 JS）是目前 Web 前端最核心的编程语言，几乎所有交互、动态效果、数据处理都靠它。下面按最常用、最常考的顺序整理基本语法，建议边看边在浏览器控制台（F12 → Console）敲代码验证。
1. 声明变量（var / let / const）
// 旧时代（不推荐新项目使用）
var name = "张三"; // 函数作用域 + 变量提升
// 现代标准（强烈推荐）
let age = 25; // 块级作用域（if、for、{} 都算块）
const PI = 3.14159; // 常量，不能重新赋值（但对象/数组内容可改）
const person = { name: "李四" };
person.age = 30; // 合法！对象引用没变
// person = {}; // 非法！会报错面试金句：
let / const 是 ES6 引入的块级作用域，var 有变量提升和函数作用域问题，现代项目一律用 let + const。
2. 数据类型（8 种）
| 类型 | 例子 | typeof 结果 | 特点 |
|---|---|---|---|
| Number | 42, 3.14, NaN, Infinity | “number” | 所有数字都是浮点数 |
| String | “hello”, ‘world’, 模板 | “string” | 单/双/反引号都行 |
| Boolean | true, false | “boolean” | — |
| Undefined | let x; | “undefined” | 未赋值 |
| Null | let y = null; | “object”（历史遗留） | 主动清空对象引用 |
| Symbol | Symbol(‘id’) | “symbol” | ES6 唯一值，通常做对象键 |
| BigInt | 12345678901234567890n | “bigint” | 处理超大整数 |
| Object | {}, [], function(){} 等 | “object” / “function” | 引用类型 |
常见陷阱：
console.log(typeof null); // "object"（bug，记住就好）
console.log([] instanceof Array); // true
console.log(typeof []); // "object"3. 模板字符串（ES6 最常用）
const name = "重阳";
const age = 28;
console.log(`我叫${name}，今年${age}岁`); // 反引号 + ${}
// 多行字符串
const html = `
<div>
<h1>欢迎 ${name}</h1>
</div>
`;4. 运算符（重点掌握短路逻辑）
// 逻辑运算符短路
let a = 0 || "默认值"; // "默认值"（0 转 boolean 为 false）
let b = "" && "不会执行"; // ""（&& 遇到假值就返回假值）
// 空值合并（ES2020）
let username = userInput ?? "匿名"; // 只有 null/undefined 才用默认值
// 可选链（ES2020）——防报错神器
console.log(user?.address?.city); // user 不存在也不会报错，返回 undefined5. 条件判断 & 三元运算
// if-else
if (score >= 90) {
grade = "A";
} else if (score >= 80) {
grade = "B";
} else {
grade = "C";
}
// 三元运算符（一行写法）
let msg = age >= 18 ? "成人" : "未成年";
// 多个条件用 && || 短路
isLogin && showDashboard(); // 已登录才执行6. 循环（for / for…of / for…in）
// 传统 for（最常用）
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// for...of（遍历值，数组/字符串/Map/Set 推荐）
for (const item of arr) {
console.log(item);
}
// for...in（遍历键，主要用于对象）
for (const key in person) {
console.log(key, person[key]);
}7. 函数声明 & 箭头函数（ES6）
// 传统函数
function add(a, b) {
return a + b;
}
// 箭头函数（最常用写法）
const add = (a, b) => a + b; // 单行省略 return 和 {}
const greet = name => `你好，${name}`; // 单参数省略 ()
const sayHi = () => console.log("Hi"); // 无参
// this 指向区别（箭头函数没有自己的 this）
const obj = {
name: "重阳",
say: function() { console.log(this.name); }, // this → obj
sayArrow: () => console.log(this.name) // this → window/global（或 undefined）
};8. 数组常用方法（必须掌握前 10 个）
const arr = [1, 2, 3, 4, 5];
// 增删改查
arr.push(6); // 尾部添加
arr.pop(); // 尾部删除
arr.unshift(0); // 头部添加
arr.shift(); // 头部删除
arr.splice(2, 1, 99); // 从索引2开始删1个，插入99
// 遍历 & 转换
arr.forEach(item => console.log(item));
const doubled = arr.map(x => x * 2); // [2,4,6,8,10]
const evens = arr.filter(x => x % 2 === 0); // [2,4]
const sum = arr.reduce((acc, cur) => acc + cur, 0); // 求和
arr.sort((a, b) => a - b); // 升序排序
arr.includes(3); // true
arr.indexOf(4); // 3
arr.join("-"); // "1-2-3-4-5"9. 对象操作（ES6+ 写法）
const user = {
name: "重阳",
age: 28,
city: "Kansas City"
};
// 解构赋值
const { name, age } = user;
console.log(name, age); // 重阳 28
// 属性简写 & 计算属性名
const key = "score";
const student = {
name,
age,
[key]: 95, // 计算属性
sayHi() { console.log("hi") } // 方法简写
};
// 展开运算符
const copy = { ...user, job: "前端" };10. 类型转换 & 真假值
假值（falsy）只有 6 个：false、0、""、null、undefined、NaN
其他都为真（包括 []、{}、”0″、”false” 等）
显式转换：
Number("123") // 123
String(123) // "123"
Boolean(0) // false
parseInt("12px") // 12
parseFloat("3.14")// 3.14快速自测清单（建议全部敲一遍）
- let 和 const 的区别？
- 箭头函数和普通函数 this 区别？
- 数组 map、filter、reduce 分别返回什么？
- 怎么判断一个变量是否为数组？（Array.isArray()）
- 可选链 ?. 和空值合并 ?? 的区别？
- 模板字符串和普通字符串区别？
掌握以上内容，基本能应付 80% 的前端 JS 基础面试和日常开发。
你现在是刚入门想系统练手，还是已经有基础想针对某个部分（比如 this 指向、闭包、Promise、async/await）深入？
告诉我你的当前水平和目标，我可以给你更精准的进阶路线 + 练习题。
