资讯专栏INFORMATION COLUMN

数组(引用类型)复制问题

余学文 / 3240人阅读

摘要:数组赋值问题涉及到拷贝堆栈空间基本数据类型和引用数据类型的差异。把数组值重置成输出结果是把数组值重置成输出结果是亲测用等方法进行数组复制都是浅拷贝。

数组赋值问题涉及到拷贝、堆栈空间、基本数据类型和引用数据类型的差异。(自行了解)

var arrA = [1,2,3,4,5];
var arrB = arrA;
// 把B数组值重置成0;
arrB.fill(0);
console.log(arrA);
console.log(arrB);

输出结果是:arrA = [0,0,0,0,0], arrB = [0,0,0,0,0]

arrB的修改的同时也修改了arrA的值。

可采用浅拷贝和深拷贝解决问题:

浅拷贝子对象是基础数据类型的修改不受影响,子对象是引用数据类型仍然会受影响

深拷贝,子对象是引用数据类型也不受影响。

  var arrA = [1, 2, 3, 4, 5];
  var arrB = arrA.slice(0, 5);
  // 把B数组值重置成0;
  arrB.fill(0);
  console.log(arrA);
  console.log(arrB);

输出结果是:arrA = [1, 2, 3, 4, 5], arrB = [0, 0, 0, 0, 0];

  var arrA = [1, 2, [3, 4], 5, 6];
  var arrB = arrA.slice(0, 5);
  // 把B[2]数组值重置成0;
  for (var i = 0; i < arrB.length; i++) {
    if (arrB[i].length > 0) {
        arrB[i].fill(0);
    }
  }
  console.log(arrA);
  console.log(arrB);

输出结果是:arrA = [1, 2, [0,0], 5, 6], arrB = [1, 2, [0,0], 5, 6];

亲测: 用arrA.slice()/arrA.concat()/[...arrA]/Array.from(arrA)/Array.prototype.push.apply(arrB, arrA)/ arrA.map(function(item){return item;});等方法进行数组复制都是浅拷贝。
(Object.assign({}, objA)对象浅拷贝)
var arrA = [1, 2, [3, 4], 5, 6];
var arrB = JSON.parse(JSON.stringify(arrA));
// 把B数组值重置成0;
arrB[2].fill(0);
console.log(arrA);
console.log(arrB);

输出结果是:arrA = [1, 2, [3, 4], 5, 6], arrB = [1, 2, [0, 0], 5, 6];

var arrA = [1, undefined, [3, 4], 5, 6];
var arrB = JSON.parse(JSON.stringify(arrA));
// 把B数组值重置成0;
arrB[2].fill(0);
console.log(arrA);
console.log(arrB);

输出结果是:arrA = [1, undefined, [3, 4], 5, 6], arrB = [1, null, [0, 0], 5, 6];

亲测:  JSON.parse(JSON.stringify(arrA))JSON转换是深拷贝,但是如果值为undefined会被转为null。
let arrA = [1, 2, [3, 4], 5, 6];
let arrB = _.cloneDeepWith(arrA);
// 把B数组值重置成0;
arrB[2].fill(0);
console.log(arrA);
console.log(arrB);

输出结果是:arrA = [1, undefined, [3, 4], 5, 6], arrB = [1, null, [0, 0], 5, 6];

可使用第三方库如lodash封装的方法。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100572.html

相关文章

  • 详解js深浅复制

    摘要:从而也引出了所谓的深浅复制问题。附注对于浅复制,其实还有其他的实现方式,比如数组中和方法,对于这些还是希望大家自己了解,本本主要针对深浅复制的实现原理进行解析。 前言 在之前写继承的过程谈到了深浅复制的问题,因为有读者反映到需要解析,趁今天周末写一篇解析,今天的主体相对之前来说理解难度低一些,篇幅可能也比较短,诸君按需阅读即可。 从两种数据类型说起 在js中,变量的类型可以大致分成两种...

    Lin_YT 评论0 收藏0
  • 没有对象?那就复制一个吧!(科普向,实际应用向)

    摘要:基本数据类型将变量和值一起放在栈内存引用数据类型则将变量放在栈内存而将值放在堆内存。该怎么理解没图我说个假设有个变量在内存中是这样的栈内存中的变量指向堆内存中一块内存相当于持有该内存的指针,而那块内存中存储变量的相关内容。 趁着周五没那么忙,抽个空整理一下最近使用比较频繁的一个小技术 对象的深复制。感觉啊,这个标题和今天的节日(假装不知道原来是情人节)那么遥相呼应。啊,没有女朋友?没有...

    amuqiao 评论0 收藏0
  • 深拷贝 vs 浅拷贝

    摘要:那么如何切断和之间的关系呢,可以拷贝一份的数据,根据拷贝的层级不同可以分为浅拷贝和深拷贝,浅拷贝就是只进行一层拷贝,深拷贝就是无限层级拷贝。 深拷贝 vs 浅拷贝 深拷贝和浅拷贝都是针对的引用类型,JS中的变量类型分为值类型(基本类型)和引用类型;对值类型进行复制操作会对值进行一份拷贝,而对引用类型赋值,则会进行地址的拷贝,最终两个变量指向同一份数据。 // 基本类型 var a = ...

    sugarmo 评论0 收藏0
  • JS专题之深浅拷贝

    摘要:在之前的文章专题之数据类型和类型检测中我有讲过,中的数据类型分为两种,基本数据类型和引用数据类型,基本数据类型是保存在栈的数据结构中的是按值访问,所以不存在深浅拷贝问题。 前言 在开发过程中,偶尔会遇到这种场景,拿到一个数据后,你打算对它进行处理,但是你又希望拷贝一份副本出来,方便数据对比和以后恢复数据。 那么这就涉及到了 JS 中对数据的深浅拷贝问题,所谓深浅拷贝,浅拷贝的意思就是,...

    ASCH 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<