前端留存指南

Appearance

ES6 ​

JavaScript 的“健身教练”，让老 JS 变得更强壮、更优雅，语法糖多到让你甜到掉牙。

指南 ​

var 🤞 let 🤞 const ​

  • var

声明具有函数/全局作用域的变量，并允许在同一作用域内重复声明和更新。

  • let

声明具有块级作用域的变量，允许更新值，但在同一代码块内不能重复声明。

  • const

声明在初始赋值 后 不能重新赋值的块作用域变量。

example.js
js
// var: 函数或全局作用域，可以重新声明和更新。
var x = 10;
var x = 20; // re-declaration allowed
console.log("var:", x); // 20

// let: 块级作用域，可以更新，但不能在同一代码块内重新声明。
let y = 30;
// let y = 40; Error (can't re-declare in same block)
y = 40; // update allowed
console.log("let:", y); // 40

// const: 块级作用域，初始赋值后，不能重新赋值。
const z = 50;
// z = 60; Error (can't reassign)
console.log("const:", z); // 50

运算符的扩展 ​

  • **：指数运算符，ES2016 新增的一个运算符。
    • 2 ** 2 // 4
    • a **= 2 // 等同于 a = a * a;
  • ?.：链判断运算符，ES2020 新增的一个运算符，左侧的对象是否为null/undefined，若是则不再往下运算，而是返回undefined。
    • obj?.prop：对象属性是否存在
    • obj?.[expr]：同上
    • func?.(...args)：函数或对象方法是否存在
  • ??：null/undefined 判断运算符，ES2020 新增的一个运算符，只有运算符左侧的值为null/undefined时，才会返回右侧的值。
    • const name = res.nickName ?? 'frank'; 默认值只有在左侧属性值为null/undefined时，才会生效

Set & Map 数据结构 ​

Set & WeakSet

1️⃣ Set：ES6 新增的数据结构，类似于数组，但成员值唯一、无重复。

常用方法

  • add(value)：添加元素
  • delete(value)：删除元素
  • has(value)：判断元素是否存在
  • clear()：清空所有元素
  • size：元素个数

遍历：支持 forEach、for...of、keys、values、entries

特点

只存储值，没有键，值唯一。

2️⃣ WeakSet：结构与 Set 类似，但只能存储对象（不能存储原始值），且对象为弱引用。

常用方法

  • add(value)
  • delete(value)
  • has(value)

⚠️ 注意事项

  • Set本身是一个构造函数，用来生成 Set 数据结构。
Map & WeakMap

1️⃣ Map：ES6 新增的数据结构，键值对集合，键和值都可以是任意类型。。

常用方法

  • set(key, value)：设置键值对
  • get(key)：获取键值
  • has(key)：判断键是否存在
  • delete(key)：删除键值对
  • clear()：清空所有
  • size键值对数量

遍历：支持 forEach、for...of、keys、values、entries

特点

键可以是对象，顺序按插入顺序。

2️⃣ WeakMap：键值对集合，键必须是对象，值可以是任意类型，键为弱引用。

常用方法

  • set(key, value)：设置键值对
  • get(key)：获取键值
  • has(key)：判断键是否存在
  • delete(key)：删除键值对

特点

  • 不能遍历（无 size、无 forEach）。
  • 键对象被垃圾回收后自动移除。
  • 适合存储与对象相关的私有数据。
区别与联系总结表
特性SetWeakSetMapWeakMap
成员只存值只存对象Record<any,any>Record<object,any>
唯一是是键唯一键唯一
可遍历是否是否
弱引用否是否是
垃圾回收影响否是否是
应用场景唯一值集合临时对象集合映射关系关联私有数据

Symbol 函数 ​

作用：主要用于定义对象的唯一属性名，避免属性名冲突。

1️⃣ 使用规则

  • Symbol 一种新的原始数据类型，通过 Symbol() 函数创建。
  • Symbol 不能与其他类型直接运算（如 +），只能显式转换为字符串或布尔值。
  • 作为对象属性时，不会被常规遍历方法枚举出来，可用 Object.getOwnPropertySymbols()。
  • 作为属性名时，不能用点语法访问，必须用方括号 [] 访问，如obj[sym] = value;
  • 全局注册的 Symbol（Symbol.for/ Symbol.keyFor）可跨文件共享。

2️⃣ 经典用法

js
// 唯一性：每个 Symbol 都是唯一的，即使描述相同。
const a = Symbol("desc");
const b = Symbol("desc");
console.log(a === b); // false
js
// 作为对象属性：防止属性名冲突，常用于对象“私有”属性。
const key = Symbol("id");
const obj = {
  [key]: 123,
  name: "Tom",
};
console.log(obj[key]); // 123
js
// 用 Symbol 定义状态常量，含义明确
const STATUS = {
  RED: Symbol("red"),
  GREEN: Symbol("green"),
};

function getColor(color) {
  switch (color) {
    case STATUS.RED:
      return "红色";
    case STATUS.GREEN:
      return "绿色";
  }
}
getColor(STATUS.RED);
js
// 内置 Symbol 用法（如自定义迭代器）
const obj = {
  [Symbol.iterator]() {
    let i = 0;
    return {
      next() {
        return i < 3 ? { value: i++, done: false } : { done: true };
      },
    };
  },
};
for (const v of obj) console.log(v); // 0 1 2

3️⃣ 使用场景

⚠️ 注意事项

Symbol 是原始数据类型，不是对象，所以不能用 new Symbol() 创建，否则会报错