js中的数组拷贝(浅拷贝,深拷贝)

js中的数组拷贝(浅拷贝,深拷贝)

问题

要拷贝一个内容会变化的数组,使用了=赋值,slice(),concat()方法都不行,修改了原数组后拷贝数组也变了,原因是这个数组内容是object,而object是引用类型,需要使用深拷贝,最后使用var newArr = JSON.parse(JSON.stringify(arr));解决

 

浅拷贝&深拷贝

  • 浅拷贝:如果数组元素是基本类型,就会拷贝一份,互不影响,而如果是对象或者数组,就会只拷贝对象和数组的引用,无论对新旧数组的哪一个进行了修改,两者都会发生变化。
  • 深拷贝:完全的拷贝一个对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。
复制代码
//原数组
var arr = [{name: 'wens'},{age: '26'}];

//浅拷贝
var newArr1 = arr;

//浅拷贝
var newArr2 = arr.slice();

//浅拷贝
var newArr3 = arr.concat();

//深拷贝
var newArr4 = JSON.parse(JSON.stringify(arr));

//改变原数组内对象的值
arr[0].name = 'leon';
arr[1].age = '27';

//输出最终结果
console.log(arr);
console.log(newArr1);
console.log(newArr2);
console.log(newArr3);
console.log(newArr4);
复制代码

 

运行结果: 

>Array [object { name:"leon"},Object { age:"27"}]
>Array [Object { name:"leon"},Object { age:"27"}]
>Array [Object { name:"leon"},Object { age:"27"}]
>Array [Object { name:"leon"},Object { age:"27"}]
>Array [Object { name:"wens"},Object { age:"26"}]

浅拷贝

1.使用=直接赋值

var newArr = arr;

缺点:由于数组是引用类型,修改了arr或者newArr中的一个会影响全部

2.使用slice()

var newArr = arr.slice();

3.使用concat()

var newArr = arr.concat();

slice()和concat()缺点:当数组内部属性值为引用对象时,使用slice和concat对对象数组的拷贝,整个拷贝还是浅拷贝,拷贝之后数组各个值的指针还是指向相同的存储地址。简单来说就是:

数组中的值如果是引用类型,对其进行增删改,会影响用slice复制的数组,
但是如果数组中的值是基本类型,就不会影响

 

JSON.stringify()将值转换为相应的JSON格式:

  • 转换值如果有toJSON()方法,该方法定义什么值将被序列化。
  • 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
  • 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
  • undefined、任意的函数以及symbol值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成null(出现在数组中时)。函数、undefined被单独转换时,会返回undefined,如JSoN.stringify(function(){})or JSON.stringify(undefined)。
  • 对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误。
  • 所有以symbol 为属性键的属性都会被完全忽略掉,即便replacer参数中强制指定包含了它们。
  • Date日期调用了toJSON()将其转换为了string字符串(同Date.tolsOString()),因此会被当做字符串处理。
  • NaN和Infinity格式的数值及nul都会被当做null。
  • 其他类型的对象,包括Map/Set/weakMap/weakSet,仅会序列化可枚举的属性。

深拷贝

1.使用JSON.stringify和JSON.parse

不仅可拷贝数组还能拷贝对象(但不能拷贝函数)

var newArr = JSON.parse(JSON.stringify(arr));

缺点:JSON.stringify()有一些局限,比如对于RegExp类型和Function类型则无法完全满足,而且不支持有循环引用的对象。

 

2.深拷贝的一个通用方法

实现思路:拷贝的时候判断属性值的类型,如果是对象,继续递归调用深拷贝函数

复制代码
var deepCopy = function(obj) {
  // 只拷贝对象
  if (typeof obj !== 'object') return;
  // 根据obj的类型判断是新建一个数组还是一个对象
  var newObj = obj instanceof Array ? [] : {};
  for (var key in obj) {
    // 遍历obj,并且判断是obj的属性才拷贝
    if (obj.hasOwnProperty(key)) {
      // 判断属性值的类型,如果是对象递归调用深拷贝
      newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
    }
  }
  return newObj;
}
复制代码

 

转载:js中的数组拷贝(浅拷贝,深拷贝)_王俊

 

本文作者:Journey&Flower

本文链接:https://www.cnblogs.com/JourneyOfFlower/p/15131077.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Journey&Flower  阅读(666)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 Not Found REOL
  2. 2 白色恋人 游鸿明
  3. 3 盛夏的果实 莫文蔚
  4. 4 以父之名 周杰伦
  5. 5 晴天 周杰伦
  6. 6 简单爱 周杰伦
  7. 7 东风破 周杰伦
  8. 8 稻香 周杰伦
  9. 9 爱在西元前 周杰伦
  10. 10 千里之外 费玉清-周杰伦
  11. 11 偏爱 张芸京
  12. 12 大海 张雨生
  13. 13 月亮惹的祸 张宇
  14. 14 雨一直下 张宇
  15. 15 过火 张信哲
  16. 16 隐形的翅膀 张韶涵
  17. 17 天下 张杰
  18. 18 当你孤单你会想起谁 张栋梁
  19. 19 清明雨上 许嵩
  20. 20 玫瑰花的葬礼 许嵩
  21. 21 断桥残雪 许嵩
  22. 22 城府 许嵩
  23. 23 等一分钟 徐誉滕
  24. 24 客官不可以 徐良_小凌
  25. 25 坏女孩 徐良_小凌
  26. 26 犯贱 徐良
  27. 27 菠萝菠萝蜜 谢娜
  28. 28 贝多芬的悲伤 萧风
  29. 29 睫毛弯弯 王心凌
  30. 30 我不是黄蓉 王蓉
  31. 31 秋天不回来 王强
  32. 32 今天你要嫁给我 陶喆,蔡依林
  33. 33 丁香花 唐磊
  34. 34 绿光 孙燕姿
  35. 35 求佛 誓言
  36. 36 十一年 邱永传
  37. 37 下辈子如果我还记得你 马郁
  38. 38 一千年以后 林俊杰
  39. 39 江南 林俊杰
  40. 40 曹操 林俊杰
  41. 41 背对背拥抱 林俊杰
  42. 42 会呼吸的痛 梁静茹
  43. 43 勇气 梁静茹
  44. 44 爱你不是两三天 梁静茹
  45. 45 红日 李克勤
  46. 46 星月神话 金莎
  47. 47 嘻唰唰 花儿乐队
  48. 48 穷开心 花儿乐队
  49. 49 六月的雨-《仙剑奇侠传》电视剧插曲 胡歌
  50. 50 一个人的寂寞两个人的错 贺一航
  51. 51 好想好想-《情深深雨濛濛》电视剧片尾曲 古巨基
  52. 52 情人 刀郎
  53. 53 冲动的惩罚 刀郎
  54. 54 西海情歌 刀郎
  55. 55 2002年的第一场雪 刀郎
  56. 56 红玫瑰 陈奕迅
  57. 57 浮夸 陈奕迅
  58. 58 爱情转移 陈奕迅
  59. 59 独家记忆 陈小春
  60. 60 记事本 陈慧琳
  61. 61 看我72变 蔡依林
  62. 62 寂寞在唱歌 阿桑
  63. 63 樱花草 Sweety
  64. 64 中国话 S.H.E
  65. 65 波斯猫 S.H.E
  66. 66 杀破狼-《仙剑奇侠传》电视剧片头曲 JS
  67. 67 Lydia F.I.R.
  68. 68 I Miss You 罗百吉_青春美少女.
盛夏的果实 - 莫文蔚
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作词 : 李焯雄

作曲 : Meyna Co

编曲 : 张佳添

也许放弃 才能靠近你 不再见你

你才会把我记起 时间累积

这盛夏的果实 回忆里寂寞的香气

我要试着离开你 不要再想你

虽然这并不是我本意

你曾说过 会永远爱我

也许承诺 不过因为没把握 别用沉默

再去掩饰什么 当结果是那么赤裸裸

以为你会说什么 才会离开我

你只是转过头 不看我

不要刻意说 你还爱我

当看尽潮起潮落 只要你记得我

你曾说过 会永远爱我 也许承诺

不过证明没把握 不用难过

不用掩饰什么 当结果是那么赤裸裸

其实不必说什么

才能离开我 起码那些经过 属于我

也许放弃 才能靠近你 不再见你

你才会把我记起 时间累积

这盛夏的果实 回忆里爱情的香气

我以为不露痕迹 思念却满溢

或许这代表了我的心

不要刻意说 你还爱我

当看尽潮起潮落 只要你记得我

如果你会梦见我 请你再抱紧我