JavaScript 总结
简介
JavaScript 是一种轻量级、解释型的编程语言，主要用于网页开发，但现在已经发展成为全栈开发语言。
运行环境
- 浏览器端：直接嵌入 HTML，操作 DOM
- 服务端：Node.js 环境
- 其他：React Native(移动端)、Electron(桌面端)等
基础语法
变量声明
// var - 函数作用域，可重复声明（不推荐）
var name = 'Alice';
// let - 块级作用域，可重新赋值
let age = 25;
age = 26; // ✅ 允许
// const - 块级作用域，不可重新赋值；声明时必须赋值，不能先声明后赋值；对引用类型 只保证引用不变，对象内容可变
const PI = 3.14159;
// PI = 3.14; // ❌ 报错数据类型
// 原始类型（Primitive）
let str = "字符串"; // String
let num = 42; // Number（整数和浮点数）
let big = 9007199254740991n; // BigInt
let bool = true; // Boolean
let nothing = null; // Null（空值）
let notDefined; // Undefined（未定义）
let sym = Symbol('id'); // Symbol（唯一标识符）
// 引用类型（Reference）
let obj = { name: 'Tom', age: 20 }; // Object
let arr = [1, 2, 3]; // Array（特殊的对象）
let fn = function() {}; // Function运算符
// 算术运算
let sum = 10 + 5; // 15
let diff = 10 - 5; // 5
let product = 10 * 5; // 50
let quotient = 10 / 5; // 2
let remainder = 10 % 3; // 1
let power = 2 ** 3; // 8（ES2016）
// 比较运算（注意区别）
console.log(5 == '5'); // true（宽松相等，类型转换）
console.log(5 === '5'); // false（严格相等，类型和值都相同）
// 逻辑运算
let result = (age > 18) && (hasID === true); // 与
let alternative = isAdmin || isModerator; // 或
let opposite = !isActive; // 非
// 空值合并（ES2020）
let value = userInput ?? '默认值'; // 仅对 null/undefined 生效条件语句
// if...else
let score = 85;
if (score >= 90) {
console.log('优秀');
} else if (score >= 80) {
console.log('良好');
} else {
console.log('一般');
}
// 三元运算符
let status = age >= 18 ? '成年' : '未成年';
// switch
let day = 3;
switch (day) {
case 1:
console.log('周一');
break;
case 2:
console.log('周二');
break;
default:
console.log('其他');
}循环结构
// for 循环
for (let i = 0; i < 5; i++) {
console.log(i); // 0,1,2,3,4
}
// while 循环
let count = 0;
while (count < 5) {
count++;
}
// for...of（遍历可迭代对象）
const fruits = ['apple', 'banana', 'orange'];
for (const fruit of fruits) {
console.log(fruit);
}
// for...in（遍历对象属性）
const person = { name: 'Alice', age: 25 };
for (const key in person) {
console.log(`${key}: ${person[key]}`);
}
// 数组方法（函数式风格）
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num)); // 遍历
const doubled = numbers.map(num => num * 2); // 映射 [2,4,6,8,10]
const evens = numbers.filter(num => num % 2 === 0); // 过滤 [2,4]
const sum = numbers.reduce((acc, num) => acc + num, 0); // 归约 15函数定义方式
// 1. 函数声明（提升）
function greet(name) {
return `Hello, ${name}!`;
}
// 2. 函数表达式
const sayHi = function(name) {
return `Hi, ${name}`;
};
// 3. 箭头函数（ES6，简洁，无自己的 this）
const add = (a, b) => a + b;
const square = x => x * x;
// 4. 默认参数
function greetUser(name = 'Guest') {
return `Welcome, ${name}`;
}
// 5. 剩余参数
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4); // 10闭包（Closure）
function createCounter() {
let count = 0; // 私有变量
return {
increment: () => ++count,
decrement: () => --count,
getCount: () => count
};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2对象操作
// 对象字面量
const user = {
firstName: 'John',
lastName: 'Doe',
age: 30,
// 方法简写
getFullName() {
return `${this.firstName} ${this.lastName}`;
},
// Getter/Setter
get isAdult() {
return this.age >= 18;
}
};
// 访问属性
console.log(user.firstName); // 点符号
console.log(user['lastName']); // 括号符号（动态属性名）
// 解构赋值
const { firstName, age } = user;
// 扩展运算符
const userCopy = { ...user, email: 'john@example.com' };类（ES6）
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound`);
}
// 静态方法
static isAnimal(obj) {
return obj instanceof Animal;
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // 调用父类构造函数
this.breed = breed;
}
speak() { // 方法重写
console.log(`${this.name} barks`);
}
}
const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // Buddy barks异步编程Promise
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true;
if (success) {
resolve('Data loaded');
} else {
reject('Error occurred');
}
}, 1000);
});
};
// 使用
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log('Completed'));异步编程Async/Await（ES2017，推荐）
async function getUserData() {
try {
const response = await fetch('https://api.example.com/user');
const data = await response.json();
return data;
} catch (error) {
console.error('Failed to fetch:', error);
throw error;
}
}
// 并行执行
async function fetchMultiple() {
const [users, posts] = await Promise.all([
fetch('/users'),
fetch('/posts')
]);
return { users, posts };
}现代 JavaScript 特性（ES6+）
| 特性 | 示例 | 说明 |
|---|---|---|
| 模板字符串 | `Hello ${name}` |
支持插值和多行 |
| 解构赋值 | const {a, b} = obj |
快速提取属性 |
| 展开运算符 | const arr2 = [...arr1] |
复制/合并数组对象 |
| 可选链 | user?.address?.city |
安全访问深层属性 |
| 空值合并 | value ?? default |
仅对 null/undefined 生效 |
| 模块化 | import/export |
代码分割和复用 |
箭头函数
箭头函数（Arrow Function）是 ES6 引入的一种更简洁的函数写法，同时它解决了传统函数中 this 绑定的痛点。
// 传统函数
function add(a, b) {
return a + b;
}
// 箭头函数（等价写法）
const add = (a, b) => {
return a + b;
};
// 更简洁：单表达式可省略 {} 和 return
const add = (a, b) => a + b;
// 单个参数可省略括号
const square = x => x * x;
// 无参数需要空括号
const greet = () => console.log('Hello');| 场景 | 箭头函数写法 | 说明 |
|---|---|---|
| 多参数 + 多行 | (a, b) => { ... } |
需要 return |
| 单表达式 | (a, b) => a + b |
隐式返回 |
| 单个参数 | x => x * 2 |
括号可省 |
| 无参数 | () => console.log('hi') |
必须空括号 |
| 返回对象 | () => ({ name: 'Tom' }) |
用 () 包裹 {} |
| 多行逻辑 | (x) => { const y = x + 1; return y; } |
必须显式 return |
核心特性：没有自己的 this
传统函数的 this 问题
const user = {
name: 'Tom',
hobbies: ['reading', 'coding'],
// 传统函数：this 指向调用者
showHobbies: function() {
console.log(this.name + ' likes:');
this.hobbies.forEach(function(hobby) {
console.log(this.name + ' likes ' + hobby); // ❌ this.name 是 undefined
});
}
};
user.showHobbies();
// 输出：Tom likes:
// undefined likes reading
// undefined likes codingforEach 中的普通函数有自己的 this，不再指向 user。
箭头函数解决方案：
const user = {
name: 'Tom',
hobbies: ['reading', 'coding'],
showHobbies: function() {
console.log(this.name + ' likes:');
// 箭头函数继承外层 this
this.hobbies.forEach(hobby => {
console.log(this.name + ' likes ' + hobby); // ✅ Tom likes reading
});
}
};箭头函数没有自己的 this，它会继承定义时外层作用域的 this（词法作用域绑定）。
React/Vue与JavaScript 的关系
都是基于js开发的js框架
浏览器只认识 JavaScript，不认识 JSX、Vue 单文件组件或 TypeScript。
React 和 Vue 是"开发时的语法糖和工具"，最终都编译为浏览器能运行的纯 JavaScript。
┌─────────────────────────────────────────────────────────┐
│ 你的源代码 编译/构建过程 浏览器运行 │
│ ───────────────► ─────────────────────────► ───────── │
│ │
│ React (.jsx) Babel/Vite/Webpack 纯 JS │
│ Vue (.vue) ───► 模板编译 + 代码转换 ───► 纯 JS │
│ TypeScript (.ts) 类型擦除 + 语法降级 纯 JS │
└─────────────────────────────────────────────────────────┘TypeScript 与 JavaScript 的关系
TypeScript是微软于2012年10月发布的开源编程语言，它是JavaScript的一个超集，本质上添加了可选的静态类型和基于类的面向对象编程。
TypeScript通过编译器转译为JavaScript代码，最终运行时还是要被编译为JavaScript。
TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。
编译过程
TypeScript 源码 (.ts/.tsx)
│
▼
tsc（TypeScript 编译器）或 Vite/Webpack + ts-loader
│
├── 类型检查（发现错误，但不阻止输出）
│
└── 代码转换（擦除类型，降级语法）
│
▼
JavaScript 代码 (.js/.jsx)
│
▼
浏览器或 Node.js 运行TypeScript与 React/Vue 的关系
| 组合 | 文件扩展名 | 说明 |
|---|---|---|
| JavaScript + React | .jsx |
基础组合 |
| TypeScript + React | .tsx |
现代主流，强烈推荐 |
| JavaScript + Vue | .vue |
Vue 2 时代常用 |
| TypeScript + Vue | .vue (setup lang="ts") |
Vue 3 官方推荐 |
浙公网安备 33010602011771号