前言
好像一般很少人讲到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:
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 的复制因为要考虑到很多因素,我会另开一篇,专门整理。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 黑鸭子.2005-《发烧DSD》柏菲[WAV分轨]
- 群星.1990-电影看板·人间道【宝丽金】【WAV+CUE】
- 周殷廷.2024-TO.WHOM.IT.MAY.CONCERN【环球】【FLAC分轨】
- 草蜢.1997-三人世界精选17首【宝丽金】【WAV+CUE】
- 【古琴音乐】管平湖《广陵散》2004[FLAC+CUE]
- 【中国民乐】《少数民族器乐·苗岭的早晨》2004[WAV+CUE]
- 【中国音乐】盛中国《新疆之春》2004[FLAC+CUE]
- 群星《音你而来 第8期》[320K/MP3][44.64MB]
- 群星《音你而来 第8期》[FLAC/分轨][121.21MB]
- 群星《十二女声Ⅲ》[WAV/CUE/分轨][626.4MB]
- 陈百强.1993-离不开...纪念歌集2CD【华纳】【WAV+CUE】
- 于台烟.2003-爱自己【乾坤唱片】【WAV+CUE】
- 群星.2024-我们永远是我们电影原声带【乐禾发文化】【FLAC分轨】
- 【中国民乐】张维良《秋江夜泊》2004[FLAC+CUE]
- 明达年度发烧碟MasterSuperiorAudiophile2011[DSF]