序言

  最近遇到几个js引用数据类型造成的bug,今天结合bug详细分析一下,避免以后再犯,也希望能帮大家提个醒,强化js基本功。

目录

  1、浅拷贝、深拷贝,解决变量赋值相互影响问题 

  2、判断2个数组、对象是否相等

现象一

var a=1;
var b=a;
b=2;
console.log(a)      //1
console.log(b)      //2


var obj1 = {
      id: 1,
      info: {
            name: '张三'
      }
    };
var obj2 = obj1; obj2.id = 2; obj2.info.name = '李四' console.log(obj1)   // {id:2, info:{name: '李四'}}
console.log(obj2)         // {id:2, info:{name: '李四'}}

  1. 现象分析: 

    数组、对象都是用用数据类型。直接 = 赋值,或者 浅拷贝,这些变量实质上共享一个存储空间的数据。当你修改其中一个对象变量时,
  另一个也会变。 

2. 深浅拷贝
     浅拷贝: 简单说,就是新的变量与原变量公用一个指针,即公用同一份存储空间的数据。改变a,b也会变
   深拷贝: 简单说就是把数据全部拔下来,重新存一下。a,b之间没有任何牵连

   浅析:
  1. 这涉及到计算机原理的一些东西。js基本数据类型存在 栈内存 中, 当 a=b ,相当于新开辟一个存储空间,所以互不影响。
  2. 引用数据类型,名 存在栈内存中,值存在堆内存中,栈内存会额外存一个指向堆内存的指针,其实就是 堆内存地址。
  3. 我们对象 a=b 时,仅仅将名,即 栈内存中的数据复制了出来,但是栈内存的地址并没有变,所以a,b值会保持一致,互相影响。


3. 几个实现对象拷贝的方法
  let obj1 = { name: 11, age: 11, ope: { say: 1, get: 2 }}
  let obj2 = { }
  (1) let obj2 = { ...obj1 } let obj2 = { ...obj1 ,ope:22}
  这个拷贝不彻底,他可以深拷贝基础数据类型,name 等修改不会影响,但是数组、对象不行,ope里面的数据依旧相互影响,但是我们
  可以将这些引用数据类型给修改掉,这样依旧可以实现互不影响

  (2) let obj2 = Object.assign({ },obj1,...)
  原理是一样的,也是只对基本数据类型管用,这个灵活度,还不如上面那个

  (3) 通过 json 字符串、对象转换的方式
  obj2 = JSON.stringify(obj1) 先转 字符串
  obj2 = JSON.parse(obj2) 再转对象

而且转成字符串以后,还方便 网络传输 、 存储。
  


现象二
     var arr1 = [1,2,3];
        var arr2 = [1,2,3];
        var obj1 = {id:1,name:"张三"};
        var obj1 = {id:'1',name:"张三"};
        var arr3 = arr1;
        var obj3 = obj1;

        console.log(arr1 === arr2);//false
        console.log(obj1 === obj2);//false
        console.log(arr3 === arr1);//true
        console.log(obj3 === obj1);//true

  

  1. 现象分析:       

    因为 数组、对象是引用数据类型,变量存储的是地址,真正是数据在地址指针指向的存储单元,所以arr1、arr2的数据是放在不同存储单元里的。直接比较,地址肯定是不同的。而赋值操作 arr3 = arr1 是将地址指针赋值,数组数据还是只放在一个存储单元里面,arr1、arr2 都存储了这个地址,所以直接比较是相等的

2. 如何实现 数组 对象的相等判断
  方法一   转换为字符串再比较
  JSON.stringify(a1) == JSON.stringify(a2)
  或
  a1.toString() == a2.toString()

  问题:存在 1 和 '1' ,认为是相同的情况,只能根据自己情况来了
  方法二
function equalJudgment(data1,data2) {
              var result = true
              if (data1 && data2 && data1.constructor === Array && data2.constructor === Array) {
                if (data1.length !== data2.length) {
                  result = false
                } else {
                  for (var i=0;i<data1.length;i++) {
                    if (data1[i].constructor === Array && data2[i].constructor === Array){
                      if (!equalJudgment(data1[i], data2[i])) {
                        result = false
                        return result
                      }
                    } else if (data1[i].constructor === Object && data2[i].constructor === Object){
                      if (!equalJudgment(data1[i], data2[i])) {
                        result = false
                        return result
                      }
                    } else {
                      if (data1[i] !== data2[i]){
                        result = false
                        return result
                      }
                    }
                  }
                }
              } else if (data1 && data2 && data1.constructor === Object && data2.constructor === Object) {
                var key1 = Object.getOwnPropertyNames(data1)
                var key2 = Object.getOwnPropertyNames(data2)
                if (key1.length !== key2.length) {
                  result = false
                } else {
                  for (var i=0;i<key1.length;i++) {
                    if (key2.indexOf(key1[i]) === -1) {
                      result = false
                      return result
                    } else if (data1[key1[i]].constructor === Array && data2[key1[i]].constructor === Array) {
                      if (!equalJudgment(data1[key1[i]], data2[key2[i]])) {
                        result = false
                        return result
                      }
                    } else if (data1[key1[i]].constructor === Object && data2[key1[i]].constructor === Object) {
                      if (!equalJudgment(data1[key1[i]], data2[key1[i]])) {
                        result = false
                        return result
                      }
                    }else {
                      if (data1[key1[i]] !== data2[key1[i]]){
                        result = false
                        return result
                      }
                    }
                  }
                }
              } else {
                result = 'Input error!'
              }
              return result
            }

  

  以上 js 函数是我自己写的,经过测试没有问题 ,网上有很多实现的方法,但是大多都是无法解析多层数组、对象嵌套的情况 (说实话没啥卵用),但是个人觉得这个方法写的有些啰嗦,抛砖引玉,有更好的方法希望大家不吝分享。   ps:顺便帮我测测bug,虽然各种情况都试过,应该是没问题

总结

  上述的2个现象在码代码过程中应该会经常遇到,特别是处理像  react、Vue 生命周期函数的时候、state使用修改的时候,经常会遇到引用数据类型带来的问题,不经意间就出问题了,希望这些能帮到大家,若有错误,望指出!!!

10-10 16:18