JavaScript中引用vs复制示例详析

前言

好像一般很少人讲到js中的引用和复制，不过弄清楚这个概念可以帮助理解很多东西

先讲一下很基础的东西，看看js中几种数据类型分别传的什么

引用：对象、数组、函数

复制：数字、布尔

字符串单独说明，因为它的特殊性，无法确定是传递引用还是复制数值（因为字符串的值是没法改变的，所以纠结这个问题也是没意义的）但是用于比较的时候显然是属于传值比较

下面来一起看看详细的介绍吧

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

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：