javaScript中赋值的拷贝的理解

栏目: JavaScript · 发布时间: 5年前

内容简介:在js中将一个值a赋值给另一个值b,在什么情况下改变了b的值会影响a的值?在知道哪种类型赋值后改变值会影响原对象的情况下该怎么做才不会影响原对象?就是这里需要讨论的问题。首先是哪种类型赋值后改变赋值后的值会影响到被赋值的值?从这里我们可以知道:简单数据类型的number赋值后就算改变赋值后的值也不会影响到其本身,但是对象复制后改变了赋值后的值就会影响到其本身。

在js中将一个值a赋值给另一个值b,在什么情况下改变了b的值会影响a的值?在知道哪种类型赋值后改变值会影响原对象的情况下该怎么做才不会影响原对象?就是这里需要讨论的问题。

首先是哪种类型赋值后改变赋值后的值会影响到被赋值的值?

let a = 1;
let b = a;
b = 2;
console.log(a) // 1

let obj = {a: 1}
let obj2 = obj;
obj2.a = 2;
console.log(obj) // {a: 2}

从这里我们可以知道:简单数据类型的number赋值后就算改变赋值后的值也不会影响到其本身,但是对象复制后改变了赋值后的值就会影响到其本身。

原理:

javaScript中的数据类型分为两类,简单数据类型和复杂数据类型;

1.简单数据类型:包括数值,字符串、布尔值、null、undefined;

2.复杂数据类型:对象即属性的集合(function、Array、Object);

先了解数据类型在计算机中的存储;

1.简单数据类型:存储的是对象的原始数据;

2.复杂数据类型:对象的原型也是引用类型,对象类型的值单独存放。对象原型的方法和属性放在内存中,通过原型链的方式来指向这个地址;所以对象类型存储的是对象的引用地址;

对象类型在复制的时候,只是将对象的引用复制了,将a对象的引用地址值赋值给了b

所以在b改变对象属性值的时候,a的引用也发生了改变,它们在内存中获取的都是同一个对象;

如果想要复制一个复杂数据类型却不想影响原对象,此时就需要用到深拷贝/浅拷贝。

浅拷贝:

首先由一个数组[1,2,3]或对象{name:'porco', age:1},这样的数组或对象中的值统一不为[数组array]或[对象obj]的只有一层数据结构的简单对象,被称为浅拷贝对象,如果单纯的赋值使用例如let a = [1,2,3],如果改变了a,那么原数组也会相应的被改变,对象也是一样。所以遇到这种情况,想要复制的对象的改变不想影响到原对象,就需要浅拷贝方法:如下

/**
* 浅拷贝对象:
**/

let obj = {a:1,b:2}
let obj2 = {};
/*方法1*/
for(let e in obj) {
    obj2[e] = obj[e]
}
/*方法2*/
Object.keys(obj).forEach(e => {
    obj2[e] = obj[e]
})
obj2.a = 0;
console.log(obj2) //{a:0, b:2}
console.log(obj) //{a:1, b:2}

/*这里还可以使用两种es6浅拷贝方式*/
/*这是直接浅拷贝:*/
let obj2 = Object.assign({}, obj);

/*以及直接使用拓展运算符拷贝*/
let obj2 = {...obj}

/*以上四种方式均可作为浅拷贝对象的方式*/

/***********************************/
 /**
 * 浅拷贝数组:
 **/
let arr = [1,2,3]
/*第一种浅拷贝数组方式*/
let arr2 = arr.slice(); 
/*第二种浅拷贝数组方式*/
let arr2 = arr.concat();
/*第三种浅拷贝数组方式*/
let arr2 = [];
arr.forEach(e => {
    arr2.push(e)
})
arr2.[0] = 0;
console.log(arr2) //[0,2,3]
console.log(arr) //[1,2,3]

深拷贝:

当对象中的第一层级有一项是数组或对象,浅拷贝失效,例如:let a = [{a:1}]或let a = {a:{aa:1}},这样,使用上面的方法都会失效。这时必须使用深拷贝

1、最简单的办法

let BBB = JSON.parse(JSON.stringify(AAA))

这种方法简单适用于普通场景,但是也会抛弃对象的constructor,不管之前的构造函数什么样,深拷贝后都会变成object.这种方法能正确处理的对象只有 Number, String, Boolean, Array, 并且能用jso格式直接表示的数据结构。

2、一个递归方法:

function deepClone(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if(obj && typeof obj === "object") {
        for(let key in obj) {
            if(obj.hasOwnProperty(key)) {
                if(obj[key] && typeof obj[key] === "object") {
                    objClone[key] = deepClone(obj[key]);
                } else {
                    objClone[key] = obj[key];    
                }
             }
         } 
    }
    return objClone
}

以上就是讨论了哪些值类型赋值不需要使用拷贝,哪些值类型赋值需要浅拷贝,哪些值类型赋值需要深拷贝


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

云计算安全与隐私

云计算安全与隐私

Tim Mather、Subra Kumaraswamy、Shahed Latif / 刘戈舟、杨泽明、刘宝旭 / 机械工业出版社华章公司 / 2011-6 / 65.00元

《云计算安全与隐私》可以使你明白当把数据交付给云计算时你所面临的风险,以及为了保障虚拟基础设施和网络应用程序的安全可以采取的行动。本书是由信息安全界知名专家所著,作者在书中给出许多中肯的忠告和建议。本书的读者对象包括:IT职员、信息安全和隐私方面的从业人士、业务经理、服务提供商,以及投资机构等。阅读本书你会了解直到现在还严重匮乏的云计算安全方面的详尽信息。 《云计算安全与隐私》主要内容包括:......一起来看看 《云计算安全与隐私》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器