区别
-
首先从 String、Number、Boolean 类型的值开始。
let age = 100; let age2 = age; console.log(age, age2); // 100 100 age = 200; console.log(age, age2); // 200 100
先声明了一个 Number 型的变量
age
,并将此变量赋值给另一个变量age2
,这时两个变量的值都是 100。
然后赋给age
新的值,可见对age
的修改并不会对age2
造成影响。 -
那对于数组来说,情况是否一样呢?下面我们来看看数组。
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; const team = players; console.log(players, team);
延续上面的思路,先声明一个数组
players
,并将其赋值给team
。试想一下,如果需要修改team
中的值,我们可以如何操作?或许可以这样?team[3] = 'Lux';
来看看发生了什么。
console.log(players, team); // ["Wes", "Sarah", "Ryan", "Lux"] ["Wes", "Sarah", "Ryan", "Lux"]
WOW 原数组
plaryers
也被修改了。为什么会这样?因为team
只是这个数组的引用,并不是它的复制。team
和players
这两个变量指向的是同一个数组。
所以如何解决这个问题?接下来我们开始真正的复制吧!-
由于运行
slice
得到的结果是一个对原数组的浅拷贝,原数组不会被修改。所以如果修改这两个数组中任意 一个,另一个都不会受到影响。(仅限基本数据类型)const team2 = players.slice(); team2[3] = 'Lux2'; console.log(players, team2);
-
concat()
方法是用来合并数组的,它也不会更改原有的数组,而是返回一个新数组,所以可以将players
数组与一个空数组合并,得到的结果就符合预期了。const team3 = [].concat(players); team3[3] = 'Lux3'; console.log(players, team3);
-
方法三 ES6 扩展语法
扩展语法可以像扩展参数列表一样来扩展数组,效果与上述方法类似,但比较简洁。
const team4 = [...players]; team4[3] = 'Lux4'; console.log(players, team4);
-
方法四
Array.from()
此外使用 Array 创建新的数组实例的方法也是可行的。
const team5 = Array.from(players); team5[3] = 'Lux5'; console.log(players, team5);
除此之外,还可以用
push
这样的方法。数组部分已经介绍完毕,下面我们进入 Object 类型数据的试验吧~ -
-
对于 Object 数据,我们用一个
person
对象来试试。先声明对象:
const person = { name: 'Wes Bos', age: 80 };
然后思考一下如何可以取得它的复制,试试想当然的做法:
const captain = person; captain.number = 99; console.log(person, captain); // Object {name: "Wes Bos", age: 80, number: 99} // Object {name: "Wes Bos", age: 80, number: 99}
这样好像行不通,
person
的值也被更改了,那该如何才能真正复制呢?-
方法一
Object.assign()
使用
Object.assign(target, ...sources)
时,后来的源对象的属性值,将会覆盖它之前的对象的属性。所以可以先复制person
之后,再赋给属性新的值。需要注意的是:这个例子里面,我们用的数组和对象都只是一层嵌套,Lodash 有一个深度复制的方法,但使用之前需要多考虑一下。
const cap2 = Object.assign({}, person, { number: 99, age: 12 }); console.log(cap2); // Object {name: "Wes Bos", age: 12, number: 99}
-
方法二 JSON 转换
利用 JSON 可以先将对象转成字符串的格式,然后再把它转成 JSON,从而实现复制。
const wes = { name: 'Wes', age: 100, social: { twitter: '@wesbos', facebook: 'wesbos.developer' } }; const dev = Object.assign({}, wes); const dev2 = JSON.parse(JSON.stringify(wes)); console.log(wes); console.log(dev); console.log(dev2);
-