JavaScript数组和对象赋值(根源上解决修改新对象数组导致改变了原数组对象的问题)

赋值和赋址

不同于基本类型是把值直接赋给另一个变量,复杂类型的赋值是把指针直接赋给另一个对象,应该叫做赋址,改变新对象的值,也会改变原对象的值,因为他们都是指向堆内存中的同一个对象数据,在栈内存中,新对象的新增只是增加了一个指针,JS引擎只能在栈内存中工作,在JS引擎看来对应的都是一个堆内存地址。

浅拷贝

1)定义:
浅拷贝只会把对象的各个属性进行依次复制,如果遇到属性的值是对象,此时复制的依然是地址,不会深入递归复制,虽然此时修改新对象的基本类型属性,不会改变原对象,但是改变复杂类型属性,还是会改变原对象的属性。

let a = {
  name: "Tom",
  obj: {
    age: 19
  }
}
let b = Object.assign({}, a);
console.dir(b); //输出:{name: "Tom",obj: {age: 19}}
a.name = "Amy";
a.obj.age = 20;
console.dir(a); //输出:{name: "Amy",obj: {age: 20}}
console.dir(b); //输出:{name: "Tom",obj: {age: 20}}

2)方法:

newObj = Object.assign({}, oldObj);

实现对象的浅拷贝。注意newObj = Object.assign(target, oldObj) 此时newObj === targettarget是一个对象,Object.assign将一个或多个源对象分配到目标对象上,这是ES6的方法。

newArray = oldArray.slice(0); 

实现数组的浅拷贝。注意newArray = oldArray.slice(start,end) 中end可以省略,从原数组中提取部分到新数组。

newArray = [].concat(oldArray); 

实现数组的浅拷贝。注意concat是连接数组。

深拷贝

1)定义:
会对对象的属性进行递归复制,将对象的对象属性也递归复制,直到全部属性复制完成。
2)方法:

newObj = JSON.parse(JSON.stringify(oldObj)); 

实现对象的深拷贝。将需要深拷贝的对象序列化为一个 JSON 字符串,然后根据这个字符串解析出一个结构和值完全一样的新对象,可以间接实现深拷贝。

newObj = $.extend(true, [], oldObj); 

实现数组和对象的深拷贝。true表示深拷贝,省略时默认为false,第二个参数根据是数组还是对象来改变。因为这个方法是jQuery的方法,所以可以自己考虑写一个深拷贝函数。

深拷贝函数

//深拷贝函数
function extend(source) {
  var target = Array.isArray(source) ? [] : {};
  for (var key in source) {
      var isObject = Object.prototype.toString.call(source[key]) === "[object Object]";
      if (isObject || Array.isArray(source[key])) {
          //如果是对象或数组,继续调用 extend 函数
          target[key] = extend(source[key]);
      } else {
          //递归到基本值或除了对象或数组之外的引用值,直接赋值
          target[key] = source[key];
      }
  }
  return target;
}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值