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

    2021-04-26 11:53:10
    开发中,通常会遇到 后端返回数组数据 this.$api.get(`/admin/customerProduct/xxxxList`).then((res) =>...按照编程的数组赋值规则,数组属于复杂类型,常常利用拷贝的方法,去实现数组数据源不会相互影响,...

    开发中,通常会遇到 后端返回数组数据,

    我直接就自然赋值了,没有考虑数组是否复杂类型。

    this.$api.get(`/admin/customerProduct/xxxxList`).then((res) => {
                        this.operatorInfoList = res
                    })

    通常是直接赋值,这里 res 值是https 响应的后通过axios.Promise返回来的值,

    数组属于复杂类型,直接赋值其本质是引用了同一个地址空间,常常利用拷贝的方法,避免2个数组数据影响;

    let arr = [1,2,3];

    let arr2 = arr;

    arr.push(4)

    console.log(arr2) //[1,2,3,4]

    let arr3 = arr.slice()

    console.log(arr3) //[1,2,3]

    slice() 是 javascript 对象 Array() 提供的原生方法方法;很古老了。

    清晰自己的代码,对自己的代码负责,每天进步一点点

    展开全文
  • js数组拷贝

    万次阅读 2018-06-13 10:24:13
    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
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

    slice 方法实现数组的深拷贝

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

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

    运行结果如下: 
     
    更多 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)
    • 1
    • 2
    • 3
    • 4
    • 5

    运行结果如下: 
     
    更多 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)
    • 1
    • 2
    • 3
    • 4
    • 5

    运行结果如下:

    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
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

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

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

    var obj = {
      name: 'FungLeo',
      sex: 'man',
      old: '18'
    }
    var obj2 = JSON.parse(JSON.stringify(obj))
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

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

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

    var obj = {
      name: 'FungLeo',
      sex: 'man',
      old: '18'
    }
    var { ...obj2 } = obj
    obj.old = '22'
    console.log(obj)
    console.log(obj2)
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    运行结果如下:



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

    https://blog.csdn.net/fungleo/article/details/54931379

    展开全文
  • js 数组拷贝与深拷贝

    2018-04-17 17:39:00
    1、对于普通数组数组元素为数字...//拷贝数组(浅拷贝) 2、对于对象数组 (深拷贝) //形如var _objArr=[{"name":''weifeng"},{"name":"boy"}] var _testCopy =[].concat(JSON.parse(JSON.stringify(_test...

    1、对于普通数组(数组元素为数字或者字符串)

    var _testCopy = [1,2,3].concat();//拷贝数组(浅拷贝)

     

    2、对于对象数组 (深拷贝)

    //形如
    var _objArr=[{"name":''weifeng"},{"name":"boy"}]

    var _testCopy = [].concat(JSON.parse(JSON.stringify(_test)));//拷贝数组,注意这行的拷贝方法

     

    https://blog.csdn.net/xiongqiangwin1314/article/details/53184638

    转载于:https://www.cnblogs.com/xiangsj/p/8868260.html

    展开全文
  • 》》》》白话说法:因为js数组的复制如果操作新数组会影响原数组,类似java引用类型操作 废话不多说看例子: var arr1=["1","2","3"]; var arr2=[]; 1、浅拷贝 arr2=arr1; 如果修改arr2,会导致arr1内容同步...

    首先为什么会有这三个概念:

    》》》》专业说法:数组是引用类型,常规的复制复制的是引用

    》》》》白话说法:因为js数组的复制如果操作新数组会影响原数组,类似java引用类型操作

    废话不多说看例子:

    var arr1=["1","2","3"];

    var arr2=[];

    1、浅拷贝

    arr2= arr1;

    如果修改arr2,会导致arr1内容同步改变

    2、非严格深拷贝 slice、concat

     arr2=arr1.slice(0);//concat自行研究效果一样

    此时改变arr2,arr1内容不会改变,BUT

    如果arr1是二维数组,或者arr1元素有对象,此时slice、concat得到arr2,操作arr2依然有问题

    针对二维数组为例:只是复制了数组的第一维,二维仍然是引用,修改新数组的二维会影响原数组

    var arr1=[["1","2","3"],"2","3"]

    3、解决方案 用JSON转

    arr2= JSON.parse(JSON.stringify(arr1));//深拷贝

    展开全文
  • 数组拷贝经常被误解,但这并不是因为拷贝过程本身,而是因为缺乏对 JS 如何处理数组及其元素的理解。JS 中的数组是可变的,这说明在创建数组之后还可以修改数组的内容。 这意味着要拷贝一个数组,咱们不能简单地将旧...
  • js 数组深度拷贝详解

    万次阅读 2019-08-23 10:29:09
    js 数组深度拷贝详解 1.我们已经知道的深拷贝和浅拷贝的区别,在于,深拷贝拷贝值的同时拥有一个新的存储地址,而浅拷贝只是拷贝了值,而存储地址不变;这样会导致的问题是修改拷贝的值,会同时修改原数组; 但是...
  • js数组拷贝

    2020-01-08 19:19:12
    js 数组拷贝 var ary1=[1,2]; 1.适用单层数组嵌套的深拷贝 var ary2 = ary1.concat(); 2.适用多层数组嵌套的深拷贝 var ary2 = JSON.parse(JSON.stringify(ary1));  此方法适用于Oject的深度拷贝,因为Array属于...
  • 下面总结几种js数组和对象深浅拷贝的几种方式: 一、es5实现数组和对象的浅拷贝与深拷贝 1.数组和对象浅拷贝: function shallowCopy(source){ if (typeof source !== 'object') { throw TypeError('the ...
  • js数组拷贝

    2020-04-30 22:41:35
    js中,数组Array是引用类型,直接将数组赋值给一个变量名,二者所指向的地址是一样的。 slice()和concat()这两个方法,仅适用于对不包含引用对象的一维数组的深拷贝 JSON.stringify把对象转成字符串,再用JSON....
  • js数组中深拷贝的方法

    万次阅读 热门讨论 2019-06-06 17:07:35
    一、什么是浅拷贝  在js当中,我们常常遇到数组复制的的情况,许多人一般都会使用“=”来直接把一个数组赋值给一个变量,如 ...把数组a用等号“=”的形式复制给变量b,这种就是js数组的浅拷贝。然...
  • js数组对象拷贝

    千次阅读 2019-05-16 13:59:48
    数组拷贝 var arr = [{old: 'old'}, ['old']]; var new_arr = arr.concat(); arr[0].old = 'new'; new_arr[1][0] = 'new'; console.log(arr); // [{old: 'new'}, ['new']] console.log(new_arr); // [{old: 'new'},...
  • js 数组拷贝

    2019-03-10 17:12:00
    js中,数组Array是引用类型,直接将数组赋值给一个变量名,二者所指向的地址是一样的。 所以直接复制数组会产生意想不到的结构。 要想解决拷贝一个数组但是对副本的修改不影响原来的数组,有以下方式: /...
  • js 数组深浅拷贝记录

    2019-03-25 13:44:25
    js 数组深浅拷贝方法 let a = [[1,2],1]; let b; b = a // 地址引用 a === b // true a[0] === b[0] //true b = [...a] // 浅拷贝 a === b // false a[0] === b[0] // true b = a.concat() a === b // false a[0]...
  • js数组拷贝失败

    2018-03-09 13:37:13
    一般如果数组是常用类型,可以使用slice()方法和concat()进行拷贝, 例如: let arr = originArr.slice(0); let arr = originArr.concat(); 但是如果数组的元素是对象的话,上面的方法就失败了,所以,需要自己写...
  • js数组深浅拷贝

    2020-11-23 14:12:25
    详解js中的对象的深浅拷贝 这篇文章中的深拷贝方法有些问题,可以参考这篇文章
  • 数组和对象一样,是引用数据类型 因为指向同一块栈区域,所以当修改arr2时,arr1数组也会发生变化...浅拷贝方法只适用于数组元素是基本类型,如果数组中是对象或者数组,需要进行深拷贝,下面是深拷贝一个通用方法...
  • // 数组的浅拷贝,可用concat、slice返回一个新数组的特性来实现拷贝 var arr = ['old', 1, true, null, undefined]; var new_arr = arr.concat(); // 或者var new_arr = arr.slice()也是一样的效果; new_arr[0] = '...
  • js数组常用方法,易错点总结。数组独立拷贝;数组相等的判定;
  • js数组拷贝方式

    2020-07-20 17:00:50
    1. concat 返回一个新数组 const cloneArray= [].concat(array) 此刻 cloneArray 不是array的引用赋值,互不影响 2.slice 返回一个新数组 const cloneArray = array.slice(0) 注意:splice 与 slice不同, ...
  • Js 数组拷贝方法

    2017-09-09 00:03:09
    方法一:js的slice函数 复制代码 代码如下:对于array对象的slice函数, 返回一个数组的一段。(仍为数组) arrayObj.slice(start, [end]) 参数 arrayObj 必选项。一个 Array 对象。 start 必选项。arrayObj ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,477
精华内容 590
关键字:

js数组拷贝