JavaScript 引用 vs 复制

首先咱们看下面这个例子：

let age = 18;
let age2 = age;
console.log(age, age2);
复制代码

咱们会获得如下的值：

18 18
复制代码

这个相信你们都能很好理解。

那么若是咱们改变 age 的值呢？输出会有什么变化？

age = 20;
console.log(age, age2);
复制代码

咱们会获得：

20 18
复制代码

看到这里你们就奇怪了，上面的结果都很正常啊。

但在 JavaScript 中是有例外的，对于普通数据类型如 integer，string，boolean 能够经过 = 来复制这个变量，但对于 array 和 object 数据类型，= 只能起到引用的效果。

你们能够看下面这个例子：

let arr = ['wes', 'bob', 'faker'];
let arr2 = arr;
console.log(arr2, arr);
arr[2] = 'dean';
console.log(arr2, arr);
复制代码

获得的结果是：

["wes", "bob", "faker"] ["wes", "bob", "faker"]
["wes", "bob", "dean"] ["wes", "bob", "dean"]
复制代码

咱们会发现随着 arr 的改变，arr2 也会跟着改变。

说明 arr2 并无复制 arr 的值，只是引用了它，它们都指向同一个内存中的值。

object 也是同样的：

let obj = {
    age: 19,
    name: 'like',
    last: 'jam'
};
let obj2 = obj;
console.log(obj, obj2);
obj.age = 50;
console.log(obj, obj2);
复制代码

获得的结果是：

{age: 19, name: "like", last: "jam"} {age: 19, name: "like", last: "jam"}
{age: 50, name: "like", last: "jam"} {age: 50, name: "like", last: "jam"}
复制代码

那么如何复制 array 和 object 呢？

复制 array 的方法：

方法1：

let arr2 = [].concat(arr);
复制代码

方法2：

let arr2 = arr.slice();
复制代码

方法3：

let arr2 = Array.from(arr);
复制代码

方法4：

let arr2 = [...arr];
复制代码

通常咱们比较经常使用的是方法3和方法4，方法1和方法2比较取巧，但都是能够达到复制 array 的目的的。

ps: [...arr] 是 ES6 中的方法。

复制 object 的方法：

方法1：

let obj2 = Object.assign({}, obj);
复制代码

方法2：

let obj2 = {...obj};
复制代码

方法1和方法2都有个缺点，它们只会复制对象的第一层。

看下面这个例子：

let obj = {
    number: 12,
    name: {
        first: 'bob',
        last: 'evil'
    }
};
let obj2 = Object.assign({}, obj);
obj.number = 50;
console.log(obj, obj2);
复制代码

咱们会获得下面的结果：

obj = {
    number: 50,
    name: {
        first: 'bob',
        last: 'evil'
    }
}

obj2 = {
    number: 12,
    name: {
        first: 'bob',
        last: 'evil'
    }
}
复制代码

但若是咱们改变第二层的值：

obj.name.first = 'sam';
console.log(obj, obj2);
复制代码

obj = {
    number: 50,
    name: {
        first: 'sam',
        last: 'evil'
    }
}

obj2 = {
    number: 12,
    name: {
        first: 'sam',
        last: 'evil'
    }
}
复制代码

咱们发现对象第二层依旧是引用的，并无实现复制。

那么怎么复制一个完整的 object 呢？

最简单的方法就是使用第三方函数库 lodash ，它提供了 clone 和 deepclone 彻底能够知足平常的需求。

object 的复制由于要考虑到不少因素，我会另开一篇，专门整理。

完~