极简三分钟ES6 - ES9中对象扩展

新增Rest/Spread 复印件 vs 收纳盒

1. Spread（展开）{...obj} → 复印机

功能：复制/合并对象内容

// 原文件（对象）
const userProfile = { name: "小明", age: 25 };
 
// 复印机工作（创建副本）
const userCopy = { ...userProfile }; 
// { name: "小明", age: 25 }（全新对象）
 
// 合并文件（扩展属性）
const extendedProfile = { ...userProfile, job: "工程师" };
// { name: "小明", age: 25, job: "工程师" }

2. Rest（收集）const {a, ...rest} = obj → 收纳盒

功能：提取剩余属性

// 杂乱桌面（对象）
const order = {
  id: "O123",
  product: "手机",
  price: 5999,
  address: "北京"
};
 
// 收纳盒整理（提取特定属性，其余打包）
const { id, product, ...orderDetails } = order;
console.log(orderDetails);  // { price: 5999, address: "北京" }

一些常见的使用场景

API响应过滤

// 移除元数据 
fetch("/api/user")
  .then(res => res.json()) 
  .then(({ status, headers, ...userData }) => {
    displayUser(userData);
  });

配置合并

// 深度合并配置 
const createConfig = (base, override) => ({
  ...base,
  ...override,
  styles: { ...base.styles,  ...override.styles  }
});

日志安全输出

const log = (data) => {
  const { password, creditCard, ...safeData } = data;
  console.log(safeData); 
};

与传统方案对比

操作	ES5方案	ES9 Rest/Spread	优势
浅拷贝对象	Object.assign({}, obj)	{ ...obj }	代码减少40%
删除属性	delete obj.a; const copy= {...obj}	const {a, ...copy}=obj	无副作用
提取剩余属性	手动遍历属性筛选	const {x, ...y}=obj	减少70%代码量
默认值设置	Object.assign({}, defaults, obj)	{ ...defaults, ...obj }	避免嵌套

需要注意的点

非对象参数处理

{...undefined}  // {}（安全返回空对象）
{...'hello'}    // {0:'h',1:'e',2:'l',3:'l',4:'o'}（字符串转对象）

深拷贝陷阱

const original = { a: { b: 1 } };
const copy = { ...original };
copy.a.b = 2;  // 原对象也被修改！（需用深拷贝解决）

性能优化

• 超过10,000属性的大对象慎用
• 替代方案：Object.assign() 在V8引擎中性能更好

牢记

复印机（Spread） ：{...obj} → 复制/合并对象，收纳盒（Rest） ：const {a, ...rest} = obj → 提取剩余属性