js数组的拷贝赋值复制-你真的懂?

在看react-native性能优化的时候,看到如何避免shouldComponentUpdate的异常数据时,脑内一阵风暴,从而牵连出一连串的问题,于是有了这一篇关于js数组的复制(深浅拷贝)与赋值等为何能产生异常数据的文章。 有什么问题欢迎指正

现在进入正题: 首先异常数据的产生在于我们在复制赋值时,会有或没有改变到本身的值。

一、push与concat

push的定义是:像数组末尾添加一个或更多元素,并返回新的长度。该方法会改变数组的长度。 concat的定义是:连接两个或更多的数组,并返回结果,该方法不会改变现有数组,而仅仅会返回数组的一个副本。

    var a = [1,2];  
    a.push([3,4]);  
    a.concat(5);  
    //a为1 2 3,4 5  

二、深拷贝与浅拷贝

1.浅拷贝

JavaScript存储对象都是存地址的,所以浅复制会导致 a 和 b 指向同一块内存地址

数组的赋值其实相当于给了索引,改变其中一个变量其他引用都会改变

var a = [1,2,3];  
var b = a;  
b[0] = 4;  
//a为4 2 3  
//b为4 2 3  

根据上面存储对象的问题,这里就可以解决另一个问题: 原始参数(比如一个具体的数字)被作为值传递给函数;值被传递给函数,如果被调用函数改变了这个参数的值,这样的改变不会影响到全局或调用函数。 你传递一个对象(在js里数组不是简单数据类型,而是对象)到一个函数,如果在函数里面改变了这个参数的内容,在外部这个变化是可见的。

2.深拷贝

(1)slice 函数 (2)concat 函数 (3)assgin

三个函数的原理都是返回数组的一个副本(相当于另外开辟内存空间),所以并不会改变数组本身的的值 但是这里有一点不同,就是assgin与其他两点的不同虽然说assgin也是深拷贝,但是他只是第一层深拷贝,第二层之后还是进行浅拷贝,例子如下:

var a = {  
    a1:{  
        aa1:'11',  
        aa2:'22'  
    }  
}  
var b = Object.assgin({},a);  
var c = Object.assgin({},a);  
b.a1.aa1 = 33;  
/*  
b:{  
    a1:{  
        aa1:'33',  
        aa2:'22'  
    }  
}  
c:{  
    a1:{  
        aa1:'33',  
        aa2:'22'  
    }  
}  
*/  

原文发布于微信公众号 - 编程坑太多(idig88)

原文发表时间:2018-03-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mathor

JAVA——流程控制语句

15050
来自专栏IT派

Java面试中常被问到的几大技术难题

大家在平常面试java的过程中都会遇到哪些难题呢?还有一些即将去面试java的童鞋们,你们想知道技术面试中会涉及到哪些点吗?达妹为你整理Java面试中会被问到的...

12400
来自专栏专注 Java 基础分享

关于类的对象创建与初始化

今天,我们就来解决一个问题,一个类实例究竟要经过多少个步骤才能被创建出来,也就是下面这行代码的背后,JVM 做了哪些事情? Object obj = new ...

34850
来自专栏HappenLee的技术杂谈

C++雾中风景3:const用法的小结

const关键字,翻译成中文是常量,常数的意思。所以在绝大多数场合之中,const是来定义常量的,定义常量也是好的编程习惯。在C类语言之中,定义常量通常会使用宏...

12330
来自专栏java一日一条

Java enum 枚举还可以这么用

在大部分编程语言中,枚举类型都会是一种常用而又必不可少的数据类型,Java中当然也不会例外。然而,Java中的Enum枚举类型却有着许多你意想不到的用法,下面让...

20620
来自专栏IT可乐

Java的深拷贝和浅拷贝

  关于Java的深拷贝和浅拷贝,简单来说就是创建一个和已知对象一模一样的对象。可能日常编码过程中用的不多,但是这是一个面试经常会问的问题,而且了解深拷贝和浅拷...

38360
来自专栏互联网杂技

深入理解javascript原型和闭包(1)——一切都是对象

“一切都是对象”这句话的重点在于如何去理解“对象”这个概念。 ——当然,也不是所有的都是对象,值类型就不是对象。 首先咱们还是先看看javascript中一个常...

377160
来自专栏技术/开源

一道javascript面试题

下面表达式比较的结果分别是什么? 1. []=="0" 2. []==0 3. "0"==0 4. []==false 5. []==[] 大家可以...

241100
来自专栏海天一树

小朋友学C++(12):多态

(一) 先编写函数: #include <iostream> using namespace std; class Shape { protected:...

33460
来自专栏腾讯IVWEB团队的专栏

讲讲标准的 Promise 长啥样?

不同项目下lib里的promise/deferred往往是差异化最多的,用起来和自己的习惯相比经常是缺胳膊少腿,因此聊聊标准的Promise的啥样的。

17200

扫码关注云+社区

领取腾讯云代金券