js对象赋值问题(对象赋值影响原对象、对象赋值后原对象值随之变化)

46 篇文章 1 订阅
29 篇文章 0 订阅

问题:

一个对象赋值给另一个对象后,新对象的值更改原对象的参数值随之变化(即改变新对象的值会影响原对象值)

直接用 的方式把一个对象赋值给另一个对象,会导致修改新对象时,原对象也发生变化

let obj1 = {'name': '小红'};
let obj2 = obj1;
obj2.name = '小明';
console.log(obj1.name); //'小明'

原因:

JavaScript 中对象的赋值是默认引用赋值的(两个对象指向相同的内存地址),所以修改另一个对象时,即修改了内存地址里的对象,其他关联对象也会改变  

解决方法(转换类型法): JSON.parse(JSON.stringify(obj))

obj2=JSON.parse(JSON.stringify(obj1))

 注:

普通的对象也可以进行深拷贝,但是!!! 当对象内容项为number,string.boolean的时候,是没有什么问题的。但是,如果对象内容项为undefined,null,Date,RegExp,function,error的时候。使用JSON.stringify()进行拷贝就会出问题了。

解决方法(es6之Object.assign()法):obj2=Object.assign({},obj1)

 注:

Object.assign()方法有不足之处,Object.assign()只是让对象里第一层的数据没有了关联性(即修改obj2.name时obj1.name不会发生变化),但是对象内的对象则跟被复制的对象有着关联性的(即当修改更深层的obj2.name的值时,原对象obj1.name也跟着发生了变化)

 解决方法(使用递归的方式进行对象(数组)的深拷贝)

//已封装的深拷贝函数
function deepClone(obj = {}, hashMap = new WeakMap()) {
  //变量先置空
  let objClone = null,
    hashKey = hashMap.get(obj);
  if (obj instanceof RegExp) return new RegExp(obj); //正则表达式的情况
  if (obj instanceof Date) return new Date(obj); //日期对象的情况
  if (hashKey) return hashKey;
  //判断是否需要继续进行递归
  if (typeof obj == "object" && obj !== null) {
    objClone = obj instanceof Array ? [] : {};
    hashMap.set(obj, objClone);
    //进行下一层递归克隆
    for (const i in obj) {
      if (obj.hasOwnProperty(i)) {
        objClone[i] = deepClone(obj[i], hashMap);
      }
    }
  } else {
    //如果不是对象直接赋值
    objClone = obj;
  }

  return objClone;
}
//模拟数据
let obj = {
  name: "xm",
  birth: new Date(),
  desc: null,
  reg: /^123$/,
  ss: [1, 2, 3],
  fn: function () {
    console.log("123");
  },
};
//使用方式
let obj2 = deepClone(obj);
obj.fn() //123
obj2.fn() // 123
console.log(obj, obj2,'深拷贝');

所以推荐使用深拷贝函数这种方法

解决方法(使用自定义工具库之深克隆):创建utils.js

/*
 * 获取所有私有属性,包含Symbol私有属性
 */
const getOwnProperties = obj => {
  if (obj === null) return []
  return [
    ...Object.keys(obj), // 同 ...Object.getOwnPropertyNames(obj) 获取实例的私有属性
    ...Object.getOwnPropertySymbols(obj)
  ]
}

/*
 * 浅克隆
 */
const shallowClone = obj => {
  let type = toType(obj)
  if (/^(string|number|boolean|null|undefined|symbol|bigint)$/.test(type)) return obj
  if (/^function$/.test(type)) {
    return function proxy() {
      return obj()
    }
  }
  if (/^date|regexp$/.test(type)) return new obj.constructor(obj)
  if (/^error$/.test(type)) return new obj.constructor(obj.message)
  // 只处理数组(最后返回的是数组)和对象(普通对象/类数组对象等=》最后返回的都是普通对象)
  let keys = getOwnProperties(obj),
    clone = {}
  //clone = new obj.constructor(); // 类数组的时候会有问题
  Array.isArray(obj) ? (clone = []) : null
  keys.forEach(key => {
    clone[key] = obj[key]
  })
  return clone
}

/*
 * 深克隆
 */
const deepClone = (obj, cache = new Set()) => {
  // Set是一种存储结构,值的集合,保存非重复项,即Set中的元素是唯一的
  // 只有数组和对象才处理深拷贝,其余的情况直接按照浅克隆处理即可
  let type = toType(obj)
  if (!/^(array|object)$/.test(type)) return shallowClone(obj)

  // 避免自己套用自己导致无限递归
  if (cache.has(obj)) return shallowClone(obj)
  cache.add(obj)

  let keys = getOwnProperties(obj),
    clone = {}
  type === 'array' ? (clone = []) : null
  keys.forEach(key => {
    clone[key] = deepClone(obj[key], cache)
  })
  return clone
}

/*
 * 实现两个对象的深合并(Object.assign(obj1,obj2)为浅合并)
 *    + obj1对象 obj2对象 -> 依次遍历obj2,把obj2中的每一项替换obj1中的每一项
 *    + obj1对象 obj2不是对象 -> 不进行任何处理
 *    + obj1不是对象 obj2对象 -> obj2直接替换obj1
 *    + obj1不是对象 obj2也不是对象 -> obj2直接替换obj1
 */
const merge = (obj1, obj2) => {
  let isPlain1 = isPlainObject(obj1),
    isPlain2 = isPlainObject(obj2)
  if (!isPlain1) return obj2
  if (!isPlain2) return obj1
  // 遍历obj2中的每一项,让其替换obj1中的每一项
  let obj2Arr = getOwnProperties(obj2)
  obj2Arr.forEach(key => {
    obj1[key] = merge(obj1[key], obj2[key])
  })
  return obj1
}

//===========================================================

// 数据类型检测通用方法
let getProto = Object.getPrototypeOf, // 获取实例的原型对象
  class2type = {},
  toString = class2type.toString, // 取Object.prototype.toString
  hasOwn = class2type.hasOwnProperty, // 取Object.prototype.hasOwnProperty
  fnToString = hasOwn.toString, // 取Function.prototype.toString 转换字符串用
  ObjectFunctionString = fnToString.call(Object) // 同Object.toString() 把Object函数转成字符串 "function Object() {[native code]}"

/*
 * 循环数据中的每一项:建立数据类型检测的映射表
 *    + [object String]/[object Number]/[object Boolean]都是为了处理基于构造函数创建的基本数据值的引用类型值,最后期许检测出来的结果依然是"string/number/boolean"
 *    + typeof new Number(10) => "object"
 *    + toString.call(new Number(10)) => "[object Number]"
 */
let assembleKeys = [
  'String',
  'Number',
  'Boolean',
  'Symbol',
  'Function',
  'Array',
  'Object',
  'Date',
  'RegExp',
  'Error',
  'GeneratorFunction'
]
assembleKeys.forEach(name => (class2type[`[object ${name}]`] = name.toLowerCase()))

/*
 * 检测数据类型的公共方法
 */
const toType = obj => {
  // '=='判断null或者undefined,+""转成字符串 "null"或者"undefined"
  if (obj == null) return obj + ''
  // 如果是引用数据类型(包含:new Number(10)这种),则基于Object.prototype.toString检测(拿检测的结果到之前建立的映射表中去匹配查找,找到对象的小写数据类型,找不到则返回"object");而基本数据类型,之前排除了null/undefined,剩下的基于typof即可解决
  return typeof obj === 'object' || typeof obj === 'function'
    ? class2type[toString.call(obj)] || 'object'
    : typeof obj
}

/*
 * 检测是否为一个纯粹对象
 */
const isPlainObject = obj => {
  let proto = null,
    Ctor,
    type = toType(obj);
  if (obj === undefined) return false
  // 不存在或者检测数据类型的结果都不是object,则一定不是纯粹对象
  if (!obj || type !== 'object') return false;
  // 不存在原型的情况:Object.create(null),相当于创建空对象{}
  proto = getProto(obj)
  if (!proto) return true;
  // 获取当前值原型对象上的constructor(即获取它的构造函数)
  Ctor = hasOwn.call(proto, 'constructor') && proto.constructor;
  // 有构造函数,并且构造函数需要直接是Object才可以(这样排除了NodeList等子类/自定义类的实例)
  // ObjectFunctionString === fnToString.call(Object)
  return typeof Ctor === 'function' && fnToString.call(Ctor) === ObjectFunctionString
}


export default {
  getOwnProperties,
  shallowClone,
  deepClone,
  toType,
  isPlainObject,
  merge
}

工具库使用方法

import utils from '@/libs/utils'  // vue文件引入utils.js

obj2 = utils.deepClone(obj1)  // deepClone() 深克隆方法

  • 4
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值