ES6 与 TypeScript 核心笔记

第一份：ES6（ECMAScript 2015）核心笔记

一、核心定位

ES6 是 JavaScript 的重要语法规范（ECMAScript 2015），是原生 JS 的语法升级，解决了 ES5 写法繁琐、功能不足的问题，是现代前端开发的基础，可直接在浏览器、Node.js 中运行。

二、必掌握核心语法（高频使用）

1. 变量声明（替代 var）

• let：块级作用域（只在 {} 内有效），不能重复声明，不存在变量提升，暂存死区。

• const：声明常量，块级作用域，必须初始化赋值；基本类型（数字、字符串）不可修改，引用类型（对象、数组）可修改内部属性。

• 注意：开发中优先用 const，需要修改的变量用 let，彻底抛弃 var（避免作用域混乱）。

2. 箭头函数（语法糖，简化函数写法）

语法：(参数) => 返回值/代码块

• 简化写法：单个参数可省略 ()，单个返回值可省略 {} 和 return。

• 核心特点：不绑定 this，this 继承自外层作用域；没有 arguments 对象；不能作为构造函数（不能 new）。

• 示例：const sum = (a, b) => a + b;（等价于普通函数的 return a + b）

3. 解构赋值（快速取值）

用于快速从数组、对象中提取值，简化代码。

• 对象解构：const { name, age } = { name: '张三', age: 18 };（变量名与对象属性名一致）

• 数组解构：const [a, b, c] = [10, 20, 30];（按顺序取值，可跳过空位：[a, , c]）

• 拓展：可设置默认值、重命名（const { name: uname } = obj）。

4. 模板字符串（简化字符串拼接）

语法：用 ``（反引号）包裹，${} 插入变量、表达式或函数调用。

• 特点：支持换行，无需用 + 拼接，代码更简洁。

• 示例：const str = `姓名：${name}，年龄：${age + 1}`;

5. 函数扩展

• 默认参数：function sayHi(msg = 'hello') {}（参数未传时使用默认值）。

• 剩余参数：function sum(...nums) {}（用 ... 接收剩余参数，返回数组，替代 arguments）。

6. 数组与对象扩展

（1）扩展运算符（...）

• 数组：复制数组（const arr2 = [...arr1]）、合并数组（const arr3 = [...arr1, ...arr2]）。

• 对象：复制对象（const obj2 = {...obj1}）、合并对象（const obj3 = {...obj1, age: 20}，后面的属性覆盖前面）。

（2）数组新方法（高频）

• find()：查找第一个满足条件的元素，返回元素本身（找不到返回 undefined）。

• findIndex()：查找第一个满足条件的元素索引（找不到返回 -1）。

• includes()：判断数组是否包含某个元素，返回布尔值（替代 indexOf，可判断 NaN）。

• 其他：forEach()、map()、filter()、reduce()（重点掌握 reduce 求和、累加）。

（3）对象简写

当对象属性名与变量名一致时，可简写：const name = '张三'; const obj = { name };（等价于 { name: name }）。

7. class 类（面向对象语法）

ES6 提供标准的类语法，替代 ES5 的构造函数，更简洁、易维护。

• 基本语法：class Person { constructor(name) { this.name = name; } say() { console.log(this.name); } }

• 继承：用 extends 关键字，子类通过 super() 调用父类构造函数。

• 静态方法：用 static 修饰，只能通过类调用（不能通过实例调用）。

8. 模块化（import / export）

前端工程化核心，实现代码拆分、复用，避免全局变量污染。

• 导出（export）：单个导出（export const a = 10）、批量导出（export { a, b }）、默认导出（export default Person）。

• 导入（import）：导入单个/多个（import { a, b } from './module'）、导入默认导出（import Person from './module'）。

9. 异步编程（Promise）

解决回调地狱（嵌套回调），简化异步代码。

• 基本语法：new Promise((resolve, reject) => { 异步操作; 成功调用 resolve(结果); 失败调用 reject(错误); })

• 常用方法：then()（成功回调）、catch()（失败回调）、finally()（无论成功失败都执行）。

10. 其他实用特性

• Set：数据结构，用于去重（const set = new Set([1,1,2]); 结果为 {1,2}）。

• Map：键值对数据结构，键可以是任意类型（替代对象的字符串键限制）。

• for...of 循环：遍历数组、Set、Map 等可迭代对象，替代 for 循环（可配合 break 终止）。

三、核心总结

ES6 核心是「简化 JS 写法、增加原生功能」，所有特性都是原生 JS 支持，无需编译，是现代前端开发的基础，必须熟练掌握。

第二份：TypeScript（TS）核心笔记

一、核心定位

TypeScript（TS）是微软开发的 JavaScript 超集，完全兼容所有 ES6+ 语法，在此基础上新增了「静态类型系统」和高级语法，解决了 JS 弱类型、无类型校验导致的bug多、维护难问题。TS 不能直接运行，必须编译成 JS 后执行。

核心关系：TS = ES6+ + 静态类型系统 + 高级特性

二、核心知识点（重点：类型系统）

1. 基础类型（核心：给变量指定类型）

语法：let 变量名: 类型 = 值;（类型注解）

• 基本类型：number（数字）、string（字符串）、boolean（布尔值）、null、undefined、void（无返回值）、never（永远不会返回）。

• 示例：

let num: number = 10;（只能赋值数字）

let str: string = 'hello';（只能赋值字符串）

let isOk: boolean = true;（只能赋值 true/false）

function fn(): void { console.log('无返回值'); }

• 注意：TS 会自动类型推断（let num = 10; 会自动推断 num 为 number 类型），但建议显式指定类型，提高可读性。

2. 复杂类型

（1）数组类型

• 语法1：let 数组名: 类型[] = [值1, 值2];（如：let arr: number[] = [1,2,3]）

• 语法2：let 数组名: Array<类型> = [值1, 值2];（如：let arr: Array<string> = ['a','b']）

• 联合类型数组：let arr: (number | string)[] = [1, 'a'];（数组中可包含数字和字符串）

（2）对象类型

• 方式1：直接指定属性类型（let obj: { name: string; age: number } = { name: '张三', age: 18 }）。

• 方式2：接口（interface，重点）：定义对象的“模板”，可复用。

示例：

interface Person {

name: string; // 必选属性

age?: number; // 可选属性（? 表示可选）

readonly id: number; // 只读属性（不能修改）

}

let person: Person = { name: '张三', id: 1 };

（3）联合类型（|）

变量可以是多种类型中的一种，语法：let 变量名: 类型1 | 类型2 = 值;

示例：let a: number | string = 10; a = 'hello';（两种类型都可赋值）

（4）交叉类型（&）

合并多个类型的属性，语法：let 变量名: 类型1 & 类型2 = 值;

示例：interface A { a: number }; interface B { b: string }; let obj: A & B = { a: 1, b: 'a' };

3. 函数类型（给函数指定参数和返回值类型）

• 基本语法：function 函数名(参数1: 类型, 参数2: 类型): 返回值类型 { ... }

• 示例：function sum(a: number, b: number): number { return a + b; }

• 可选参数：参数后加 ?（function fn(a: number, b?: number): number {}）。

• 默认参数：参数 = 默认值（function fn(a: number = 10): number {}）。

• 剩余参数：...rest: 类型[]（function fn(...rest: number[]): number {}）。

4. 泛型（重点，解决类型复用）

定义函数、接口、类时，不指定具体类型，而是用一个占位符（如 T），使用时再传入具体类型，实现类型复用。

• 语法：function 函数名<T>(参数: T): T { ... }

• 示例：// 通用数组反转函数

function reverse<T>(arr: T[]): T[] {

return arr.reverse();

}

reverse<number>([1,2,3]); // 传入 number 类型

reverse<string>(['a','b']); // 传入 string 类型

5. 枚举（enum，TS 独有）

用于定义一组有名字的常量，提高代码可读性，语法：enum 枚举名 { 常量1, 常量2, ... }

• 示例：enum Gender { Male, Female }（默认值：Male=0，Female=1，可自定义值）

• 使用：let gender: Gender = Gender.Male;（只能赋值枚举中的常量）

6. 类型断言（手动指定类型）

当 TS 无法自动推断类型时，手动指定变量类型，语法有两种：

• 方式1：<类型>变量（let str: any = 'hello'; let len: number = (<string>str).length）。

• 方式2：变量 as 类型（let len: number = (str as string).length）（更推荐，兼容 React）。

7. 类与接口（面向对象增强）

• 类的类型：class Person { name: string; constructor(name: string) { this.name = name; } }

• 接口继承类：interface 接口名 extends 类名 { ... }

• 类实现接口：class 类名 implements 接口名 { ... }（必须实现接口中的所有必选属性和方法）。

• 访问修饰符（TS 独有）：

- public（默认）：类内、类外、子类都可访问。

- private：只有类内可访问。

- protected：类内、子类可访问，类外不可访问。

8. 编译配置（tsconfig.json）

TS 编译的核心配置文件，指定编译规则，常用配置：

• "target": "ES6"：指定编译后的 JS 版本。

• "outDir": "./dist"：指定编译后的 JS 文件输出目录。

• "rootDir": "./src"：指定 TS 源文件目录。

• "strict": true：开启严格模式（推荐，强制类型校验）。

9. TS 与 ES6 的兼容

• TS 完全兼容 ES6 所有语法，写 TS 时，可直接使用 let、const、箭头函数、class、模块等 ES6 特性。

• 区别：TS 只是在 ES6 基础上增加了类型相关语法，编译后会移除所有类型注解，生成纯 JS 代码。

三、适用场景与核心总结

1. 适用场景

• 大型项目、团队协作（类型校验减少 bug，提高代码可维护性、可重构性）。

• 框架开发（Vue3、React 项目优先用 TS，提升开发体验）。

2. 核心总结

• TS 核心是「给 JS 加类型」，解决 JS 弱类型的痛点。

• TS 兼容所有 ES6+ 语法，学习 TS 必须先掌握 ES6。

• TS 需编译成 JS 运行，核心依赖 tsconfig.json 配置。

• 重点掌握：类型注解、接口、泛型、枚举、函数类型。

（注：文档部分内容可能由 AI 生成）