引言
JavaScript 作为前端开发的“三剑客”之一，其核心语法与特性是开发者必须掌握的技能。本文基于系统性学习文档，全面梳理 变量声明、数据类型、数组操作、函数作用域、内置对象、面向对象 等核心内容，搭配 20+ 实战代码示例，助你从基础到进阶一步到位！无论你是新手查漏补缺，还是老手巩固知识，这里都有你需要的干货！
目录
一、JavaScript的历史与标准化
-
诞生与命名：1996年由Netscape推出，原名LiveScript，后因与Sun合作更名为JavaScript。
-
ECMAScript标准：由ECMA国际组织维护，确保语言开放性，JS是ECMAScript的一种实现。
-
版本里程碑：
-
ES3（1999）：新增正则、异常处理。
-
ES5（2009）：严格模式、JSON支持。
-
ES6（2015）：
let/const、箭头函数、Promise。 -
ES2016+：
async/await、指数运算符等。
-
二、变量与数据类型
1. 变量声明
var的缺陷：函数作用域、变量提升、可重复声明。
let与const的优势：
let：块级作用域，禁止重复声明。
const：声明常量，需初始化且不可改值。
var a = 10; // 旧方式（不推荐）
let b = "Hello"; // 块级作用域
const PI = 3.14; // 常量2. 数据类型详解
JavaScript是弱类型语言，变量类型由值决定。七种原始类型+对象：
| 类型 | 示例 | 说明 |
|---|---|---|
number | 42, NaN, Infinity | 数字类型，含特殊值 |
string | "Hello",模板字符串 | 支持拼接、多行字符串 |
boolean | true, false | 逻辑判断核心 |
undefined | let a; | 变量未初始化默认值 |
null | let obj = null; | 表示空对象引用 |
symbol | Symbol('id') | ES6新增，唯一标识符 |
object | {}, [], Date | 复合类型，含数组、函数等 |
动态类型示例：
let x; // x 为 undefined
x = 10; // x 转为 number
x = "Hello"; // x 转为 string3. 类型转换与检测
显式转换：parseInt("123") → 123，parseFloat("12.3") → 12.3。
隐式转换："5" + 1 → "51"，"5" - 1 → 4。
typeof运算符：
typeof "Hello" // "string"
typeof null // "object" （历史遗留问题）
typeof [] // "object"三、数组操作：从基础到高阶
1. 数组创建与基础方法
// 创建数组
let arr1 = new Array(1, 2, 3); // 构造函数
let arr2 = [4, 5, 6]; // 字面量（推荐）
// 增删元素
arr2.push(7); // 尾部添加 → [4,5,6,7]
arr2.pop(); // 尾部删除 → [4,5,6]
arr2.unshift(3); // 头部插入 → [3,4,5,6]
arr2.shift(); // 头部删除 → [4,5,6]2. 高阶数组方法
-
forEach：遍历数组（无返回值）。 -
map：映射新数组。 -
filter：过滤符合条件的元素。 -
reduce：累计计算。
let nums = [1, 2, 3];
nums.forEach(n => console.log(n * 2)); // 输出 2,4,6
let doubled = nums.map(n => n * 2); // [2,4,6]
let evens = nums.filter(n => n % 2 === 0); // [2]
let sum = nums.reduce((acc, n) => acc + n, 0); // 6 3. 数组去重与反转
// 去重（ES6 Set）
let arr = [1, 2, 2, 3];
let uniqueArr = [...new Set(arr)]; // [1,2,3]
// 反转与拼接
arr.reverse(); // [3,2,2,1]
arr.join("-"); // "3-2-2-1"四、函数：作用域、闭包与词法分析
1. 函数定义与调用
// 函数声明
function add(a, b) { return a + b; }
// 函数表达式（匿名函数）
const multiply = function(a, b) { return a * b; };
// 箭头函数（ES6）
const greet = name => `Hello, ${name}!`;2. 作用域链与闭包
-
作用域链：内部函数 → 外层函数 → 全局作用域。
-
闭包应用：保留外部变量状态。
function createCounter() {
let count = 0;
return function() {
count++;
console.log(count);
};
}
const counter = createCounter();
counter(); // 1
counter(); // 2 （闭包维持count状态）3. 词法分析（AO对象）
JavaScript函数执行前会创建AO（Active Object），存储参数、变量和函数声明：
function test(a) {
console.log(a); // function a
var a = 10;
function a() {}
}
test(1); // 输出 function a五、内置对象实战指南
1. Date对象：时间处理
let now = new Date();
console.log(now.toLocaleDateString()); // "2023/10/5"
console.log(now.getHours()); // 当前小时
console.log(now.getTime()); // 时间戳（毫秒）2. JSON对象：序列化与反序列化
let user = { name: "张三", age: 25 };
let jsonStr = JSON.stringify(user); // 转为JSON字符串
let parsedUser = JSON.parse(jsonStr); // 解析为对象3. Math对象：数学计算
Math.abs(-5); // 5（绝对值）
Math.floor(3.7); // 3（向下取整）
Math.random(); // 0~1随机数（含0不含1）
Math.pow(2, 3); // 8（幂运算）4. RegExp对象：正则表达式
// 验证手机号
let phoneReg = /^1[3-9]\d{9}$/;
console.log(phoneReg.test("13812345678")); // true
// 字符串替换
let text = "Hello World";
text.replace(/World/, "JavaScript"); // "Hello JavaScript"六、面向对象与原型继承
1. 自定义对象与ES6 Map
// 对象字面量
let person = { name: "张三", age: 25 };
console.log(person.name); // "张三"
// ES6 Map（键可为任意类型）
let map = new Map();
map.set(1, "One");
console.log(map.get(1)); // "One"2. 原型链继承
// 父类
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a noise.`);
};
// 子类继承
class Dog extends Animal {
constructor(name) {
super(name);
}
speak() {
console.log(`${this.name} barks!`);
}
}
let dog = new Dog("Buddy");
dog.speak(); // "Buddy barks!"七、总结与资源推荐
-
核心要点：
-
变量声明优先使用
let/const。 -
数组操作掌握高阶方法（
map、filter）。 -
闭包与作用域是JS进阶关键。
-
内置对象（Date、JSON）提升开发效率。
-
-
学习资源：
-
《JavaScript高级程序设计》（红宝书）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
