文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-11-13 18:24

关注

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数组的浅拷贝,深拷贝方法请查看下面的相关文章

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯