专栏首页编程坑太多js数组的拷贝赋值复制-你真的懂?

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),作者:诸葛阿明

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python:实现文件归档

    IT故事会
  • 「小程序JAVA实战」小程序开源搜索组件(53)

    拷贝项目根目录的wxSearchView文件夹到你项目的根目录下(也可以其它位置)。 在你的wxss文件里导入组件的样式(文件位置为相对位置):

    IT故事会
  • 「小程序JAVA实战」小程序的关注功能(65)

    PS:关注跟点赞类似也是操作后端的几张表来完成的,重点是前端需要判断状态,来进行显示对应的按钮,其实小程序把逻辑都给了前端。data里面的操作灵活的运用,业务逻...

    IT故事会
  • Python进阶|谈谈几个常用的内置函数

    但是我们有没有想过,如果我们需要一个函数,比较简短,而且只需要使用一次(无需重复调用),那还需要定义一个有名字的函数么?

    罗罗攀
  • 一个合格的中级前端工程师要掌握的JavaScript 技巧

    使用 Object.prototype.toString 配合闭包,通过传入不同的判断类型来返回不同的判断函数,一行代码,简洁优雅灵活(注意传入 type 参数...

    Nealyang
  • javascript函数

    函数声明提升 执行代码前会先读取函数声明,可以把函数声明放在调用他的语句后面。 sayHi(); function sayHi(){ alert("Hi!");...

    wangxl
  • 谈谈自己的理解:python中闭包,闭包

    闭包这个概念好难理解,身边朋友们好多都稀里糊涂的,稀里糊涂的林老冷希望写下这篇文章能够对稀里糊涂的伙伴们有一些帮助~

    py3study
  • Python-函数式编程介绍 (上)

    #内置函数:网址如下 https://docs.python.org/zh-cn/3.7/library/functions.html

    py3study
  • R语言基础教程——第六章:函数

    一个函数是组合在一起以执行特定任务的一组语句。R具有大量内置函数,当然用户也可以创建自己的功能。

    DoubleHelix
  • shiny入门课【2.创建用户界面】

    titlePanel 和 sidebarLayout 是fluidPage中非常重要的两个组成部分, 他们用于创建带侧边栏的主页。

    用户2936342

扫码关注云+社区

领取腾讯云代金券