精华内容
下载资源
问答
  • js 数组对象深拷贝

    2020-07-30 13:24:01
    1、概念  ECMAScript中的变量有两种类型:基本类型值和引用类型值。基本类型值指的是那些保存在栈内存中的简单数据段,即这种值完全保存在内存中的一个位置... 深拷贝和浅拷贝只存在引用类型值中。  浅拷贝类似于

    深拷贝和浅拷贝的区别

    如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力

    为什么要使用深拷贝?

    我们希望在改变新的数组(对象)的时候,不改变原数组(对象)

    深拷贝的要求程度

    我们在使用深拷贝的时候,一定要弄清楚我们对深拷贝的要求程度:是仅“深”拷贝第一层级的对象属性或数组元素还是递归拷贝所有层级的对象属性和数组元素?

    怎么检验深拷贝成功

    改变任意一个新对象/数组中的属性/元素,     都不改变原对象/数组

    深拷贝数组(只拷贝第一级数组元素)

         深拷贝数组

    1.直接遍历

    var array = [1, 2, 3, 4];
    function copy (array) {
       let newArray = []
       for(let item of array) {
          newArray.push(item);
       }
       return  newArray;
    }
    var copyArray = copy(array);
    copyArray[0] = 100;
    console.log(array); // [1, 2, 3, 4]
    console.log(copyArray); // [100, 2, 3, 4]

     2. slice()和concat()

         深拷贝对象

    1.直接遍历

    var obj = {
      name: '彭湖湾',
      job: '学生'
    }
     
    function copy (obj) {
       let newObj = {};
         for (let item in obj ){
           newObj[item] = obj
         }
         return newObj;
    }
     
    var copyObj = copy(obj);
    copyObj.name = '我才不是彭湖湾呢! 哼 (。・`ω´・)';
    console.log(obj); // {name: "彭湖湾", job: "学生"}
    console.log(copyObj); // {name: "我才不是彭湖湾呢! 哼 (。・`ω´・)", job: Object}

     2.ES6的Object.assign

    var obj = {
      name: '彭湖湾',
      job: '学生'
    }
    var copyObj = Object.assign({}, obj);
    copyObj.name = '我才不叫彭湖湾呢! 哼  (。・`ω´・)';
    console.log(obj);   // {name: "彭湖湾", job: "学生"}
    console.log(copyObj);  // {name: "我才不叫彭湖湾呢! 哼  (。・`ω´・)", job: "学生"}

    Object.assign:用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target),并返回合并后的target

    3.ES6扩展运算符:

    var obj = {
        name: '彭湖湾',
        job: '学生'
    }
    var copyObj = { ...obj }
    copyObj.name = '我才不叫彭湖湾呢! 哼  (。・`ω´・)'
    console.log(obj.name) //   彭湖湾
    console.log(copyObj.name)  // 我才不叫彭湖湾呢! 哼  (。・`ω´・)

    扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中

    4.Jquery浅拷贝 var copiedObject = jQuery.extend({}, originalObject) 如果改变了originalObject,copiedObject 也会变。

    对多层嵌套对象,很遗憾,上面四种方法,都会失败:

    深拷贝(拷贝所有层级)

    1.不仅拷贝第一层级,还能够拷贝数组或对象所有层级的各项值

    2. 不是单独针对数组或对象,而是能够通用于数组,对象和其他复杂的JSON形式的对象

    1.JSON.parse(JSON.stringify(obj))

    当obj为对象时,这个方法会省略那些值为 functions 和 undefined 的属性,值为null还返回null

    当obj为数组时,如果数组里有function 、undefined、null,序列化后都变成null

    2.手动写递归

    var array = [
       { number: 1 },
       { number: 2 },
       { number: 3 }
    ];
    function copy (obj) {
            var newobj = obj.constructor === Array ? [] : {};
            if(typeof obj !== 'object'){
                return;
            }
            for(var i in obj){
               newobj[i] = typeof obj[i] === 'object' ?
               copy(obj[i]) : obj[i];
            }
            return newobj
    }
    var copyArray = copy(array)
    copyArray[0].number = 100;
    console.log(array); //  [{number: 1}, { number: 2 }, { number: 3 }]
    console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]

    3.jQuery深拷贝 var copiedObject = $.extend(true, {}, originalObject)

    参考文档

    https://www.cnblogs.com/penghuwan/p/7359026.html

    展开全文
  • JavaScript 数组对象深拷贝与浅拷贝 1.浅拷贝 var data = ["11","22","33","44"]; var tempData = data; 举例:对tempData删除元素 tempData.splice(0,1),之后data和tempData都是 ["22","33","44"] 1.深拷贝 var ...

    JavaScript   数组对象深拷贝与浅拷贝


    1.浅拷贝
    var data = ["11","22","33","44"];
    var tempData = data;
    举例:对tempData删除元素  tempData.splice(0,1),之后data和tempData都是 ["22","33","44"]




    1.深拷贝
    var data = ["11","22","33","44"];
    var tempData = [].concat(data);
    举例:对tempData删除元素  tempData.splice(0,1),
     之后data是["11","22","33","44"]
     tempData是["22","33","44"]


     
    说明:JavaScript存储对象都是存地址的,所以浅拷贝会导致data和tempData指向同一块内存地址

     

    展开全文
  • array 拷贝第一层 slice或者concat,这两个方法都能返回一个新的数组而不影响原来的数组 var a1=["1","2"]; var a2=a1.slice(0); a2.push("2"); console.log(a1,a2)//[1,2] [1,2,2] 扩展运算符 ...对象...

    array 拷贝第一层

    1. slice或者concat,这两个方法都能返回一个新的数组而不影响原来的数组
          var a1=["1","2"];
          var a2=a1.slice(0);
          a2.push("2");
          console.log(a1,a2)//[1,2] [1,2,2]

       

    2. 扩展运算符 ... 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
        var a1=["1","2"];
        var a2=[...a1];
        a2.push("2");
        console.log(a1,a2);

          3.Object.assign  Object.assign({},d1)

    深拷贝全部拷贝所有属性

        var a2=JSON.parse(JSON.stringify(a1));
    

    但是此方法无法复制函数类型

     

    • 如果对象含有 toJSON 方法会调用 toJSON
    • 在数组中
      1. 存在 Undefined/Symbol/Function 数据类型时会变为 null
      1. 存在 Infinity/NaN 也会变成 null
    • 在对象中
      1. 属性值为 Undefined/Symbol/Function 数据类型时,属性和值都不会转为字符串
      1. 属性值为 Infinity/NaN ,属性值会变为 null
    • 日期数据类型的值会调用 toISOString
    • 非数组/对象/函数/日期的复杂数据类型会变成一个空对象
    • 循环引用会抛出错误

    自己写递归(很麻烦也不完整....特殊情况也用不了 算了)

    
        function deepClone(obj) { //递归拷贝
            if(obj === null) return null; //null 的情况
            if(obj instanceof RegExp) return new RegExp(obj);
            if(obj instanceof Date) return new Date(obj);
            if(typeof obj !== 'object') {
                //如果不是复杂数据类型,直接返回
                return obj;
            }
            /**
             * 如果obj是数组,那么 obj.constructor 是 [Function: Array]
             * 如果obj是对象,那么 obj.constructor 是 [Function: Object]
             */
            let t = new obj.constructor();
            for(let key in obj) {
                //如果 obj[key] 是复杂数据类型,递归
                t[key] = deepClone(obj[key]);
            }
            return t;
        }
    

    使用第三方插件方法 像jQuery.extend lodash.js的cloneDeep

    jQuery.extend([deep], target, object1, [objectN])

    deep:如果设为true,则递归合并。

    target:待修改对象。

    object1:待合并到第一个对象的对象。

    objectN:待合并到第一个对象的对象。

       var data1 = {
            a1: {
                a11: [{
                    a111: "1",
                    a112: function () {
                        console.log("function")
                    }
                }, ',']
            }
        };
        var a2 = JSON.parse(JSON.stringify(a1));
        /*var d3=Object.assign({},data1.a1);
        d3.a11="123";*/
        var a11 = $.extend(true, [], data1.a1.a11);
        a11[0].a111 = "2";
        a11[0].a112();// 
        // a2[0].a112()//error
        console.log(data1.a1.a11[0].a111,a11[0].a111)

    当然还有补充json.Stringify方法

    怎样写太麻烦

    展开全文
  • javascript 数组以及对象深拷贝(复制数组或复制对象)的方法前言在js中,数组对象的复制如果使用=号来进行复制,那只是浅拷贝。如下图演示: 如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并...

    javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法

    前言

    在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝。如下图演示:

    如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不是我们所需要的结果。
    因此,数组以及对象的深拷贝就是javascript的一个基本功了。

    评论中有很多人说我误导大家。说这些都是浅拷贝。我不做过深的阐述,本文中涉及到的都是比较浅显的内容。诸位请根据自己的需要以及情况自行判断和理解。

    数组的深拷贝

    条条大道通罗马,实现数组的深拷贝,是有好几种方法的。举例如下:

    for 循环实现数组的深拷贝

    for循环是非常好用的。如果不知道高级方法,通过for循环能够完成我们大多数的需求。

    var arr = [1,2,3,4,5]
    var arr2 = copyArr(arr)
    function copyArr(arr) {
    	let res = []
    	for (let i = 0; i < arr.length; i++) {
    	 res.push(arr[i])
    	}
    	return res
    }
    

    如上,通过对数组的for循环,即可实现对数组的深拷贝了。

    slice 方法实现数组的深拷贝

    这个代码实现非常简单。原理也比较好理解,他是将原数组中抽离部分出来形成一个新数组。我们只要设置为抽离全部,即可完成数组的深拷贝。代码如下:

    var arr = [1,2,3,4,5]
    var arr2 = arr.slice(0)
    arr[2] = 5
    console.log(arr)
    console.log(arr2)
    

    运行结果如下:

    更多 slice 内容请访问 w3school JavaScript slice 方法

    concat 方法实现数组的深拷贝

    这个代码也非常简单,原理更加粗暴。它是用于连接多个数组组成一个新的数组的方法。那么,我们只要连接它自己,即可完成数组的深拷贝。代码如下:

    var arr = [1,2,3,4,5]
    var arr2 = arr.concat()
    arr[2] = 5
    console.log(arr)
    console.log(arr2)
    

    运行结果如下:

    更多 concat 内容请访问 w3school JavaScript concat 方法

    2017年10月31日补充:ES6扩展运算符实现数组的深拷贝

    OK,以上之前讲的方法全部过时了,用下面的方法实现数组的深拷贝是最简单的。

    var arr = [1,2,3,4,5]
    var [ ...arr2 ] = arr
    arr[2] = 5
    console.log(arr)
    console.log(arr2)
    

    运行结果如下:

    ES6扩展运算符实现数组的深拷贝

    对象的深拷贝

    对象的深拷贝相比数组也没有困难许多,列举两个方法。

    万能的for循环实现对象的深拷贝

    在很多时候,for循环能够解决大问题。

    var obj = {
      name: 'FungLeo',
      sex: 'man',
      old: '18'
    }
    var obj2 = copyObj(obj)
    function copyObj(obj) {
      let res = {}
      for (var key in obj) {
        res[key] = obj[key]
      }
      return res
    }
    

    转换成json再转换成对象实现对象的深拷贝

    上面的代码实在是比较长,所以,用一个更暴力的方法吧!代码如下:

    var obj = {
      name: 'FungLeo',
      sex: 'man',
      old: '18'
    }
    var obj2 = JSON.parse(JSON.stringify(obj))
    

    这个原理没什么好解释的,实在是够简单粗暴的啦!

    2017年10月31日补充: 扩展运算符实现对象的深拷贝

    var obj = {
      name: 'FungLeo',
      sex: 'man',
      old: '18'
    }
    var { ...obj2 } = obj
    obj.old = '22'
    console.log(obj)
    console.log(obj2)
    

    运行结果如下:

    扩展运算符实现对象的深拷贝

    小结

    数组和对象的深拷贝是js中最常见的应用。理解各种方法是必须的。希望对大家有所帮助。
    本文中并没有对异常进行处理,主要在讲原理。更多的数组以及对象的操作方法,可以参考lodash的源码,查看它的源码可以让你的js基础变得非常牢固。我也在学习中。

    2017年10月31日补充,使用es6提供的扩展运算符的方法实现深拷贝,简单,高效。并且,对象的深拷贝不会像使用 JSON 方法深拷贝一样,丢失函数等信息,只能用来深拷贝 JSON 数据格式的对象。推荐大家使用。

    补充一个数组去重的方法

    function dedupe(array) {
      return [...new Set(array)]
    }
    var arr = [1,2,2,3,3,4,4,5,5]
    console.log(dedupe(arr))
    

    运行结果如下:

    JS数组去重的方法

    2021年03月29日 补充

    这里说的深拷贝,都是指一维的数组和对象的深拷贝。鉴于评论中多人指出,这些是浅拷贝,我本来不想回应,但是提出这个观点的人很多,因此我在这边回应一下。

    浅拷贝的概念不重复了,上文中已经说明。文章中的多种方法,均不是浅拷贝,只是是否支持多维数据而已。而在绝大多数场景下,文中的方法是适用的。

    想要简便的支持多维数据的深拷贝,可以直接适用 JSON 方式。或适用 lodash 工具实现。

    版权申明:本文由FungLeo原创,允许转载,但转载必须附注首发链接。谢谢。

    展开全文
  • javascript数组深拷贝途径及对象数组深拷贝 什么是浅拷贝 在js当中,我们常常遇到数组复制的的情况,许多人一般都会使用“=”来直接把一个数组赋值给一个变量,如: var a=[1,2,3]; var b=a; console.log(b); ...
  • js对象数组深拷贝 前言 在javascript 以及 其他的很多编程语言中,对象数组的赋值往往是引用类型的赋值,若a和b是两个对象,则赋值语句a=b,仅仅是把a “指向” 了 b,而不是把a原本的对象变为了b对象。这种赋值...
  • js数组对象复制拷贝,深拷贝,按值传递 数组拷贝 方法1 es6扩展运算符 let arr1 = [1, 2, 3], arr2 = [...arr1]; arr2.pop(); console.log(arr1); console.log(arr2); 2Object.assign() let arr1 = ...
  • 我们经常会用到对一个数组对象的拷贝...一、es5实现数组对象的浅拷贝与深拷贝 1.数组对象浅拷贝: function shallowCopy(source){ if (typeof source !== 'object') { throw TypeError('the source must...
  • 数组深拷贝和浅拷贝数组的浅拷贝数组深拷贝对象的浅拷贝对象深拷贝 数组的浅拷贝 var arr1 = [1,2,3,4]; var arr2 = arr1; arr2[2] = 'fqniu'; console.log(arr1); // [1, 2, "fqniu", 4] console.log...
  • js数组对象深拷贝

    2019-07-29 20:42:07
    js数组对象深拷贝 普通的数组,slice,concat或者es6的扩展运算符都可以实现深拷贝,但是如果是数组对象却不可以 例如: [ {name: 'A', count: 1}, {name: 'B', count: 2}, {name: 'C', count: 3}, {name: 'D'...
  • //基础对象深/浅拷贝 let obj = { a:'1', b:'2'} // let newObj = obj //浅拷贝 // newObj.a = 4 // 改变newObj的值,obj也会发生改变 // console.log(obj,newObj) // newObj发生改变,obj也会发生改变 let ...
  • js数组深拷贝

    2020-12-08 15:39:26
    # 对于源对象里面的引用对象来说是浅拷贝,所以只有一层是深拷贝。 方法三:JSON.parse() 和 JSON.stringify()直接进转化 copyObj2 = JSON.parse(JSON.stringify(srcObj)); # 对象里面的函数,将无法转化,
  • js 数组深拷贝

    2018-12-13 22:28:07
    js数组对象的深浅拷贝,真的是一个很复杂的问题。 如果是对象数组的话,处理起来又会更麻烦。 在遇到数据处理的时候,如果没注意到 深浅拷贝的问题,真的容易被带到沟里,怎么也找不到问题的所在。 而我今天,...
  • 实现JS数组深拷贝

    2018-09-24 12:10:56
    最近在网上看到一篇关于js数组复制最有效的方法是直接使用slice和concat方法。这2个方法的确是最快的把数组成功复制,而不是引用。可以运行实例: &lt;script type="text/
  • 利用slice、concat 返回一个新数组的特性来实现拷贝。 var arr = ['old', 1, true, null, undefined]; var new_arr = arr.concat(); new_arr[0] = 'new'; console.log(arr) // ["old", 1, true, null...
  • 主要介绍了JS 数组对象深拷贝操作,结合实例形式分析了JS 数组对象深拷贝基本原理与操作技巧,需要的朋友可以参考下
  • 写前端的时候经常会遇到对象的拷贝,一般我们...总结一下常用的对象深拷贝以及数组对象的深拷贝。1. 序列化转成json字符串深拷贝,以及存在的问题; 2. Object.assign()深拷贝,以及存在的问题; 3. 循环递归深拷贝。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,960
精华内容 9,184
关键字:

js数组对象深拷贝