怎么在JavaScript中引用vs复制
本篇文章为大家展示了怎么在JavaScript中引用vs复制,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
letage=18; letage2=age; console.log(age,age2);
我们会得到以下的值:
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复制,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注恰卡编程网行业资讯频道。
推荐阅读
-
WebStorm 与 VS Code 对比:JavaScript 开发该如何选择 IDE?
-
WebStorm 与 VS Code 对比:JavaScript 开发工具选型分析
-
JavaScript闭包用多会造成内存泄露吗
JavaScript闭包用多会造成内存泄露吗今天小编给大家分享一下...
-
javascript中文乱码如何解决
javascript中文乱码如何解决本篇内容介绍了“javascr...
-
PHP学习第十五天——JavaScript入门DOM对象:二
-
Node.js基本内容和知识点
简单的说node.js就是运行在服务端的JavaScript,起初段定位是后端开发语言,由于技术的不够成熟,一般小型项目...
-
PHP与Node.js:一个史诗般开发者的分享
-
JavaScript 中 find() 和 filter() 方法的区别
JavaScript在ES6上有很多数组方法,每种方法都有独特的用途和好处。在开发应用程序时,大多使用数组方法来获...
-
js怎么跟php结合使用
-
简单说说Node.js和JavaScript
Node.js是一个开源和跨平台的JavaScript运行时环境,在浏览器之外运行V8JavaScript引擎(...