賦值、淺拷貝、深拷貝的區別
一 、賦值
賦值是將某一數值或物件賦給某個變數的程序，分為：
1、基本資料型別：賦值，賦值之后兩個變數互不影響
let a = 5;
let b = a;
console.log(a + b); // 10
a = 10;
console.log(a + b); // 15
2、參考資料型別：賦址，兩個變數具有相同的參考，指向同一個物件，相互之間有影響
let a = {
name: 'zhangsan',
age:18,
book: {
title: '高性能JavaScript',
price: '50'
}
}
let b = a
console.log(b);
a.name ='lisi'
a.book.price = '60'
console.log(a);
console.log(b);
輸出結果
{
name: 'zhangsan',
age: 18,
book: { title: '高性能JavaScript', price: '50' }
}
{
name: 'lisi',
age: 18,
book: { title: '高性能JavaScript', price: '60' }
}
{
name: 'lisi',
age: 18,
book: { title: '高性能JavaScript', price: '60' }
}
對基本型別進行賦值操作，兩個變數互不影響，
二、淺拷貝
let obj={
name:"hello",
sex:'男',
msg:{
phone:123456,
age:18
},
color:['red','yellow']
}
let o={};
let s={}
console.log('-------------------ES5-------------');
for(let k in obj){
s[k]=obj[k]
}
console.log(s);
console.log('-------------------ES6語法糖-------------');
Object.assign(o,obj);
console.log(o);
o.msg.age=30;
console.log(obj);
輸出結果
淺拷貝結論
淺拷貝將原物件或原陣列的參考直接賦給新物件，新陣列，新物件／陣列只是原物件的一個參考（拷貝后的參考都是指向同一個物件的實體，彼此之間的操作會互相影響）
三、深拷貝
let obj = {
name: "hello",
sex: '男',
msg: {
phone: 123456,
age: 18
},
color: ['red', 'yellow']
}
// 深拷貝
let deep = {}
function deepCopy(newobj, oldobj) {
for (let k in oldobj) {
// 判斷屬性值屬于那種資料型別
// 1、獲取屬性值 歐拉都比較[k]
let item = oldobj[k];
// 2、判斷這個是不是陣列
if (item instanceof Array) {
newobj[k] = [];
deepCopy(newobj[k], item)
} else if (item instanceof Object) {
// 3、判斷這個值是不是物件
newobj[k] = {};
deepCopy(newobj[k], item)
} else {
// 4、屬于簡單資料型別
newobj[k] = item;
}
}
}
deepCopy(deep, obj)
console.log(deep);
let arr = [];
console.log(arr instanceof Object);
輸出結果
deep.msg.age = 20;
console.log(obj);
輸出結果
深拷貝結論
深拷貝是將原物件的各個屬性的“值”逐個復制出去，而且將原物件各個屬性所包含的物件也依次采用深拷貝的方法遞回復制到新物件上（注意拷貝的“值”而不是“參考”
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292738.html
標籤：其他
上一篇：jQuery常用選擇器
下一篇：js中的作用域（初學）