JS赋值、浅拷贝和深拷贝(数组和对象的深浅拷贝(2)

深拷贝:在计算机中开辟了一块新的内存地址用于存放复制的对象。(对属性中所有引用类型的值,遍历到是基本类型的值为止。 )

实现方式

1、JSON.parse(JSON.stringify())

let arr = [1, 3, {    username: ' kobe' }]; let arr4 = JSON.parse(JSON.stringify(arr)); arr4[2].username = 'duncan'; console.log(arr, arr4)

JS赋值、浅拷贝和深拷贝(数组和对象的深浅拷贝

原理: 用JSON.stringify将对象转成JSON字符串,再用JSON.parse()把字符串解析成对象,一去一来,新的对象产生了,而且对象会开辟新的栈,实现深拷贝。

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数。

let arr = [1, 3, {    username: ' kobe' },function(){}]; let arr4 = JSON.parse(JSON.stringify(arr)); arr4[2].username = 'duncan'; console.log(arr, arr4)

JS赋值、浅拷贝和深拷贝(数组和对象的深浅拷贝

这是因为 JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,不能接受函数。

2、手写递归方法

递归方法实现深度克隆原理:遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝。

 //定义检测数据类型的功能函数    function checkedType(target) {      return Object.prototype.toString.call(target).slice(8, -1)    }    //实现深度克隆---对象/数组    function clone(target) {      //判断拷贝的数据类型      //初始化变量result 成为最终克隆的数据      let result, targetType = checkedType(target)      if (targetType === 'object') {        result = {}      } else if (targetType === 'Array') {        result = []      } else {        return target      }      //遍历目标数据      for (let i in target) {        //获取遍历数据结构的每一项值。        let value = target[i]        //判断目标结构里的每一值是否存在对象/数组        if (checkedType(value) === 'Object' ||          checkedType(value) === 'Array') { //对象/数组里嵌套了对象/数组          //继续遍历获取到value值          result[i] = clone(value)        } else { //获取到value值是基本的数据类型或者是函数。          result[i] = value;        }      }      return result    }

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《javascript面向对象入门教程》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/c7bd72ea02c94f3189caf8a78686bfc4.html