攻略前端面试官（一）：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