前端知识整理（1-5）

一.cookie，sessionStorage，localStorage区别

cookie，sessionStorage，localStorage都是浏览器的本地存储。
共同点：

• 它们都是存储在浏览器本地的。

区别：

• cookie是由服务器端写入的，而sessionStorage和localStorage都是由前端写入的
• cookie的生命周期在服务器端写入时就已经设置好了的；localStorage一旦写入就会永久存在，除非手动清除；sessionStorage是页面关闭的时候就会自动清除。
• cookie存储空间比较小，大概4KB；sessionStorage和localStorage比较大，大概5MB
• Cookie、SessionStorage、 LocalStorage数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面。
• 在前端给后端发送请求的时候会自动携带Cookie中的数据，但是SessionStorage、 LocalStorage不会。

由于它们的以上区别，所以它们的应用场景也不同:
Cookie一般用于存储登录验证信息SessionID或者token;
LocalStorage常用于存储不易变动的数据，减轻服务器的压力;
SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能。

详细的相关介绍请参考：
w3c手册上Storage的介绍以及使用：
https://www.w3school.com.cn/jsref/api_storage.asp
一篇写的比较全面的localStorage介绍：
https://www.cnblogs.com/st-leslie/p/5617130.html
es6用户使用js-cookie插件介绍：
https://www.jianshu.com/p/6e1bacd35f59

二. JS数据类型有哪些？

JS数据类型分为两类：

• 基本数据类型（也叫简单数据类型），包含7种类型，分别是：
  Number，String，Boolean，Null，Undefined，Symbol，BigInt。
• 另一类是引用数据类型也叫复杂数据类型，通常用Object代表（普通对象，数组，正则，日期，Math数学函数都属于Object）。

数据分成两大类的本质区别:

基本数据类型和引用数据类型它们在内存中的存储方式不同。

• 基本数据类型是直接存储在栈中的简单数据段，占据空间小，属于被频繁使用的数据。
• 引用数据类型是存储在堆内存中，占据空间大。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，当解释器寻找引用值时，会检索其在栈中的地址，取得地址后从堆中获得实体。

扩展：
（1） Symbol是ES6新出的一种数据类型，这种数据类型的特点就是没有重复的数据，可以作为object的key。
数据的创建方法：

 const symbol1 = Symbol('foo')
1

因为它的构造不完整，所以不能使用new Symbol()创建数据。
由于Symbol()创建的数据具有唯一性，所以Symbol()!==Symbol()。
同时使用Symbol数据作为key不能使用for获取到这个key值，需要使用Object.getOwnPropertySymbols(obj)获得这个obj对象中key类型是Symbol的key值。

let key = Symbol('key');
let obj = { [key]: 'symbol'};
let keyArray = Object.getOwnPropertySymbols(obj); // 返回一个数组[Symbol('key')]
obj[keyArray[0]] // 'symbol'
1
2
3
4

MDN上对于Symbol的介绍（比较官方化）：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol
阮一峰ES6教程中对Symbol介绍的比较详细：
https://es6.ruanyifeng.com/#docs/symbol
一篇通俗易懂的symbol简单介绍：
https://www.zhangxinxu.com/wordpress/2018/04/known-es6-symbol-function/
（2）BigInt也是ES6新出的一种数据类型，这种数据类型的特点就是数据涵盖的范围大，能够解决超出普通数据类型范围报错的问题。
使用：
可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ，如：10n，或者调用函数 BigInt()（但不包含 new 运算符）并传递一个整数值或字符串值。

const theBiggestInt = 9007199254740991n;

const alsoHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n

const hugeString = BigInt("9007199254740991");
// ↪ 9007199254740991n

const hugeHex = BigInt("0x1fffffffffffff");
// ↪ 9007199254740991n

const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
// ↪ 9007199254740991n
1
2
3
4
5
6
7
8
9
10
11
12
13

• 注意：BigInt和Number之间不能进行混合操作。
  可以看到咱们控制台的运算结果报的错误。
  

一篇比较好的BigInt基本介绍：
https://segmentfault.com/a/1190000019912017
来自MDN官方介绍：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt

三. 如何理解闭包

一个函数和词法环境的引用捆绑在一起，这样的组合就是闭包（closure）。

说通俗点，闭包其实就是一个函数，一般就是一个函数A，return其内部的函数B，被return出去的B函数能够在外部访问A函数内部的变量，这时候就形成了一个B函数的变量背包，A函数执行结束后这个变量背包也不会被销毁，并且这个变量背包在A函数外部只能通过B函数访问。

闭包形成的原理：作用域链，当前作用域可以访问上级作用域中的变量。

**闭包解决的问题：**能够让函数作用域中的变量在函数执行结束之后不被销毁，同时也能在函数外部可以访问函数内部的局部变量。

闭包带来的问题：由于垃圾回收器不会将闭包中变量销毁，于是就造成了内存泄露，内存泄露积累多了就容易导致内存溢出。

闭包的应用： 能够模仿块级作用域，能够实现柯里化，在构造函数中定义特权方法、Vue中数据响应式Observer中使用闭包等。
相关详细文章：
https://segmentfault.com/a/1190000023356598
https://segmentfault.com/a/1190000023425946