Map Object Set
Map
set(key, val): 向Map中添加新元素
get(key): 通过键值查找特定的数值并返回
has(key): 判断Map对象中是否有Key所对应的值，有返回true,否则返回false
delete(key): 通过键值从Map中移除对应的数据
clear(): 将这个Map中的所有元素删除
const m1 = new Map([['a', 111], ['b', 222]]) console.log(m1) // {"a" => 111, "b" => 222} m1.get('a') // 111
const m2 = new Map([['c', 3]]) const m3 = new Map(m2) m3.get('c') // 3 m3.has('c') // true m3.set('d', 555) m3.get('d') // 555
Set
Set对象允许存储任何类型的值，无论是原始值或是对象引用，它类似于数组，但成员的值是唯一的，没有重复的值
add(value)：添加某个值，返回 Set 结构本身(可以链式调用)。
delete(value)：删除某个值，删除成功返回true，否则返回false。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。
const mySet = new Set(['a', 'a', 'b', 1, 2, 1])
console.log(mySet) // {'a', 'b', 1, 2}
myset.add('c').add({'a': 1})
console.log(mySet) // {'a', 'b', 1, 2, 'c', {a: 1}}
console.log(mySet.size) // 6
mySet.has(2) // true
Object 和 Map 的区别
Object和Map 的本质上都是以键值对的方式存储数据
区别
- 键：Object的键只能是整数，字符串或是symbol类型。 Map的key值可以为任意数据类型
- 元素顺序：Map会保留所有元素的顺序，Object并不会保证属性顺序
- 继承：Map是Object的实例对象
- Map的键值对个数可以从size属性获取，而Object的键值对个数只能手动计算
- Object都有自己的原型，原型链上的键名有可能和你自己再对象上设置的键名冲突
创建
Object与数组的创建方式相似 Map只能通过new创建
对象的key值是唯一的
Map 和 Set 都是对象（存值的方式都为键值对）
Map 键名（key）为任意数据类型
Object 键名为字符串
Set 和 Map 的区别
存取值不一样add set
- Set 和 Map 主要的应用场景在于 数据重组 和 数据储存。
- Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构。
集合 与 字典 的区别：
- 共同点：集合、字典 可以储存不重复的值
- 不同点：集合 是以 [value, value]的形式储存元素，字典 是以 [key, value] 的形式储存
Map 和 weakMap
垃圾回收机制会回收Map 但weakMap不会被回收，weakMap是弱引用，它自动会消失
在计算机程序设计中，弱引用与强引用相对，是指不能确保其引用的对象不会被垃圾回收器回收的引用。 一个对象若只被弱引用所引用，则被认为是不可访问（或弱可访问）的，并因此可能在任何时刻被回收。
Set 和 weakSet
weakSet只接收对象，只存储引用类型
弱引用，垃圾回收机制不考虑WeakSet对该对象的引用
weakSet没有size取值
Set：
- 成员唯一、无序且不重复。
- [value, value]，键值与键名是一致的（或者说只有键值，没有键名）。
- 可以遍历，方法有：add、delete、has。
WeakSet：
- 成员都是对象。
- 成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏。
- 不能遍历，方法有add、delete、has。
Map：
- 本质上是键值对的集合，类似集合。
- 可以遍历，方法很多可以跟各种数据格式转换。
WeakMap：
- 只接受对象作为键名（null除外），不接受其他类型的值作为键名。
- 键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的。
- 不能遍历，方法有get、set、has、delete。
块级元素水平居中
- 父容器 flex justify-content:center align-items:center
- 父容器 positon:relative 子容器：position:absolute left:50% top:50% transform:translate(-50%,-50%)
- 父容器 display:table-cell text-align:center vertical-align:middle
- 父容器 display:grid 子容器：align-self:center(垂直居中) justify-self:center
行内元素水平居中
- 父容器 flex justify-content:center align-items:center
- 父容器 positon:relative 子容器：position:absolute left:50% top:50% transform:translate(-50%,-50%)
- 父容器 display:table-cell text-align:center vertical-align:middle
- 父容器 text-align:cneter line-height:xxxpx
盒模型
盒模型分为 W3C标准盒模型（content-box） 和IE盒模型（border-box）
标准盒模型给定的长高仅仅是内容 padding +border+content才是盒子的大小
IE盒模型给定对的长高就是该盒子的大小 width = border + padding + 内容的宽度 height = border + padding + 内容的高度
垃圾回收机制
分代式垃圾回收
-
很多对象在内存中的存在时间很短
-
不死的对象，会活得更久
v8 把堆分成 新生代(存放生存时间短的对象) 和 老生代(存放生存时间长的对象) 两个区
-
副垃圾回收器(回收新生代区)
-
主垃圾回收器(回收老生代区)
-
垃圾回收器工作流程
- 标记内存空间的活动对象(还在使用的) 和 非活动对象(可以被回收)
- 清理内存中可以被回收的对象的内存空间
- 内存整理(频繁回收对象造成内存碎片过多，影响后续的大文件的存储)
副垃圾回收器(scavenge 算法)
-
Cheney算法中将堆内存一分为二，把新生代区分成两部分，一半是对象区，一半是空闲区
-
新写入的对象会存到对象区，对象区装满后进行回收，在清理过程中把存活的对象复制到空闲区，且有序整理好
-
对象区和空闲区进行角色转换
对象晋升策略(新生代区会被存活对象装满，经过两次回收还存活的对象会移到老生代区)
主垃圾回收器(Mark-Sweep)
-
递归对象找到无法到达的元素(垃圾数据)
-
垃圾数据的清除
-
整理内存
JS执行机制
- js在浏览器中不是按顺序执行
- 首先进行变量提升 js代码执行前需要先编译，变量和函数会被存放在变量环境中（值默认为undefined）
- 执行，在变量环境中找变量和函数，然后进行赋值
事件循环机制
js执行过程，除了依靠函数调用栈来搞定函数的执行顺序外，还得依靠任务队列来搞定另一些代码的执行。整个执行过程，我们称之为事件循环过程
先执行同步代码（宏任务），执行异步代码（微任务），下一次循环
宏任务 ：setTimeout setInterval setImmediate I/O UI render
微任务： promise Async/Await nextTick
异步编程
回调函数
被作为参数传入另一个函数，并在该外部函数内被调用，用来完成某些任务的函数，也被称为回调函数
回调地狱
回调的本质是回调函数作为参数传递给另一个函数，当处理比较复杂的需求时，回调函数作为参数一层层嵌套，代码结构会非常庞大，代码维护难度极高，这就叫回调地狱
解决方法
Promise async await generator
将异步代码变成同步代码
await后立即执行
多个异步代码
.then await
Promise的错误处理
catch方法捕获错误
浏览器性能优化
重排
当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的集合属性，将其安放在界面中的正确位置，这个过程叫做重排（回流）
添加或者删除可见的DOM元素；
元素尺寸改变——边距、填充、边框、宽度和高度
内容变化，比如用户在input框中输入文字
浏览器窗口尺寸改变——resize事件发生时
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值
重绘
当一个元素外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，叫做重绘
重排优化
- 分离读写操作
- 样式集中改变（class）
- 使用 absolute 或 fixed 脱离文档流
- 优化动画
进程和线程
根本区别
进程是操作系统资源分配的基本单位，而线程是处理器任务调度和执行的基本单位
web性能优化
- 尽量减少前端HTTP请求
- 浏览器缓存
- HTML代码结构优化
- 懒加载和预加载
