对象的深拷贝

1. ES5 来实现对象的深拷贝

对象的深拷贝_第1张图片

  • 详细注释
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
    var obj = {
     
      name: 'zhangbing',
      age: 10,
      info: {
     province: '湖北省', university: 'CUC', classNo: 3, hobbies: ['唱歌', '读书', '篮球', {
     a: 1}]}

    }

    // params:
    // 	 origin: 待拷贝的对象
    // 	 target : 拷贝后产生的新对象 
    function deepClone(origin, target) {
     
      var tar = target || {
     } // target 参数如果没传的话默认为空对象
      var toStr = Object.prototype.toString 
      var arrType = '[object Array]' // Object.prototype.toString([]) === '[object Array]'

      // 遍历待对象的每一项
      for (var k in origin) {
     
        // 首先判断属性是否位于对象本身上,不拷贝原型上的属性
        if (origin.hasOwnProperty(k)) {
     
          // 遍历的项如果为对象且不为null(因为 typeof null === ’object')
          if (typeof origin[k] === 'object' && origin[k] !== null) {
     
            // 遍历的项如果为数字总用【】来包裹其进一步拷贝的内容
            // 否则遍历的项为对象,则使用{}来包裹其进一步拷贝的内容
            tar[k] = toStr.call(origin[k]) === arrType ? [] : {
     }
            // 递归进行内层的深拷贝
            deepClone(origin[k], tar[k])
          } else {
     
            // 如果遍历项为值类型,直接赋值复制
            tar[k] = origin[k]
          }
        }
      }
      // 返回深拷贝得到的新对象
      return tar
    }

    // 测试深拷贝代码的效果

    const newObj = deepClone(obj, {
     })
    newObj.info.hobbies[3].a = 3
    console.log(obj)
    console.log(newObj)
  </script>
</body>
</html>
  • 控制台输出结果:

对象的深拷贝_第2张图片

你可能感兴趣的:(JS面试,js,object,prototype,深拷贝,面试)