js赋值、浅拷贝、深拷贝的区别

---

前言

比较容易搞混的一个知识点

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、赋值

  <script>
    var num = 123
    var person = { name: '乔丹' }
    // 赋值，不是浅拷贝
    // 浅拷贝必须要创建一个新的对象
    var person1 = person
    person1.name = '科比'
    
    console.log(person.name); // 科比
    console.log(person1.name); // 科比
  </script>

        

二、浅拷贝

  <script>
    var num = 123
    var person = { name: '乔丹', hobby: ['ball', 'play'] }
    // 浅拷贝会创建一个新的对象 
    // 拷贝值（如果属性是一般数据类型 拷贝的就是基本类型的值，
    // 如果属性是引用数据类型，拷贝的就是内存的地址
    function shallowClone(source) {
      var newObj = {}
      for (var i in source) {
        // 拷贝的时候一般忽略掉继承的
        if (source.hasOwnProperty(i)) {
          newObj[i] = source[i]
        }
      }
      return newObj
    }
    var person1 = shallowClone(person)
    person1.name = '科比'
    person1.hobby[0] = 'apple'
    console.log(person.name); // 乔丹
    console.log(person1.name); // 科比
    console.log(person.hobby); // ['apple', 'play']
    console.log(person1.hobby); // ['apple', 'play']
  </script>

三、深拷贝

  <script>
    // 深拷贝，创建一个新对象，将对象从内存中完整的拷贝出来一份给该对象
    // 并从堆内存中开辟一个全新的空间存放新对象
    var person = { name: '乔丹', hobby: ['篮球', '棒球'] }
    function deepClone(source) {
      return JSON.parse(JSON.stringify(source))
    }
    var person1 = deepClone(person)
    person1.hobby[0] = '足球'
    console.log(person.hobby); // ['篮球', '棒球']
    console.log(person1.hobby); // ['足球', '棒球']
    console.log(person1 === person); // false
    console.log(person1.hobby === person.hobby); // false
  </script>

---

总结

仅仅只是稍微了解了一下赋值、深浅拷贝的区别，具体详情请可以看(12条消息) JavaScript深拷贝看这篇就行了！（实现完美的ES6+版本）_码飞_CC的博客-CSDN博客