当前位置：首页 > JavaScript

js对象展开实现

2026-04-07 16:41:26JavaScript

对象展开运算符的基本用法

在JavaScript中，对象展开运算符（...）允许将一个对象的可枚举属性拷贝到另一个对象中。ES2018（ES9）正式将对象展开运算符纳入标准。

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

合并多个对象

对象展开运算符可以用于合并多个对象，后面对象的属性会覆盖前面对象的同名属性。

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 3, c: 4 }

浅拷贝对象

对象展开运算符可以实现对象的浅拷贝，不会拷贝原型链上的属性。

js对象展开实现

const original = { x: 1, y: { z: 2 } };
const copy = { ...original };
original.y.z = 3;
console.log(copy.y.z); // 3，因为y是引用类型

添加新属性

可以在展开对象的同时添加新的属性。

const base = { name: 'Alice' };
const extended = { ...base, age: 25, city: 'London' };
console.log(extended); // { name: 'Alice', age: 25, city: 'London' }

覆盖现有属性

通过展开顺序可以实现属性的覆盖，后面展开的对象会覆盖前面同名属性。

js对象展开实现

const defaults = { theme: 'light', fontSize: 14 };
const userPrefs = { theme: 'dark' };
const settings = { ...defaults, ...userPrefs };
console.log(settings); // { theme: 'dark', fontSize: 14 }

与解构赋值结合使用

对象展开可以与解构赋值一起使用，收集剩余属性。

const { a, ...rest } = { a: 1, b: 2, c: 3 };
console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }

注意事项

对象展开运算符执行的是浅拷贝，对于嵌套对象只会复制引用。展开操作不会拷贝对象的原型链，需要使用Object.assign()或手动设置原型来保持原型链。

class Example {
  constructor() {
    this.x = 1;
  }
}
const instance = new Example();
const copy = { ...instance };
console.log(copy instanceof Example); // false