# JS

# map 和对象区别

• 声明方式不同
• 对象的键只能是 symbol 和字符串，map 的键可以是任意类型
• 对象的属性有排序顺序 (排序为索引属性和命名属性),map 中 key 的顺序就是插入的顺序

# 遮蔽

• js 中重复定义变量，导致新定义的同名变量覆盖原变量的过程就是遮蔽
• var 和 function 关键字定义的变量会发生遮蔽
• js 中函数的变量名是只读的，不能被修改

# void 0 替代 undefined

• undefined 不同于 null,null 不可以被重新赋值，但是 undefined 可以被重新赋值，因此不可靠
• void 0 会稳定返回 undefined, 比直接使用 undefined 更加可靠

# 定时器 4ms 延迟

定时器 settimeout 和 setInterval 当嵌套层级达到 5 层时，会有 4ms 最小延迟时间，原因在于如果定时器一直 0ms 嵌套，就会导致 js 引擎过渡循环，从而使得时间循环被阻塞

# Promise 对象的执行器函数

• Promise 对象在被创建时，会立即同步执行其执行器函数
• Promise 对象被 resolve 时，会在微任务队列中添加.then 方法注册的回调函数
• Promise 对象被 reject 时，会在微任务队列中添加.catch 方法注册的回调函数

# Promise

• promise 可以多次添加.then 方法，并获取到上一个.then 方法的返回值
• .then 方法第一个参数是成功回调，第二个参数是失败回调，.catch 方法是.then 方法的封装（不使用第一个参数）

# Promise.resolve

• 传入 promise 时，Promise.resolve 返回原来的promise实例 ，此时.then 相当于链式调用.then 方法
• 传入静态值时，Promise.resolve 会将值封装为 resolve 状态的 promise， 返回值是新生成的Promise实例

# 基本包装类型

• js 为了便于基本类型操作，提供了 3 个特殊的引用类型：Boolean、Number 和 String, 具有基本类型的特殊行为，可以创建基本包装类型 (字面量或普通函数调用)

let str = "字符串";

let str1 = str.substring(2); // 调用方法时，创建了基本包装类型

• 当读取一个基本类型时，js 会在栈中自动创建基本类型，当对基本数据类型使用一些方法的时候，js 引擎会自动创建一个临时的包装对象，使我们可以调用一些方法，这个临时对象存活的时间很短，操作完成后就会被销毁

let str = '蛙人'

str.age = 23; // 创建基本包装类型，但是调用后立即被销毁了

console.log(str.age) // undefined

• 通过 new 调用时，创建的是引用数据类型，两者的区别就在于：基本包装类型调用完之后立即被销毁

# CSS

# 行内元素（行盒）

• a span strong em i b u mark sub sup code label summary sup

# 块级元素（块盒）

• div ul li table dl dt ddd p h1-h6 details dialog

# 行内块元素（行块盒）

• button input img select textarea

# 块盒布局规则

• 水平盛满父元素
• 垂直方向相邻元素和父子级关系的 margin 合并
• 父子关系 margin 合并塌陷，父元素无视浮动的子元素
• 正常元素会被同级浮动元素所覆盖

# display 的值

• none block inline inline-block flex inline-flex grid inline-grid table inherit unset revert

# BFC 解决了什么问题

• 开启 BFC 之后，其子元素不会再产生 margin 塌陷的问题，不会无视浮动的子元素，自己不会被其他浮动元素所覆盖

# 如何开启 BFC

• float 属性
• position 属性不是 relative
• overflow 属性不是 visible
• display 不是 none
• 父元素设置 flex (flex 的伸缩项目)
• 多列容器（column-count 属性）
• 根元素 HTML

# 水平垂直居中

子元素高度未知

• 父元素设置 display:flex 或 grid, 子元素设置 margin:auto

由于垂直方向上块级盒子存在 margin 合并的布局特性，因此垂直居中的 margin:auto 无效，可以将父元素 display:flex 或者 grid。

• flex 布局

justify-content:center 和 align-items:center

• grid 布局

place-items:center 直接居中，justify-content:center 水平居中、align-content:center 垂直居中

• absolute + transform

position:absolute 然后 transform:translateY (-50%)

• absolute + calc
  子元素高度已知
• absolute + 负 margin

# css 画三角形

• 宽高设为 0，border 只有一处不透明
• clip-path:polygon(0 0,0% 100%,100%,50%)

# CSS 可继承的属性

visibility

• visibility 属性是继承而来的，父元素如果设置了 visibility, 子元素也会继承该属性

文本相关

• color、font、letter-spacing、line-height、text-align、text-shadow、text-transform、white-space、word-spacing、direction、unicode-bidi

用户界面状态相关的伪类

• :hover、:active、:focus 等，他们可以继承用户界面属性

# Vue

# Vue2 和 Vue3 有什么不同

• 响应式原理不同

vue2 使用 Object.defineProperty 拦截对象对应属性的 getter 和 setter，而 vue3 使用 Proxy 代理整个对象

• vue3 为组合式 api,vue2 为 options api

vue3 借鉴 react 抛弃面向对象的编程方式，采用函数式编程的架构方式，函数式编程的规范使得状态可以被集中式管理，具有更加清晰的状态转义逻辑。此外减小了心智负担，因为 options api 中组件逻辑和状态相分离，组件过大时不利于编写

• 生命周期钩子不同

vue3 摒弃 create 两个钩子，采用 setup 语法糖进行替代，因为没什么用，增加了 fragements

# React

# 操作系统

# 网络

# HTML

script 标签请求

• 浏览器解析 html 文档时，遇到 script 标签会停止解析，转而先执行或下载 script 标签中的 JavaScript 代码或外部文件，意味着脚本在下载和执行完成之前，页面的解析和渲染过程会被阻塞
• defer 脚本和 async 脚本都可以异步下载外部文件
• async 脚本加载完之后立即执行，而 defer 脚本需要等到 DOMContentLoaded 之后才执行

src 和 href 的区别

• href 表示超文本引用，href 是指与该页面有关联的内容，在 link 和 a 元素上使用
• src 表示资源的来源地址，在 img、script 和 iframe 等元素上
• 可替换的元素上 (img 标签) 使用 src 属性，src 属性仅仅嵌入当前资源到当前文档元素定义的位置，href 用于在涉及的文档和外部资源之间建立一个关系
• 请求 src 资源时，会将资源下载并应用到文档内，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载和执行完毕，而解析 href 资源时，会下载并且不会停止对当前文档的处理

iframe

• iframe 标签是一个内联框架 (inline-block 元素), 就是用来在当前 HTML 页面中嵌入另一个文档的，并且所有主流浏览器都支持 iframe 标签
• 优点
• • 原样嵌入网页内容
• • 更换快捷
• • 代码可重用
• 缺点
• • 不易管理、滚动条和样式难看、设备兼容性差、会增加 http 请求
• • iframe 的 src 不设置为 about:blank 的话，即使使用 clear 方法内存也不会释放掉