ES6 Object.assign() 拷贝问题

WEB菜鸟
  • 276
  1. 类似以下格式怎么用Object.assign()一次完全拷贝?仅仅拷贝外层的生效的只有外层,里面的不拷贝, 2改变里面的数组1也是会变的;
  2. let arr1 = [
       {
         name: '小明',
         age: 18,
         arrs: [
           {color: 'red', num: 18}
         ]
       },
     ];
     let arr2 = arr1.map(item => Object.assign({},item)).concat();
     arr2[0].name = '菜鸟';
     arr2[0].arrs[0].color = 'yellow';
     console.log(arr1);
     console.log(arr2);

回复
阅读 942
2 个回答
✓ 已被采纳

深拷贝?网上很多方法,搜一下。最简单的如果你的数据没有json不支持的数据类型的话可以用JSON.parse(JSON.stringify(data))

WEB菜鸟
  • 276

其实是一个深拷贝刚才朋友那了解到了一个工具lodashjs:

1. 安装: npm i --save lodash;
2. 使用: var _ = require('lodash');
let arr1 = [
      {
        name: '小明',
        age: 18,
        arrs: [
          {color: 'red', num: 18}
        ]
      },
    ];
    var _ = require('lodash');
    let arr2 = _.cloneDeep(arr1);
    arr2[0].name = '菜鸟';
    arr2[0].arrs[0].color = 'yellow';
    console.log(arr1);
    console.log(arr2);

第二种不用工具:

deepClone(data) {
  const type = this.judgeType(data);
  let obj;
  if (type === 'array') {
    obj = [];
  } else if (type === 'object') {
    obj = {};
  } else {
// 不再具有下一层次
    return data;
  }
  if (type === 'array') {
    // eslint-disable-next-line
    for (let i = 0, len = data.length; i < len; i++) {
      obj.push(this.deepClone(data[i]));
    }
  } else if (type === 'object') {
    // 对原型上的方法也拷贝了....
    // eslint-disable-next-line
    for (const key in data) {
      obj[key] = this.deepClone(data[key]);
    }
  }
  return obj;
},

judgeType(obj) {
  // tostring会返回对应不同的标签的构造函数
  const toString = Object.prototype.toString;
  const map = {
    '[object Boolean]': 'boolean',
    '[object Number]': 'number',
    '[object String]': 'string',
    '[object Function]': 'function',
    '[object Array]': 'array',
    '[object Date]': 'date',
    '[object RegExp]': 'regExp',
    '[object Undefined]': 'undefined',
    '[object Null]': 'null',
    '[object Object]': 'object',
  };
  if (obj instanceof Element) {
    return 'element';
  }
  return map[toString.call(obj)];
},
宣传栏