怎么在JavaScript中引用vs复制

本篇文章为大家展示了怎么在JavaScript中引用vs复制,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

letage=18;
letage2=age;
console.log(age,age2);

我们会得到以下的值:

怎么在JavaScript中引用vs复制

18 18

这个相信大家都能很好理解。

那么如果我们改变 age 的值呢?输出会有什么变化?

age=20;
console.log(age,age2);

我们会得到:

20 18

看到这里大家就奇怪了,上面的结果都很正常啊。

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

大家可以看下面这个例子:

letarr=['wes','bob','faker'];
letarr2=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 也是一样的:

letobj={
age:19,
name:'like',
last:'jam'
};
letobj2=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:

letarr2=[].concat(arr);

方法2:

letarr2=arr.slice();

方法3:

letarr2=Array.from(arr);

方法4:

letarr2=[...arr];

一般我们比较常用的是方法3和方法4,方法1和方法2比较取巧,但都是可以达到复制 array 的目的的。

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

复制 object 的方法:

方法1:

letobj2=Object.assign({},obj);

方法2:

letobj2={...obj};

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

看下面这个例子:

letobj={
number:12,
name:{
first:'bob',
last:'evil'
}
};
letobj2=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复制,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注恰卡编程网行业资讯频道。

发布于 2021-04-15 01:56:34
收藏
分享
海报
0 条评论
171
上一篇:使用JavaScript怎么实现一个小火箭发射动画效果 下一篇:商品房和住宅房的区别是什么
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码