本篇文章为大家展示了怎么在JavaScript中引用vs复制，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
10多年专注成都网站制作，成都定制网站，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于成都定制网站,高端网页制作,对石雕等多个行业，拥有多年设计经验。
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'
}
}
上述内容就是怎么在JavaScript中引用vs复制，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
