深入解析JavaScript中对象拷贝方法（附代码）

之前的文章《你值得了解的JavaScript“继承之jquery”使用方法（代码详解）》中，给大家了解了JavaScript“继承之jquery”使用方法。下面本篇文章给大家了解一下JS中对象拷贝方法，有需要的朋友可以参考一下。

说到javascript中的对象拷贝，首先我们想到的是Object.assign()

JSON.parse(JSON.stringify()),还有ES6的展开操作符[...]

因为在js中=运算符 对于对象来说，不能创建副本，只是对该对象的引用

运算符

VAR x = {
  a: 1,  b: 2,}
    ;
    y = x;
    x.a = 10;
    console.LOG(x);
 //{
a:10, b:2}
    console.log(y);
 //{
a:10, b:2}
    

所以在进行对象操作时，运算符等于号（=）不可取

Object.assign()

var x = {
  a: 1,  b: 2,}
    ;
y = Object.assign({
}
    , x);
    x.a = 10;
    console.log(x);
 //{
a:10, b:2}
    console.log(y);
 //{
a:1, b:2}
    

初看，不会发现异常，因为所要的就是我们所要的结果，把对象结构弄再稍微复杂些再看

var x = {
  a: 1,  b: 2,  c: {
    d: 3,  }
,}
    ;
y = Object.assign({
}
    , x);
    x.a = 5;
    console.log(x);
 //{
a:5, b:2, c:{
d:3}
}
    console.log(y);
 //{
a:5, b:2, c:{
d:3}
}
    x.c.d = 10;
    console.log(x);
 //{
a:5, b:2, c:{
d:10}
}
    console.log(y);
 //{
a:5, b:2, c:{
d:10}
}
    

此时就发现坑了，那么已经证明了Object.assign()只是实现了对象的浅拷贝

Object.assign()还需要注意的一点是，原型链上属性的不可枚举对象是无法复制的，看一下代码：

var x = {
  a: 1,}
    ;
var y = Object.create(x, {
  b: {
    value: 2,  }
,  c: {
    value: 3,    enumerable: true,  }
,}
    );
var z = Object.assign({
}
    , y);
    console.log(z);
 //{
c:3}
    

拿到z的值很让人意外，因为x是y的原型链，所以x不会被复制

属性b是不可枚举属性，也不会被复制

只有c具有可枚举描述，他可以被枚举，所以才能被复制

以上的坑也可以很好的被解决，且往下看：

深拷贝JSON.parse(JSON.stringify())

解决浅拷贝的坑

var x = {
  a: 1,  b: 2,  c: {
    d: 3,  }
,}
    ;
    y = JSON.parse(JSON.stringify(x));
    x.a = 5;
    x.c.d = 10;
    console.log(x);
 //{
a:5, b:2, c:{
d:10}
}
    console.log(y);
 //{
a:1, b:2, c:{
d:3}
}
    

当然普通的对象，此种复制方式已经是基本是完美了，那么他的坑在哪里呢

var x = {
  a: 1,  b: function b() {
        return "2";
  }
,}
    ;
    y = JSON.parse(JSON.stringify(x));
z = Object.assign({
}
    , x);
    console.log(y);
 //{
a:1}
    console.log(z);
 //{
a:1, b:function b(){
return '2'}
}
    

从结果看来，Object.assign()可以复制方法，JSON.parse(JSON.stringify())不可以

再来看第第二个坑：

var x = {
  a: 1,  b: {
    c: 2,    d: 3,  }
,}
    ;
    x.c = x.b;
    x.d = x.a;
    x.b.c = x.c;
    x.b.d = x.d;
    var y = JSON.parse(JSON.stringify(x));
    console.log(x);
    /*Uncaught TyPEError: Converting circular structure to JSON    at JSON.stringify (anonymous>
    )    at anonymous>
    :8:25*/

报错了，其结果表明JSON.parse(JSON.stringify()),不能拷贝循环引用对象

再来看看Object.assign()

var x = {
  a: 1,  b: {
    c: 2,    d: 3,  }
,}
    ;
    x.c = x.b;
    x.d = x.a;
    x.b.c = x.c;
    x.b.d = x.d;
var y = Object.assign({
}
    , x);
    console.log(x);
/*[object Object]{
a:1, b:[object, Object], d:[object, Object], d:1}
    */

使用展开操作符[... ]

对象字面量的展开操作符目前是ecmascript的第 3 阶段提案，拷贝对象更加简单了

var x = [  "a",  "b",  "c",  "d",  {
    e: 1,  }
    ,];
    var y = [...x];
    console.log(y);
 //['a', 'b', 'c', 'd', {
'e':1}
]var m = {
  a: 1,  b: 2,  c: ["d", "e"],}
    ;
var n = {
  ...m,}
    ;
    console.log(n);
 //{
a:1, b:2, c:['d', 'e']}
    

需要注意的是展开操作符也是浅拷贝。那么复制对象这厮真的这么难搞吗？

自己造轮子：

function copy(x) {
  var y = {
}
    ;
  for (m in x) {
        y[m] = x[m];
  }
      return y;
}
var o = {
  a: 1,  b: 2,  c: {
    d: 3,    e: 4,  }
,}
    ;
    var p = copy(o);
    

有人说这么干应该没多大问题了吧。那么只能呵呵了，继续走

var x = {
}
    ;
Object.definePRoperty(x, "m", {
  value: 5,  wrITable: false,}
    );
    console.log(x.m);
     //5x.m = 25;
     //这一步没报错，但是也没执行console.log(x.m);
     //5

那么这样一来，展开操作符复制对象到这里也会遇到坑。

到处都是坑，防不胜防....我写到这估计还有许多坑都没完全列出来

之后再写吧

[完]

推荐学习：JavaScript视频教程

以上就是深入解析JavaScript中对象拷贝方法（附代码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！