举例说明JavaScript中的基本类型与引用类型赋值的不同

本文链接： https://blog.csdn.net/kuokuo666/article/details/100548053

演示工具

CocosCreator 浏览器控制台

引言

相信很多小伙伴在开发中都遇到引用赋值的问题。比如下图：
我其实是想复制一个数组。但是改变第二个数组，第一个数组也变了。

let array1 = [0];
let array2 = array1;
array2[0] = 2;
console.log(array1);
console.log(array2);

控制台
在这里插入图片描述
其实是因为对于数组（对象）来说，赋值后只是改变地址指向，两者指向同一块地址。所以改变一个，另一个（指向同一块地址）也会随着改变。

分析1

首先，我们要知道五种基本类型：Undefined、Null、Boolean、Number 和 String 它们是直接复制值过去的。

下面举两个例子说明：

let test1 = true;
let test2 = test1;
test1 = false;
console.log(test1);
console.log(test2);

控制台
在这里插入图片描述

let test1 = '001';
let test2 = test1;
test1 = '002';
console.log(test1);
console.log(test2);

控制台
在这里插入图片描述
基本类型赋值，会新开辟一块内存，存放值。两者独立。

分析2

那么接下来，我们要了解到对象（数组也是对象）这个东西。利用 = 只是传递了引用。

比如：

let test1 = {
    name: 'kuokuo'
};
let test2 = test1;
test2.name = 'notkuokuo';
console.log(test1);
console.log(test2);

控制台
在这里插入图片描述
地址还是那个地址，所以其实就一份。

我们不难想到利用 for 循环对数组进行拷贝（新 new 一个，将旧的数据依次赋值过去）。
但是，复杂的对象应该怎么办呢？别怕，有方法！

let test1 = {
    name: 'kuokuo'
};
let test2 = Object.assign({}, test1);
test1.name = 'changekuokuo';
console.log(test1);
console.log(test2);

控制台
在这里插入图片描述
一个拷贝对象的方法实现。

但是！！！

注意了，如果有第二层对象。是不起作用的，只拷贝了一层。

let test1 = {
    name: 'kuokuo',
    values: {
        id: 6
    }
};
let test2 = Object.assign({}, test1);
test1.name = 'changekuokuo';
test1.values.id = 8;
console.log(test1);
console.log(test2);

控制台
在这里插入图片描述

name 值变了，但是 id 还是受影响。

还有方法吗？

当然！我转！

let test1 = {
    name: 'kuokuo',
    values: {
        id: 6
    }
};
let test2 = JSON.parse(JSON.stringify(test1));
test1.name = 'changekuokuo';
test1.values.id = 8;
console.log(test1);
console.log(test2);

控制台
在这里插入图片描述
利用 JSON 方法两次转化就拷贝了所有 key-value.

完美了吗？

不是的，这样的转化无法对 function 实现。怎么办？只好递归赋值了。

let deepClone = function (oldObj, newObj) {
    for(let i in oldObj) {
        if(typeof oldObj[i] === 'object') {
            newObj[i] = {};
            deepClone(oldObj[i], newObj[i]);
        } else {
            newObj[i] = oldObj[i];
        }
    };
    return newObj;
};
let test1 = {
    name: 'kuokuo',
    values: {
        id: 6,
        age: 0
    },
    showAge: function() {
        console.log('Age is ' + this.values.age);
    }
};
let test2 = deepClone(test1, {});
test1.showAge();
test2.values.age = 18;
test2.showAge();
console.log(test1);
console.log(test2);

控制台
在这里插入图片描述

O(∩_∩)O~~

希望小伙伴有所收获！