攻略前端面試官（一）：JS的數據類型和內存機制淺析

本文在我的主頁同步更新~

背就完事了

介紹：一些知識點相關的面試題和答案
使用姿式：看答案前先嚐試回答，看完後把答案收起來檢驗成果~

<details> <summary><b>面試官：JS有哪些數據類型</b></summary>

答：JS有<b>七</b>種數據類型，分別是Number、String、Boolean、Null、Undefined、Symbol、Object。其中Object是引用數據類型，其餘都是值類型（基本數據類型）。引用數據類型又細分爲Function, Array和Object類型。

</details> <details> <summary><b>面試官：如何理解值類型和引用類型</b></summary>

答：值類型佔用空間固定，保存在棧裏面，操做的是值自己；引用類型佔用空間不固定，保存在堆中，操做的是指向對象的一個指針。

</details> <details> <summary><b>面試官：如何理解堆（heap）棧（stack）</b></summary>

答：棧通常存放變量的值，內存空間由系統自動分配和釋放；堆通常存放複雜對象，內存空間爲動態分配，不主動釋放的話，可能會由垃圾回收機制自動回收。

</details> <details> <summary><b>面試官：Null和Undefined有什麼區別</b></summary>

答：null是一個對象指針，但沒有指向任何對象，經過<code>typeof(null)</code>獲得的是 Object類型；undefined則是一個空值，經過<code>typeof(undefined)</code>獲得的是 Undefined。

</details> <details> <summary><b>面試官：什麼是淺拷貝和深拷貝</b></summary>

答：淺拷貝是隻複製指向對象的指針，對新舊對象進行操做都會互相影響；而深拷貝則是建立一個新的對象，將原來的值一個個複製過來，與原對象不在同一內存地址。

</details> <details> <summary><b>面試官：如何理解Symbol類型，使用場景是什麼</b></summary>

答：Symbol的特色就是Symbol類型只能經過Symbol()這個方法返回獲得，且Symbol類型的值是絕對惟一的。使用場景是做爲對象屬性的key值。

</details>

理解小幫手

介紹：總結性的圖表或筆試題目和解析，讓知識點更容易懂

關於值類型，引用類型和內存棧和堆的關係

以下圖所示，a,b變量是值類型，c,d變量是引用類型。

在聲明c,d變量時，會先建立相應的對象存放在堆內存中，再將其引用地址賦值給變量。

由此，這道常見面試題的答案顯而易見

var a = { test : 10 }
var b = a
a.test = 20
此時b.test=?

關於null，{}和undefined的對比

	描述	數據類型	強轉Boolean值
null	指針，指向地址沒有對象	Object	false
{}	指針，指向空對象	Object	true
undefined	值，未定義	Undefined	false

關於淺拷貝和深拷貝的具體操做

平常大部分的拷貝動做都屬於淺拷貝，包括直接賦值(=), 擴展運算符(...), Array的concat操做, Object的assign操做。

真正的深拷貝方法能夠本身進行封裝，循環判斷每個子項是否爲引用類型，再進行復制。

也能夠經過JSON.parse(JSON.stringfy(object))進行深拷貝

// 平常所見的淺拷貝操做
var a = { class: 1, teacher: { name : 'abc' }}
var b = a
var c = {...a}
var d = Object.assign({}, a)
var e = JSON.parse(JSON.stringify(a))
a.class = 2
a.teacher.name = 'bcd'
console.log(a)    // 打印結果：{ class: 2, teacher: { name : 'bcd' }}
console.log(b)    // 打印結果：{ class: 2, teacher: { name : 'bcd' }}
console.log(c)    // 打印結果：{ class: 1, teacher: { name : 'bcd' }}
console.log(d)    // 打印結果：{ class: 1, teacher: { name : 'bcd' }}
console.log(e)    // 打印結果：{ class: 1, teacher: { name : 'abc' }}

經過以上代碼能夠看出..., Object.assign, concat等操做只是第一層用新建的對象包裹住，子屬性對象的引用地址仍是和原來一致。

---

Kane -- 一切都是命運石之門的選擇

原文出處：https://www.cnblogs.com/rainykane/p/11974939.html