精华内容
下载资源
问答
  • js 如何实现深拷贝

    2021-01-04 16:43:33
    当数组或者对象中每一项的值都是基本数据类型时,可以通过简单的方法实现深拷贝, 数组: array.slice() array.concat es6 …解构 对象:object.assign() es6 …解构 但是当为多层嵌套的数组或者对象时,以上的方法...

    当数组或者对象中每一项的值都是基本数据类型时,可以通过简单的方法实现深拷贝,
    数组: array.slice() array.concat es6 …解构
    对象:object.assign() es6 …解构

    但是当为多层嵌套的数组或者对象时,以上的方法均会失效了

    简单的大招至上,可以通过json.stringly json.parse 进行简单粗暴的深拷贝
    还可以手写递归进行深拷贝

    const deepClone = (data) => {
    if (typeof data !== "object") return;
    const new_data = Array.isArray(data) ? [] : {};
    for (let i in data) {
    new_data[i] = typeof data[i] === "object" ? deepClone(data[i]) : data[i];
    }
    return new_data;
    };
    

    还可以引用lodash中的方法,_cloneDeep() 进行深拷贝

    展开全文
  • 深拷贝与浅拷贝  浅拷贝:只是复制第一层属性;浅拷贝其实只是引用的拷贝,两者还是指向内存中的同一个地址。  深拷贝:通过递归的方式复制所有的属性;深拷贝就是两者指向不同的内存地址,是真正意义上的拷贝。...

    深拷贝与浅拷贝

      浅拷贝:只是复制第一层属性;浅拷贝其实只是引用的拷贝,两者还是指向内存中的同一个地址

      深拷贝:通过递归的方式复制所有的属性;深拷贝就是两者指向不同的内存地址,是真正意义上的拷贝

     

    实现浅拷贝的方法

    • 通过es6的解构方式进行拷贝
    let newArr = [...arr]
    
    • 通过es6引入的新方法进行拷贝【这里是将target后的多个对象全部合并到target对象中,并返回一个新的完整对象】
    let newobj = Object.assign(target, ...others) 
    

      

    实现深拷贝的方法

    • 通过递归的方式进行拷贝
    function deepCopy(target,source){
        for(let index in source){
            if(typeof source[index] === "object"){
                target[index] = {};
                deepCopy(target[index],source[index])
            }else{
                target[index] = source[index];
            }
        }
    }
    let b = {a:1,d:{b:1}};
    let a = {};
    deepCopy(a,b);
     a.d.b = 4;
    console.log(b)
    
    • 通过JSON的方式进行拷贝
    let newObj = JSON.parse(JSON.stringify(obj)) 
    
    • 通过jQuery的extend方法实现深拷贝
    var array = [1,2,3,4];
    var newArray = $.extend(true,[],array);
    
    • Object.assign()拷贝

      当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝。

    • lodash函数库实现深拷贝

      lodash很热门的函数库,提供了 lodash.cloneDeep()实现深拷贝。

     

    转载于:https://www.cnblogs.com/belongs-to-qinghua/p/11117041.html

    展开全文
  • 参考:js浅拷贝及深拷贝的几种方法 1、浅拷贝 (1) Object.assign() 参考:Object.assign()用法讲解 var obj1 = {a: 1, b: 2}; var obj2 = Object.assign({}, obj1); (2) 解构赋值 var obj1 = {a: 1, b: 2}; var obj...

    参考:js浅拷贝及深拷贝的几种方法

    1、浅拷贝

    (1) Object.assign()

    参考:Object.assign()用法讲解

    var obj1 = {a: 1, b: 2};
    var obj2 = Object.assign({}, obj1);
    
    (2) 解构赋值
    var obj1 = {a: 1, b: 2};
    var obj2 = {...obj1};
    

    浅拷贝实现原理:

    function shallowCopy(obj) {
      var target = {};
      for (let i in obj) {
        if (obj.hasOwnproperty(i)) {
          target[i] = obj[i];
        }
      }
      return target;
    }
    

    2、深拷贝

    (1) 利用JSON.parse 和JSON.stringfy
    var obj1 = {
      name: 'li',
      hobit: ['摄影', '羽毛球']
    }
    var obj2 = JSON.parse(JSON.stringify(obj1));
    obj2.hobit.push('游泳');
    console.log(obj1); //{ name: 'li', hobit: [ '摄影', '羽毛球' ] }
    console.log(obj2); //{ name: 'li', hobit: [ '摄影', '羽毛球', '游泳' ] }
    
    (2) 利用递归来实现

    使用JSON.parse 和JSON.stringfy也会有很多限制:参考:关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑

    1. 如果obj里面有时间对象,则JSON.stringify后再JSON.parse的结果,时间将只是字符串的形式。而不是时间对象;
    2. 如果obj里有RegExp、Error对象,则序列化的结果将只得到空对象;
    3. 如果obj里有函数,undefined,则序列化的结果会把函数或 undefined丢失;
    4. 如果obj里有NaN、Infinity和-Infinity,则序列化的结果会变成null
    5. JSON.stringify()只能序列化对象的可枚举的自有属性,例如 如果obj中的对象是有构造函数生成的, 则使用JSON.parse(JSON.stringify(obj))深拷贝后,会丢弃对象的constructor;
    6. 如果对象中存在循环引用的情况也无法正确实现深拷贝;

    可通过递归来实现一个深拷贝:

    function deepCopy(obj) {
      if (obj == null)  return obj;
      if (obj instanceof Date) return new Date();
      if (obj instanceof RegExp) return new RegExp(obj);
      if (typeof obj !== 'object') return obj;
      let cloneObj = new obj.constructor();
      for (let i in obj) {
        if (obj.hasOwnproperty(i)) {
          cloneObj[i] = deepCopy(obj[i]);
        }
      }
      return cloneObj;
    }
    
    (3) jQuery的extend
    $.extend( [deep ], target, object1 [, objectN ] )
    
    • deep :表示是否深拷贝,为true为深拷贝,为false,则为浅拷贝
    • target: Object类型 目标对象,其他对象的成员属性将被附加到该对象上
    • object1… objectN : Object类型 第一个以及第N个被合并的对象。
    展开全文
  • 前端拷贝问题

    2019-11-15 15:30:11
    前端拷贝 类型 浅拷贝: 只拷贝一层的拷贝方式,地址拷贝 深拷贝: 值的完全拷贝 浅拷贝实现 ...解构赋值 ...递归实现深拷贝 - 要求: 手写出来 //对象深拷贝 function deepClone(origin,target){...

    前端拷贝

    1. 类型

      • 浅拷贝: 只拷贝一层的拷贝方式,地址拷贝
      • 深拷贝: 值的完全拷贝
    2. 浅拷贝实现

      • 解构赋值
      • Object.assign
      • 引用类型直接赋值
    3. 深拷贝实现

      • JSON.parse / JSON.string [ 序列化 / 反序列化 ]
      • 递归实现深拷贝 - 要求: 手写出来
        //对象深拷贝
          function deepClone(origin,target){
              //target是否存在如果不存在创建空对象
              let tar = target || {},
              //判断是否为引用数据类型
                  toStr = Object.prototype.toString,
                  arrType='[object Array]';
      
              for(let key in origin){
                  //剥离原型链的数据
                  if(origin.hasOwnProperty(key)){
                      //判断是否为引用数据类型 对象或数组
                      if(typeof(origin[key]) === 'object' && origin[key] !== null){
                          if(toStr.call(origin[key]) === arrType ){
                              tar[key] = [];
                          }else{
                              tar[key] = {};
                          }
                          deepClone(origin[key],tar[key]);
                      }else{
                          tar[key] = origin[key];
                      }
                  }
              }
              return tar;
          }
      
      • 第三方
        • loadsh
          • _.cloneDeep()
        • Immutable.js 【 性能最好的 】
        • const _ = require( ‘loadsh’ )

    immutable_demo

    const state = {
    str: ‘MMR’,
    obj: {
    x: 1,
    y: 2
    },
    arr: [1,2,3 ]
    }

    const newState = _.cloneDeep( state ) // 这种方式逐层递归,要遍历每一个节点,是很消耗性能的

    newState.str = “路过的假面骑士MMR”
    newState.obj.x = 1000
    newState.arr[ 0 ] = 2000
    console.log( state )

    /*

    • node.js文件
      • Common.js 规范

    *Map是用来定义Immutable对象

    */

    const { Map } = require(‘immutable’)

    /* Map作用就是可以帮助我们创建一个 Immutable 对象 */

    var obj = { name: ‘MMR’ } // state.name

    const state = Map({ // 它是可用的但是是不可变的
    id: 1,
    name: ‘MMR’,
    obj: {
    x: 1,
    y: 2
    }
    })

    /* 每一次的改变都会生成新的immutable对象 */

    const newState = state.set(‘age’, 20 ) // 新的immutable对象

    // console.log( state === newState ) false

    // console.log( state.get(‘name’) )
    // console.log( newState.get(‘name’) )

    const state2 = newState.set(‘name’,‘路过的假面骑士MMR’)

    console.log( newState.get(‘name’) )
    console.log( state.get(‘name’) )
    console.log( state2.get(‘name’) )
    console.log( Map.isMap( state2 ))
    console.log( Map.isMap( obj ))

    const { List } = require( ‘immutable’ )

    /*

    * List是用来定义Immutable数组的

    */

    const arr = List([ 1,2,3,4 ]) // immutable数组

    const newArr = arr.push( 5 ) // 通过数组的方法来生成新的Immutable数组

    console.log( arr.get[ 0 ] ) // undefined
    console.log( newArr.get[ 4 ] ) // undefined

    console.log( arr.get( 0 ) ) // 1
    console.log( newArr.get( 4 ) ) // 5

    console.log( arr.size ); // 4 size输出的是immutable数组长度
    console.log( newArr.size ); // 5

    /*

    is 可以帮助我们比较两个immutable对象里面内容是否相同

    */

    const { Map,is,List } = require(‘immutable’)

    const state1 = Map({
    a: 1,
    b: true,
    c: null,
    d: undefined,
    })

    const state2 = Map({
    a: 1,
    b: true,
    c: null,
    d: undefined,
    e: ‘a’
    })

    console.log( is( state1,state2 ) )

    const arr = List([1, ‘a’, true,null, undefined])
    const arr2 = List([1, ‘a’, true,null, undefined])

    console.log( is( arr,arr2 ) )

    // var arr = [ 1, ‘a’, true,null, undefined ]
    // var arr2 = [ 1, ‘a’, true,null, undefined ]

    // console.log( arr.sort().toString() === arr2.sort().toString() )

    展开全文
  • js对象深浅拷贝

    2020-05-24 22:07:01
    深浅拷贝 引子: JS数据类型分别基本数据类型(String,Number,Undefine,null,...而深拷贝会产生新的内存地址。 浅拷贝方式: 直接赋值 Object.assign() 解构赋值 实现代码如下: let xiaoMin = { name: '小明'
  • 前端常见面试题

    2019-11-15 15:38:36
    前端拷贝 类型 浅拷贝: 只拷贝一层的拷贝方式,地址拷贝 深拷贝: 值的完全拷贝 ...解构赋值 ...递归实现深拷贝 - 要求: 手写出来 //对象深拷贝 function deepClone(origin,target){...
  • JS编程性问题整合

    2020-10-09 11:12:03
    深浅拷贝区别浅拷贝实现深拷贝实现防抖和节流防抖节流 JS编程 包装类 基本数据类型 String、Number、Boolean、Null、Undefined 引用数据类型 Object JS提供了三个包装类 通过这三个包装类可以将基本数据类型的数据...
  • 知识点:浅拷贝 字符串 封装解构 集合 ipython 哈希查找与线性查找 代码实现:杨辉三角 冒泡排序list复制 是浅拷贝 简单类型 新开地址 拷贝数值引用类型 只拷贝引用 直接拷贝地址 深拷贝 简单类型与引用类型都新开...
  • 六、解构并不能实现对象的深拷贝 七、修改脚手架默认包管理工具 八、redux 九、react组件props类型检查和默认值 十、使用webpack搭建react开发环境 github源码: ...
  • 6、 什么是深拷贝,浅拷贝,如何实现 7、 事件冒泡,事件捕获 8、 h5 和css3 的新特性 9、 Axios 拦截做过哪些 10、 sessionStoragelocalStorage cookie 的区别 11、 图片懒加载实现原理 12、 解构赋值 13、 async/...
  • 深拷贝浅拷贝 let,const,var的区别 解构赋值 箭头函数和普通函数的区别 什么是promise async和await 双向数据绑定 原理 输入url到页面加载完成发生了什么 HTTP 状态码 组件通信 父传递子如何传递 .
  • 逆向工程是指将工程制品(比如汽车、喷气发动机或者软件程序)以揭示其最底层的细节(如其设计和架构)的方式进行解构的过程。这与研究自然现象的科学研究有些类似,区别就在于一般没有人会把科学研究看做逆向工程,...
  • Reversing:逆向工程揭密

    热门讨论 2010-06-21 17:00:47
    逆向工程是指将工程制品(比如汽车、喷气发动机或者软件程序)以揭示其最底层的细节(如其设计和架构)的方式进行解构的过程。这与研究自然现象的科学研究有些类似,区别就在于一般没有人会把科学研究看做逆向工程,...
  •  6.20 *拷贝python对象、浅拷贝和深拷贝   6.21 序列类型小结   6.22 练习   第7章 映像和集合类型   7.1 映射类型:字典   7.1.1 如何创建字典和给字典赋值   7.1.2 如何访问字典中的值   ...
  • Python核心编程第二版(中文)

    热门讨论 2015-04-23 16:40:13
    6.20 *拷贝Python对象、浅拷贝和深拷贝 6.21 序列类型小结 6.22 练习 第7章 映像和集合类型 7.1 映射类型:字典 7.1.1 如何创建字典和给字典赋值 7.1.2 如何访问字典中的值 7.1.3 如何更新字典 7.1.4 如何...
  • 深入理解Python中文版高清PDF

    热门讨论 2012-09-04 19:37:04
     6.20 *拷贝Python对象、浅拷贝和深拷贝   6.21 序列类型小结   6.22 练习   第7章 映像和集合类型   7.1 映射类型:字典   7.1.1 如何创建字典和给字典赋值   7.1.2 如何访问字典中的值...
  • Python核心编程(中文第二版)

    热门讨论 2009-10-02 12:08:14
     6.20 *拷贝Python对象、浅拷贝和深拷贝   6.21 序列类型小结   6.22 练习   第7章 映像和集合类型   7.1 映射类型:字典   7.1.1 如何创建字典和给字典赋值   7.1.2 如何访问字典中的值   ...
  • Python核心编程第二版

    热门讨论 2009-07-30 17:07:20
     6.20 *拷贝Python对象、浅拷贝和深拷贝   6.21 序列类型小结   6.22 练习   第7章 映像和集合类型   7.1 映射类型:字典   7.1.1 如何创建字典和给字典赋值   7.1.2 如何访问字典中的值   ...

空空如也

空空如也

1
收藏数 20
精华内容 8
关键字:

解构实现实现深拷贝