基本數(shù)據(jù)類型與引用數(shù)據(jù)類型
- 基本數(shù)據(jù)類型：String珠月、Number、Boolean楔敌、Null啤挎、Undefined、Symbol卵凑。這些類型在內(nèi)存中分別占有固定大小的空間庆聘，他們的值保存在棧空間勺卢，通過按值訪問伙判、拷貝和比較。
- 引用數(shù)據(jù)類型：Array黑忱、Object宴抚。引用類型的值是對象勒魔，保存在堆內(nèi)存中，而棧內(nèi)存存儲的是對象的變量標(biāo)識符以及對象在堆內(nèi)存中的存儲地址
對于引用類型變量酱塔，棧內(nèi)存中存放的是該對象的訪問地址沥邻，在堆內(nèi)存中為該值分配空間危虱，由于這種值的大小不固定羊娃，因此不能把他們保存到棧內(nèi)存中；但內(nèi)存地址大小是固定的埃跷，因此可以將堆內(nèi)存地址保存到棧內(nèi)存中蕊玷。這樣，當(dāng)查詢引用類型的變量時(shí)弥雹，就先從棧中讀取堆內(nèi)存地址垃帅，然后再根據(jù)該地址取出對應(yīng)的值。
不同類型的賦值方式
<figcaption></figcaption>
基本類型：從一個(gè)變量向另外一個(gè)新變量復(fù)制基本類型的值剪勿，會創(chuàng)建這個(gè)值的一個(gè)副本贸诚，并將該副本復(fù)制給新變量，不會影響到原數(shù)據(jù)[圖片上傳失敗...(image-f7518e-1598515384776)]
<figcaption></figcaption>
引用類型：從一個(gè)變量向另一個(gè)新變量復(fù)制引用類型的值厕吉，其實(shí)復(fù)制的是指針酱固，最終兩個(gè)變量最終都指向同一個(gè)對象，會影響到原數(shù)據(jù)
image.png
深拷貝&淺拷貝
- 淺拷貝：僅僅是復(fù)制了引用头朱，修改基本數(shù)據(jù)類型不會影響原有數(shù)據(jù)的基本數(shù)據(jù)類型运悲，修改引用數(shù)據(jù)類型會影響原有的數(shù)據(jù)類型
- 深拷貝：在堆中重新分配內(nèi)存，不同的地址项钮，相同的值班眯，互不影響
淺拷貝實(shí)現(xiàn)
封裝方法實(shí)現(xiàn)
let arr1 = [1, {'name': 'a'}]
let shallowClone = (arr) => {
let newArr = []
for (let prop in arr) {
if (arr.hasOwnProperty(prop)) {
newArr[prop] = arr[prop]
}
}
return newArr
}
let arr2 = shallowClone(arr1)
arr2[0] = 2
arr2[1].name = 'b'
console.log(JSON.stringify({arr1})) // {"arr1":[1,{"name":"b"}]}
console.log(JSON.stringify({arr2})) // {"arr2":[2,{"name":"b"}]}
// 基本數(shù)據(jù)類型未受到影響、引用數(shù)據(jù)類型還是受到影響了
復(fù)制代碼
Array.prototype.concat()
let arr1 = [1, {'name': 'a'}]
let arr2 = arr1.concat()
arr2[0] = 2
arr2[1].name = 'b'
console.log(JSON.stringify({arr1})) // {"arr1":[1,{"name":"b"}]}
console.log(JSON.stringify({arr2})) // {"arr1":[2,{"name":"b"}]}
復(fù)制代碼
Array.prototype.slice()
let arr1 = [1, {'name': 'a'}]
let arr2 = arr1.slice()
arr2[0] = 2
arr2[1].name = 'b'
console.log(JSON.stringify({arr1})) // {"arr1":[1,{"name":"b"}]}
console.log(JSON.stringify({arr2})) // {"arr2":[2,{"name":"b"}]}
復(fù)制代碼
Object.assign()
let obj1 = {
'name': 'k',
'msg': {
'age': '10',
'sex': '男'
},
}
let obj2 = Object.assign({}, obj1)
obj2.name = 'kk'
obj2.msg.age = '20'
console.log(JSON.stringify({obj1})) // {"obj1":{"name":"k","msg":{"age":"20","sex":"男"}}}
console.log(JSON.stringify({obj2})) // {"obj2":{"name":"kk","msg":{"age":"20","sex":"男"}}}
復(fù)制代碼
展開運(yùn)算符
let arr1 = [1, 2, 3, {'name': 'kk'}]
let arr2 = [...arr1]
arr2.push(4);
arr2[3].name = 'kkk'
console.log(JSON.stringify({arr1})) // {"arr1":[1,2,3,{"name":"kkk"}]}
console.log(JSON.stringify({arr2})) // {"arr2":[1,2,3,{"name":"kkk"},4]}
復(fù)制代碼
深拷貝實(shí)現(xiàn)
let arr1 = [1, {'name': 'a'}]
// 判斷數(shù)據(jù)類型
let checkType = (data) => {
return Object.prototype.toString.call(data).slice(8, -1)
}
let deepClone = (data) => {
let newData, targetType = checkType(data)
if (targetType === 'Object') {
newData = {}
}
else if (targetType === 'Array') {
newData = []
}
else {
return data
}
// 遍歷
for (let i in data) {
let val = data[i]
if (checkType(val) === 'Object' || checkType(val) === 'Array') {
newData[i] = deepClone(val)
} else {
newData[i] = val
}
}
return newData
}
let arr2 = deepClone(arr1)
arr2[0] = 2
arr2[1].name = 'b'
console.log(JSON.stringify({arr1})) // {"arr1":[1,{"name":"a"}]}
console.log(JSON.stringify({arr2})) // {"arr2":[2,{"name":"b"}]}
復(fù)制代碼
JSON.parse(JSON.stringify())
該方法存在局限性
- 無法存放函數(shù)或undefined烁巫，有丟失風(fēng)險(xiǎn)
- 無法存放NaN署隘，會變成null
作者：toki
鏈接：https://juejin.im/post/6844903983941697549
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)亚隙，非商業(yè)轉(zhuǎn)載請注明出處磁餐。
個(gè)人備注：
封裝方法中提到了arr.hasOwnProperty(prop)
這個(gè)方法可以用來檢測一個(gè)對象是否含有特定的自身屬性
語法：obj.hasOwnProperty(prop)
參數(shù)：要檢測的屬性 字符串 名稱或者 Symbol
返回值： 用來判斷某個(gè)對象是否含有指定的屬性的 Boolean
具體例子：
function ObjWithProto(){
this.foo = 'foo_val'
}
ObjWithProto.prototype.bar = 'bar_val'
var dict = new ObjWithProto()
dict.foobar = 'foobar_val'
dict.hasOwnProperty('foo') // true
dict.hasOwnProperty('foobar') // true
dict.hasOwnProperty('bar') // false
