javaScript中简朴数据类型和庞杂数据类型赋值拷贝的明白

2019年8月31日 118次阅读 来源: 不会飞的Porco

在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
}

以上就是议论了哪些值范例赋值不须要运用拷贝，哪些值范例赋值须要浅拷贝，哪些值范例赋值须要深拷贝

    原文作者：不会飞的Porco
    原文地址: https://segmentfault.com/a/1190000018154019
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞