如何克隆一个 JavaScript 对象？

2019-01-10

回答

使用扩展运算符 ... 可将对象自身的枚举属性复制到新对象中。但这只能进行浅拷贝，如：

const obj = { a: 1, b: 2 }
const shallowClone = { ...obj }

使用这种技术将会忽略原型链。此外，嵌套对象并不会被克隆，只是复制了他们的引用，因此浅拷贝后嵌套对象和原始对象仍然指向同一个对象。

加分回答

克隆还可以使用以下几种方法：
JSON.parse(JSON.stringify(obj)) 可用于深度克隆一个简单的对象，但他是 CPU 密集型的且只允许接受有效的 JSON。因此不适用于含有函数及循环引用的场景。
Object.assign({}, obj) 可以把一个对象的所有枚举属性值拷贝到另一个对象中，但嵌套对象依然只能拷贝其引用。
Object.keys(obj).reduce((acc, key) => (acc[key] = obj[key], acc), {}) 是一个稍微复杂的可选方案，他更加深入的展示了拷贝的过程。
以上方法同样适用与 2 个对象的合并。
深度克隆要复杂得多，他需要有效地克隆可能嵌套在对象中的任何对象类型（Date，RegExp，Function，Set 等）。除此之外，还需要解决原型链属性、循环引用和自身引用的问题。但实际业务场景中需要真正使用到的地方并不常见。需要了解的可参看 Lodash 中的 clone。
JavaScript 通过引用传递对象，这意味着嵌套对象只是赋值了他们的引用而不是他们真实的值。这点在编码过程中需要着重注意。

返回总目录

每天 30 秒

8 回帖

如何克隆一个 JavaScript 对象？

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册关于

请输入回帖内容 ...

Eddie • 5 年前
捐赠者

如何用 javascript 语言实现继承关系？

1 回复

Vanessa • 5 年前

订阅者付费者作者

class Parent {
    constructor(name) {
        this.name = name;
    }
}

class Child extends Parent {
    constructor(name, age) {
        super(name); // 调用父类的 constructor(name)
        this.age = age;
    }
}

console.log(new Child('kevin', '18')) // Child {name: "kevin", age: "18"}

1 回复

Eddie • 5 年前
捐赠者

不许用 ES6 的语法！！！！！

1 回复

function Parent(name) {
  this.name = name;
};
function Child(name, age) {
  Parent.call(this, name, age);
  this.age = age;
}

console.log(new Child('kevin', '18')) // Child {name: "kevin", age: "18"}

wuhongxu • 5 年前

再来一波用原型链的 😒

1 回复

function Parent (name) {
  this.name = name;
}
function Child(age){ 
    this.age = age
}
Child.prototype = new Parent('kevin');
const child = new Child(18);
console.log(child.age, child.name) // 18 "kevin"

Eddie • 5 年前
捐赠者

我用 typescript 看编译后的继承关系的代码，有点复杂
wuhongxu • 5 年前

js 不太适合也不太需要面向对象的语法啦，就函数式走下去其实也挺不错的，不必强求面向对象的感觉

如何克隆一个 JavaScript 对象？

回答

加分回答

返回总目录

相关帖子

手写 call,apply,bind

哈哈哈

数据库篇

Diss 一下前端“八股文”

虚拟机篇

技术招聘漫谈 | 正在招 Golang 工程师的你，赶快收藏这份识人秘籍！

面经 -1

欢迎来到这里！