目录
HTML
meta标签
CSS，移动端布局
border-radius {巴德 - 瑞丢丝} 圆角
transparent {踹丝派瑞特} 透明色
top {踏泼} ，bottom {巴特姆}， left {莱夫特}， right {阮特}
清除浮动
文字换行
word-break:break-all; //可允许在单词内换行
word-break:normal; //浏览器中的默认换行行为
word-break:keep-all; //只能在半角空格或连字符处进行换行px，rem，em，vw，vh
height: calc(100vh - 50px); //计算视图高度 -50px 宽度同理
标准，怪异盒子模型
标准可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）
怪异 两部分 margin（外边距）、【border（边框）padding（内边距）content（内容）】（会压缩内容）
默认标准 通过 box-sizing: border-box;样式来改变成怪异
选择器优先级
important {因目泼嗯特}
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
怎么实现盒子居中？
//1:
//margin-top -left 50% {麻疹}
//transform: translate(-50%,-50%); {穿丝佛母} {穿丝雷特}
//2: 脱离文档流
//定位属性 父相子绝 固定定位 fixed {费格斯特}
//父：position {泼C神} relative {阮勒特务} 子：position absolute {爱泼丝鲁特}
//3:
//弹性盒子 center{森特}
//display: flex; align-items: center; justify-content: center;{接丝特烦 - 康太个特}左右两列布局，左侧固定，右侧自适应？
.e2 {
//左侧 固定
position: absolute;
width: 100px;
}
//右侧 自适应
.e3 {
width: 100%;
margin-left: 100px;
}相对定位、绝对定位、固定定位的区别？
CSS 提供了三种基本的定位机制：普通流、浮动和定位；通过这三种方式可实现页面的排版布局。
普通流
块级元素独自占一行，在文本流中从上到下一个接一个地排列；
行内元素在一行中并排排列，遇到父元素的边沿会换行继续排列；
display: block; //转换块级
display: inline; //转换行级
display: inline-block; //转换行内块浮动 浮动会让元素脱离标准文档流，不再占原来的空间，可以让多个块级元素并排显示。
float: right; {佛楼特}定位 (position) {泼C深} 定位是将元素定在某个位置，定位元素的层级要高于浮动元素； 通过定位可以让元素相对于其正常位置进行偏移出现在别的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置； 定位可以将元素放置在页面中的任何位置，这是标准文档流和浮动无法实现的。 CSS 通过 position 属性设置定位方式，其对应的属性值如下：
static 静态定位 {斯塔忒克} 按照标准文档流的规则来放置元素，基本不用；（默认）
relative 相对定位 {阮乐忒物} 相对于自己在标准文档流中的位置进行定位；原来的位置仍占有空间；
absolute 绝对定位 {爱博丝鲁特} 通过设置了定位的父级元素或祖先元素来进行定位：
如果父元素或祖先元素没有定位则相对于页面文档进行定位； 绝对定位的元素脱离标准文档流，不再占有原来的位置； 使用绝对定位的元素父元素一般设置为相对定位； fixed 固定定位 {废个斯特} 相对于浏览器可视窗口进行定位，位置与父元素无关； 会将元素固定在窗口的某个位置不随页面的滚动而改变；
想实现元素的定位，只设置定位方式还是不够的，需要结合 CSS 中的方位属性来实现定位
| 属性 | 作用 |
|---|---|
| left | 定位元素左外边距边界与其父元素左边界之间的偏移（元素的左边缘与参照元素位置间的距离） |
| right | 右边缘 |
| top | 上边缘 |
| bottom | 下边缘 |
浮动好处 ，定位好处
JS
本地存储
JS 中 ? 都可以怎么用？
可选链(.?)
空值合并运算符(??)
空值赋值运算符(??=)
let a;
let b = "啪啪啪";
let c = null;
let d = 0;
let e;
e ??= a?.b ?? c ?? d?.a ?? b;
console.log(e); // 啪啪啪三元运算符
true ? true : false ;改变this指向
for...in 和 for...of 的区别
宏任务，微任务
多维数组
keep-alive是什么
用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。 keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。总的来说，keep-alive用于保存组件的渲染状态。
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
<router-view></router-view>
</keep-alive>include定义缓存白名单，keep-alive会缓存命中的组件；excclude定义缓存黑名单，被命中的组件将不会被缓存；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。
内存管理的一种页面置换算法，对于在内存中但又不用的数据块（内存块）叫做LRU，操作系统会根据哪些数据属于LRU而将其移出内存而腾出空间来加载另外的数据。
深拷贝，浅拷贝
拷贝：
javascript中有两种数据类型，分别是基础数据类型和引用数据类型。基础数据类型是按值访问的，常见的基础数据类型有Number、String、Boolean、Null、Undefined，这类变量的拷贝的时候会完整的复制一份；引用数据类型比如Array，在拷贝的时候拷贝的是对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化
深拷贝和浅拷贝的区别？ 1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用地址
2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”
为什么要使用深拷贝？ 我们希望在改变新的数组（对象）的时候，不改变原数组（对象）
JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。 在JSON中，有两种结构：对象和数组。
JSON.stringfiy() 主要针对 对象和数组 转成字符串形式 如果用String()转的话会变成 [object object]
JOSN.parse() 分析字符串 是对象或数组类型 将其转为相对应的类型；
//[...arr] 比如 扩展语法也可以实现深拷贝 但是只能拷贝一层 像下面 嵌套很多数据就不行了
//let arr = [1,["a","b",{name1: "123",name2: "asd",name3: "zxc",},],3,];
//所以 JSON.parse(JSON.stringify(arr)) 实现 层层深拷贝 数据类型
字符串操作方法
数组操作方法
1.arr.sort() {萨儿特} 方法用于对数组的元素进行排序,并返回数组
arr.sort(function(a,b){
return a - b; //正序 （小到大）
})对象操作方法
1.Object.assign {艾塞应} 方法用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }2.Object.create() {亏艾特} 方法会使用指定的原型对象及其属性去创建一个新的对象。
JS中都有哪些数据类型
基本数据类型：
symbol {森博}
number、string、null、undefind、boolean、symbol(唯一值)、bigInt 引用数据类型： Object、Array、function , date、 regExp
如何判断数据类型？
typeof
可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包括number,boolean,string,function,object,undefined）； 可以使用typeof判断变量是否存在（如if(typeof a!="undefined"){...}）； Typeof 运算符的问题是无论引用的对象是什么类型 它都返回object
typeof {} // object
typeof [1,2] // objectinstanceof {因斯灯特 of}
除了使用typeof来判断，还可以使用instanceof。instanceof运算符需要指定一个构造函数，或者说指定一个特定的类型，它用来判断这个构造函数的原型是否在给定对象的原型链上。
判断已知对象类型的方法.instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。
var c= [1,2,3];
console.log(c instanceof Array) //true
// 要判断的变量 instanceof 数据类型
// 如果类型正确 返回true根据对象的contructor判断 {啃窜哥特}
constructor是prototype对象上的属性，指向构造函数。根据实例对象寻找属性的顺序，若实例对象上没有实例属性或方法时，就去原型链上寻找，因此，实例对象也是能使用constructor属性的。
除了undefined和null之外，其他类型都可以通过constructor属性来判断类型。
console.log('数据类型判断' - constructor);
console.log(arr.constructor === Array); //true
console.log(date.constructor === Date); //true
console.log(fn.constructor === Function); //true使用Object.prototype.toString.call()检测对象类型 { ---- 趴图 太泼 ---- 考 }
可以通过toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用
这是对象的一个原生原型扩展函数,用来更精确的区分数据类型。
这样可以看到使用Object.prototype.toString.call()的方式来判断一个变量的类型是最准确的方法。
var gettype=Object.prototype.toString
gettype.call('aaaa') 输出 [object String]
gettype.call(2222) 输出 [object Number]
gettype.call(true) 输出 [object Boolean]
gettype.call(undefined) 输出 [object Undefined]
gettype.call(null) 输出 [object Null]
gettype.call({}) 输出 [object Object]
gettype.call([]) 输出 [object Array]
gettype.call(function(){}) 输出 [object Function]网络操作
Authorization {偶搜阮Z深} 授权
跨域
toko
Ajax
是前后台交互的能⼒ 就是客户端给服务端发送消息的⼯具，以及接受响应的⼯具
在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。默认异步执⾏
(比如分页器)
HTTP
状态码分类表
类别 原因短语 1xx Informational（信息性状态码） 接受的请求正在处理 2xx Success（成功状态码） 请求正常处理完毕 3xx Redirection（重定向） 需要进行附加操作以完成请求 4xx Client error（客户端错误） 客户端请求出错，服务器无法处理请求 5xx Server Error（服务器错误） 服务器处理请求出错
各类别常见状态码：
2xx （3种）
200 OK：表示从客户端发送给服务器的请求被正常处理并返回；
204 No Content：表示客户端发送给服务器的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；
206 Patial Content：表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range指定范围的实体内容。
3xx （5种）
301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；
302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；
301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）303 See Other：表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源；
302与303的区别：后者明确表示客户端应当采用GET方式获取资源304 Not Modified：表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码；
307 Temporary Redirect：临时重定向，与303有着相同的含义，307会遵照浏览器标准不会从POST变成GET；（不同浏览器可能会出现不同的情况）；
4xx （4种）
400 Bad Request：表示请求报文中存在语法错误；
401 Unauthorized：未经许可，需要通过HTTP认证；
403 Forbidden：服务器拒绝该次访问（访问权限出现问题）
404 Not Found：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；
5xx （2种）
500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；
503 Server Unavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；
什么是 AJAX？如何实现
动态路由
GIT
git 成员合作流程
merge {么赤} 合并 checkout {掐克奥特} 检验
clone {可喽恩特} 克隆
origin {欧润金} 起源
VUE2 和 VUE3
创建项目 vue create xxx
create{亏艾特} 创建
Vue2与Vue3的区别
Vue 中的虚拟DOM
响应式，双向绑定原理
router 和 route
生命周期 2.0？ 3.0？
全局过滤，全局Loading深入了解
计算属性，监听属性
组件传值
子组件 定义在 Components {康目旁嫩丝} 组件中
插槽，原理
slot {丝辣特} 插槽
template {太目 佩勒特} 模板
Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope {四狗泼}
匿名插槽（默认插槽）
在子组件标签中 写入要插的元素 在子组件中 直接 <slot></slot>标签 就显示了
具名插槽
在子组件标签中 在插的元素外包裹 一个 template标签 用v-slot:定义好一个名字
在子组件 <slot></slot>标签上定义 name属性 = 定义好的名字 就是具名（显示名字对应的元素）
作用域插槽
作用域插槽是子组件可以在slot标签上绑定属性值，在父组件可以拿到子组件的数据，通过子组件绑定数据传递给父组件
//子组件
<slot :myData="name"></slot>
data() {
return {
name: "作用域插槽",
};
},
//父组件
<template v-slot="slot">
{{ slot.myData }} //作用域插槽
</template>addroute
vue2和vue3双向数据绑定原理发生了改变
0, 比vue2性能快 1 ~ 2倍
1，Vue2使用选项类型API（Options API）对比Vue3`合成型API（Composition API）
vue 2.0 生命周期对比 3.0 生命周期
2.0 周期名称 3.0 周期名称 说明
beforeCreate setup 组件创建之前
created setup 组件创建完成
beforeMount onBeforeMount 组件挂载之前
mounted onMounted 组件挂载完成
beforeUpdate onBeforeUpdate 数据更新，虚拟 DOM 打补丁之前
updated onUpdated 数据更新，虚拟 DOM 渲染完成
beforeDestroy onBeforeUnmount 组件销毁之前
destroyed onUnmounted 组件销毁后beforeCreate {笔伐 贵诶特} created {可瑞得特} setup {赛德 奥珀}
beforeMount {笔伐 芒特} mounted {忙得特} on {昂}
beforeUpdate {笔伐 欧珀 得特} updated {欧珀 得忒特} onBeforeUnmount {昂 笔伐 昂慢暗特}
beforeDestroy {笔伐 迪斯 抓哎} destroyed {迪斯 抓哎 特} onUnmounted {昂 昂慢暗得特}
vue3setup
在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用
ref使用: 定义基本数据类型
import {ref} from 'vue'
setup(){
//名字
const name =ref('小李')
//年纪
const age=ref(18)
// 方法
function plusOne(){
age.value++ //想改变值或获取值 必须.value
}
//必须返回 模板中才能使用
return {
name,age,plusOne
}
}reactive使用 ： 定义引用数据类型
import {reactive} from 'vue'ES6
新特性：
就比如 常用的 块级作用域{} let 和 const 箭头函数 解构赋值 模板字符串 扩展运算符 Promise
//块级作用域{}:同函数一样 变量，函数不能跨块级访问
//let：定义的变量不能重复，没有变量提升 块级作用域中不可访问
//const：定义的常量不能重复，没有变量提升，不能修改基本数据类型，可修改引用，因为存的是地址
//模板字符串：使用反撇号定义，其中用模板占位符${}插入值，他与普通的字符串不同点是，模板字符可以多行书写；箭头函数
ES6 方法 使用 => 这种书写定义箭头函数
-
箭头函数的this
是静态的，始终指向函数声明时所在作用域下的this的值； -
不能作为构造实例化对象；
-
不能使用 arguments 变量；...变量 代替 {啊Q焖丝}
-
如果函数 形参 只有一个那可以省略小括号 ，如果函数中只有一条语句 那花括号和 return 也可以省略掉
解构赋值
ES6允许按照一定的模式，从数组或对象中提取值，给变量进行赋值，称为解构赋值。
let [A,B,C] = [1,2,3];扩展运算符
对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
let arr = [...arr,...data];其他还有： Set Map Symbol
单页面(SPA) 和 多页面(MPA)
区别：
单页面 是组件之间跳转 （被替换的页面片段进行 隐藏或删除 新的页面片段显示出来 实现（假）跳转）
利用路由机制实现 HTML 内容的变换
一开始加载页面时间较长 之后 用 ajax 技术 来局部刷新页面 速度快
可以转场动画
多页面 是 页面之间跳转
切换一个页面就得重新加载渲染一次
Echarts
后台使用
npm install echarts --save
关于echarts，你都做过什么类型的数据可视化？ 可以跟他说，使用他们的折线图和柱状图，或者圆形图，将一些用户增长数量，或者一些别的信息数据，根据官网api的数据格式展示出来
微信小程序
uni-app
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
项目优化
1、规范代码，去除没有被用到的变量声明以及引用。 （eclipse配置好以后都会出现警告标志）
2、规范代码，替换过时的和不推荐使用的方法。
3、注释优化。一种是加和改，一种是减。加，就是对于那些负责具体功能和业务逻辑的类以及实体类的属性，如果没有注释我们应该加上注释，这样方便后续的维护，起码让人一眼就知道这个类、这个方法、这个属性是什么作用是什么意思。
改，就是对于明显不合理的注释进行修改，有的时候可能整个类被复制过来改个名字，这种情况就极有可能出现注释完全不搭调的情况；当然，也有可能是看起来注释了，实际上跟没注释没什么区别的注释。
减，就是对于那些被注释了的代码进行删除，当然了，这里我觉得也应该包括那些没有被删除的system.out.print。当然这种情况可能要根据实际情况，像我们这次遇到的完全是之前的人注释的，压根儿不知道干嘛的代码，多半是没人会再看的，我觉得就可以完全删除，省的占用空间还碍眼。
4、这一步可能是在上一步之后，也可能就和上一步同时进行，因为很可能就是在上一步的过程中发现的问题，就是代码逻辑上的优化。
5、这里的数据库优化我觉得也可以分为两步，一个是sql语句的优化，一个就是表结构、索引相关的优化。
视频播放器
ESLint
官网上告诉我们，ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具，哦，所以我们可以知道，ESLint 就是一个工具，而且是一个用来检查代码的工具。
代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。
JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。
ESLint 这样的工具可以让程序员在编码的过程中发现问题，而不是在执行的过程中发现问题。
（代码统一化，能解决没使用的变量和方法，提升优化）
其他面试题
VUE 中父如何向儿子、儿子的儿子、儿子的儿子的儿子... 传参数？ 答：1. 父向子一层一层的传 2. 使用 vuex 3. 使用 project/inject 方法直接向子孙传 Vue 中有个 provide和 inject 可以实现父向子，子孙，子孙。。。。直接传参数。
解决小数点计算精度有误问题
1.0 + 2.0 = 3.00000000000004
使用 toFixed() 保留一位小数点 {兔 菲戈斯特}
代码题
//分别输出什么 变量提升，this指向
var A = 10;
//var thie = this;
function a() {
var A; //变量提升，没赋值
console.log(A); //undefined 2.
A = 20;
//thie.A = A 这样window才会有 值
console.log(window.A); //undefined 3.
A = 30; //赋值
console.log(A); //30 4. }
console.log(A); //10 这个和函数没关系 1.
a();//调用//js中 a==1&&a==2&&a==3 这个条件什么时候能成立
var a = [1,2,3];
a.join=a.shift
console.log(a==1&&a==2&&a==3) //true
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
