js中 = 等号赋值的问题,Js中对象的引用问题,深浅拷贝

js "=" 赋值符号

在js中 “=”对于基本数据类型是赋值符号,比较(== 或 ===)的时候是值;对于引用数据类型-对象来说 是地址引用,比较的时候是比较的地址。

  • 基本数据类型和引用数据类型的比较
let a = 3;
let b = a;

console.log( a==b )//true

let ob1 = {}
let ob2 = {};

console.log(ob1==ob2); //flase
  1. a和b是字符串,比较的是值,完全相等,
  2. c和d是对象,比较的是引用地址,c和d都是一个新对象,方别指向不同的地址,所以不相等,

 如图:我们用一张图来看

js中 = 等号赋值的问题,Js中对象的引用问题,深浅拷贝_第1张图片

js中引用数据类型的引用

应用数据类型的引用是对地址的应用,两个引用数据类型a  b ,令a = b;再对 b的属性操作之后对比就可以知道了。

let a = { z: 5, y: 9 }
let b = a
b.z = 6
delete b.y
b.x = 8 
console.log(a) // {z: 6, x: 8}
console.log(a === b) // true

1、a 是对象,b =a;把a对象的地址赋值给了b;

2、a,b同指向一个对象,修改这个对象。a,b都会改变;

js中 = 等号赋值的问题,Js中对象的引用问题,深浅拷贝_第2张图片

两个引用数据类型a b;令a=b, 再给b赋新值之后再比较 

let a ={
age:18;
}

let b = a;

b = {z:1};

console.log(a ==b);//false

1、b= a ,把a的地址赋给了b,此时a与b指向同一个对象。

2、b = {z:1} , b 指向的对象地址被更改为{z:1},切断了与a对象的联系;

js中 = 等号赋值的问题,Js中对象的引用问题,深浅拷贝_第3张图片

 

浅拷贝:就是引用了一个对象的地址(引用数据类型的地址); 所以自身的改变也会引起被赋值的属性值改变。

深拷贝:就是另外开创了一个对象地址,并复制了复制对象的所有属性。

小结:

  1. 只操作(修改,删除,添加)对象的属性,不会与之前对象断开连接
  2. 直接操作对象本身,也就是最外层,会和之前的对象断开连接;
  • let a = { z: 5, y: {x: 8}, w: {r: 10} }
    let b = {...a}
    b.z = 6
    b.y.x = 9
    b.w = {r: 11}
    console.log(a) // { z: 5, y: {x: 9}, w: {r: 10}}
    console.log(a.y === b.y) // true
    console.log(a.w === b.w) // false
    console.log(a === b) // false
    

    js中 = 等号赋值的问题,Js中对象的引用问题,深浅拷贝_第4张图片

     

你可能感兴趣的:(javascript,前端,html)