js数组和对象相等判断拷贝详解(结合几个现象讲解引用数据类型的趣事)

Posted 2021-01-11 pengfei-nie

序言

　　最近遇到几个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使用修改的时候，经常会遇到引用数据类型带来的问题，不经意间就出问题了，希望这些能帮到大家，若有错误，望指出！！！