js数组直接赋值的问题(js数组的浅拷贝与深拷贝方法)

 更新时间:2022年10月15日 09:02:56   作者:子夜_秋  
JS数组在直接赋值时属于数组的浅拷贝,新数组保存的是原数据的内存地址,修改新数组或原数组其中一个数组,另一个数组也会相应的变化,数组的直接赋值属于数组的浅拷贝,JS存储对象都是存内存地址

1、数组的直接赋值属于数组的浅拷贝,JS存储对象都是存内存地址,所以浅拷贝会导致新数组和旧数组共用同一块内存地址,其中一个数组变化,另一个数组也会相应的变化。

var a =[1,2,3];
var b=a;
a[0]=30;
console.log(a,b);

//结果: [30, 2, 3]   [30, 2, 3]

2、数组内部不含有引用类型,使用slice() 、concat() 和 assign() 方法都属于数组的深拷贝,一个数组变化,另一个数组不受影响。

数组的concat方法

var a=[1,2,3];
var b=[].concat(a); 
a[0]=30;
console.log(a,b);

//结果:[30, 2, 3]  [1, 2, 3]

使用es6的展开操作符: …arr

var a=[1,2,3];
var b=[].concat(a); 
var c=[...a]; 
a[0]=30;
console.log(a,b,c);

//结果:[30, 2, 3]  [1, 2, 3] [1, 2, 3]

利用split join map方法

let arr1=[1,2,3];
var newArr4 = arr1.join(" ").split(" ").map(function(i){
    return parseInt(i);
    
}); 
arr1[0]=30;
console.log(arr1,newArr4);

//VM1175:1 (3) [30, 2, 3] (3) [1, 2, 3]

3、数组内部含有引用类型,使用slice() 、concat() 和 assign() 方法,非引用类型的值属于深拷贝,引入类型的值属于浅拷贝,一个数组变化,另一个也会相应的变化。

4、深拷贝就是指完全的拷贝一个对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。

1、通过JSON.stringify转化成字符串再通过JSON.parse()解析成原数组。

let arr=[{a:1,b:2},{a:3,b:4}]; 
let arr1=JSON.parse(JSON.stringify(arr)); 
arr[0].a=10;
console.log(arr,arr1); 

//输出结果如下
(2) [{…}, {…}]
    0: {a: 10, b: 2}
    1: {a: 3, b: 4}

(2) [{…}, {…}]
    0: {a: 1, b: 2}
    1: {a: 3, b: 4}

2、利用jQuery的$.extend方法。

let arr=[{a:1,b:2},{a:3,b:4}]; 
let arr1=$.extend(true,[],arr); 
arr[0].a=10;
console.log(arr,arr1); 

//输出结果如下
(2) [{…}, {…}]
    0: {a: 10, b: 2}
    1: {a: 3, b: 4}
    
(2) [{…}, {…}, contains: ƒ, each: ƒ, uniquelize: ƒ]
    0: {a: 1, b: 2}
    1: {a: 3, b: 4}

更多关于js数组直接赋值的问题和js数组的浅拷贝,深拷贝方法请查看下面的相关文章

相关文章

  • Three.js源码阅读笔记(物体是如何组织的)

    Three.js源码阅读笔记(物体是如何组织的)

    这一篇将主要讨论Three.js中的物体是如何组织的:即如何将顶点、表面、材质组合成为一个具体的对象,需要了解的朋友可以参考下
    2012-12-12
  • 用JavaScript显示浏览器客户端信息的超相近教程

    用JavaScript显示浏览器客户端信息的超相近教程

    这篇文章主要介绍了用JavaScript显示浏览器客户端信息的超相近教程,包含了从返回桌面浏览器客户端内核信息到移动端浏览器以及其使用的系统版本信息等内容,倾力推荐!需要的朋友可以参考下
    2015-06-06
  • javascript的面向对象编程一起来看看

    javascript的面向对象编程一起来看看

    这篇文章主要为大家详细介绍了javascript的面向对象编程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • javascript事件模型介绍

    javascript事件模型介绍

    在各种浏览器中存在三种事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持。
    2016-05-05
  • Javascript中的数学函数集合

    Javascript中的数学函数集合

    Javascript中的数学函数集合...
    2007-05-05
  • 了解javascript中的Dom操作

    了解javascript中的Dom操作

    DOM 给我们提供了一些方法,让我们可以使用js来控制页面中的标签等。下面小编和大家来一起学习下吧
    2019-05-05
  • 如何学习Javascript入门指导

    如何学习Javascript入门指导

    首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门
    2013-11-11
  • javascript类型系统——undefined和null全面了解

    javascript类型系统——undefined和null全面了解

    下面小编就为大家带来一篇javascript类型系统——undefined和null全面了解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • js中parseInt函数浅谈

    js中parseInt函数浅谈

    这篇文章介绍了Js中的parseInt函数,有需要的朋友可以参考一下
    2013-07-07
  • javascript学习指南之回调问题

    javascript学习指南之回调问题

    回调函数被认为是一种高级函数,一种被作为参数传递给另一个函数(在这称作"otherFunction")的高级函数,回调函数会在otherFunction内被调用(或执行)。回调函数的本质是一种模式(一种解决常见问题的模式),因此回调函数也被称为回调模式。
    2016-04-04

最新评论