什么是跨域，如何解决跨域问题？
由于浏览器同源策略，凡是发送请求url的协议，域名，端口三者之间其一与当前页面地址不同即为跨域
解决方式：cors、jsonP、http代理
cors:服务器端app.js中添加app.use(cors({
origin:['http://127.0.0.1:5500'],//为客户端地址
credentials:true
}))
BS是什么
BS是浏览器和服务器结构，一般指B/S结构，是WEB兴起后的一种网络结构模式，这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。
JavaScript和Java的区别
java是面向对象语言，javascript是脚本语言
java的源代码需要编译后才能执行，javascript是一种解释性编程语言，无需编译，有浏览器解释执行
java是强类型语言，所有的变量在编译前都需要声明，javascript是弱类型语言，变量可以不做声明，javascript的解释器在运行时检查推断其数据类型
http和https的区别
http是超文本传输协议，信息是明文传输，https是具有安全性的ssl加密传输协议
http和https连接方式不同，用的端口也不同，前者是80，后者是443
http连接很简单是无状态的，https是有ssl+http构成的可进行加密传输，身份认证的网络协议比http安全
常用的http状态码
2xx (成功)
表示成功处理了请求的状态码。
200(成功)服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。如果是对您的 robots.txt 文件显示此状态码，则表示 Googlebot 已成功检索到该文件。
201(已创建)请求成功并且服务器创建了新的资源。
202(已接受)服务器已接受请求，但尚未处理。
203(非授权信息)服务器已成功处理了请求，但返回的信息可能来自另一来源。
204(无内容)服务器成功处理了请求，但没有返回任何内容。
205(重置内容)服务器成功处理了请求，但没有返回任何内容。与 204 响应不同，此响应要求请求者重置文档视图(例如，清除表单内容以输入新内容)。
206(部分内容)服务器成功处理了部分 GET 请求。
3XX 重定向
301 Moved Permanently 永久重定向，表示请求的资源已经永久的搬到了其他位置
302 Found 临时重定向，表示请求的资源临时搬到了其他位置
303 See Other 表示请求资源存在另一个URI，应使用GET定向获取请求资源
304 Not Modified 表示客户端发送附带条件的请求（GET方法请求报文中的IF…）时，条件不满足
4XX 客户端错误
400 Bad Request 表示请求报文存在语法错误或参数错误，服务器不理解
401 Unauthorized 表示发送的请求需要有HTTP认证信息或者是认证失败了
403 Forbidden 表示对请求资源的访问被服务器拒绝了
404 Not Found 表示服务器找不到你请求的资源
5XX 服务器错误
500 Internal Server Error 表示服务器执行请求的时候出错了
503 Service Unavailable 表示服务器超负载或正停机维护，无法处理请求
504 网关超时
get和post请求的区别
get数据会在url上显示，post的数据不需要再url中显示
post传输的数据量大，可以达到2M,get数据受url长度的限制，大约只能传输1024字节
post是向服务器发送数据，get是向服务器请求数据
js中如何判断是否是数组类型(基本数据类型使用typeof)
--Object.prototype.toString.call(需要校验的变量);
AJAX请求的五个步骤
1.创建一个XMLHttpRequest异步对象
2.设置请求方式和请求地址
3.接着，用send发送请求
4.监听状态变化
5.最后，接收返回的数据
javascript面向对象中继承实现
prototype原型链方式
call()/apply()
三角形
div {
width: 0;
height: 0;
border-top: 50px solid transparent; /*这行去掉也行*/
border-bottom: 50px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
li与li之间有看不见的空白间隔是什么原因引起的
既然是因为<li>换行导致的，那就可以将<li>代码全部写在一排
ul{letter-spacing: -5px;}字符间隔
ul li{letter-spacing: normal;}默认值
行内元素和块级元素及其区别
--行内元素 span a img i u input del b br
--块级元素 div table form p ul h1~h6 hr pre
--块级元素总是从新的一行开始，元素独占一行，默认垂直向下排列
--高宽，内外边距设置有效
--行内元素和其他元素都在一行，会在一条水平线上排列
--高宽不可控设置无效，由内容决定
--内外边距左右有效，上下会撑大但是不会产生边距效果
display的用法
--display:inline;转换为行内元素；
--display:block;转换为块状元素；
--display:inline-block;转换为行内块状元素。
--display:none;隐藏且不占用空间
--display:flex;弹性布局
css上下左右居中
--父元素: display: flex; height:100%;justify-content:center;align-items:center;
--父元素相对定位，子元素绝对定位，子元素left: 50%;
top: 50%;
transform: translate(-50%, -50%);
--父元素相对定位，子元素绝对定位，子元素top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
双飞翼布局：
页面顺序：中左右
中左右float:left;
中width:100%
左：margin-left: -100%;
右margin-left: -自身宽度
属于过渡transition的属性有哪些
常用的也就是：宽度、高度、字体大小颜色、显示隐藏、2D、3D、定位之后的top/left/right/bottom、内外边距。 不支持：displya属性
rgba和opacity的透明效果有什么不同
opacity 可以影响字体以及红色小方块的透明度，而 rgba 不会。
说明了子元素会继承父元素的 opacity 属性
px、em、rem区别
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
REM
rem是CSS3新增的一个相对单位，但相对的只是HTML根元素。
什么是标签语义化？标签语义化有什么优点？
义化即让标签元素拥有其含义，当你使用其标签时知道这个标签代表着什么含义
1.书写代码时有助于理清思路，使页面结构清晰，团队合作
2.维护者在网站维护时更加方便快捷
3.有利于搜索引擎优化（SEO）
header、nav、footer、main、table、p、img
javascript中字符串和数组常用的方法和属性
--字符串 charAt/charCodeAt/concat/indexOf/lastIndexOf/length/search/slice/split/substr/substring/toLowerCase/toUpperCase/
--数组unshift/shift/push/pop/concat/join/reverse/slice/splice/sort/toString/
你如何获取浏览器URL中查询字符串中的参数？
window.location.href;
清除浮动的几种方法
--父级定义height
--结尾处加空 div 标签 clear：both
--父级 div 定义 overflow：hidden
--父级 div 定义 overflow：auto(必须定义width或zoom:1，同时不能定义height)
--父级 div 定义 伪类：after 和 zoom（推荐）
//清除浮动代码
.clearfix : after {
content: “ “;
display: block;
clear : both;
visiblity:hidden;
height :0;
line-height :0;
}
.clearfix {zoom: 1}
-- 双伪元素法：（推荐）
.clearfix:before ,
.clearfix : after {
content : “ “;
display: block;
clear : both;
}
.clearfix {
zoom :1;
}
数组去重方法
--...new Set(arr)
-- 新建一个数组来存放arr中的值，用数组的indexOf方法去重
--利用数组的sort方法再循环相邻的数据判断是否重复
--创建新对象，根据属性不能相同的特点去重
简述flex布局中，flex-grow flex-shrink flex-basic的含义
flex-grow：该属性来设置，当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。默认值为0
flex-shrink
该属性来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。默认值为1
flex-basis：该属性来设置该元素的宽度。 当然，width也可以用来设置元素宽度。如果元素上同时设置了width和flex-basis,那么flex-basis会覆盖width的值。他的默认值为auto
总结
如果父级的空间足够：flex-grow有效，flex-shrink无效。
如果父级的空间不够：flex-shrink 有效，flex-grow无效。
js实现重载和重写
函数名相同，函数的参数列表不同(包括参数个数和参数类型)，根据参数的不同去执行不同的操作。
重写本意是指子类继承父类的方法，但是子类有时候并不想完全拿着父类的方法用，所以就重新写了该方法，不过并不影响父类，也叫方法覆盖。
闭包
--只要希望给一个函数保护一个可反复使用的专属变量，有防止这个变量被外部篡改
--用外层函数包裹需要保护的变量和内部函数
--外层函数用return把内层函数返回
--必须调用外层函数获取return的内层参数，并保存到变量中反复使用
--闭包的缺点，比一般函数多占一块内存，用完后尽快释放
判断this
1. obj.fun() this->obj
2. new Fun() this->new正在创建的子对象
3. 类型名.prototype.共有方法=function(){ ... }
this->将来调用这个共有方法的.前的子对象
4. fun() 和 (function(){ })() 和回调函数中的this->window
5. 访问器属性中的this，指访问器属性所在的当前对象。
6. DOM和jQuery事件处理函数中的this->当前正在触发事件的这个元素对象
7. jQuery.prototype.自定义函数=function(){
… this指将来调用这个自定义函数的点前的一个jq子对象 …
}
8. VUE中的this都指当前vue对象或当前组件对象。
3个使用this的典型应用
1、在html元素事件属性中使用，如：
<input type=”button” οnclick=”put(this);” value=”点击一下”/>
2、构造函数
function click(name, color) {
this.name = name;
this.color = color;
}
3、input点击，获取值
<input type="button" id="put" value="点击一下" />
<script type="text/javascript">
var btn = document.getElementById("put");
btn.onclick = function() {
alert(this.value); //此处的this是按钮元素
}
</script>
严格模式"use strict"
--禁止给未声明的变量赋值
--静默失败升级为错误
--普通函数调用的this不指window 而是指向undefined
--禁止arguments.callee
保护对象数据
--writable 属性值是否可修改
--enumerable 是否可遍历到，只防for in
--configurable 控制属性是否可删除 ，writable、enumerable开关是否可修改
保护对象结构
- 防拓展:禁止给对象添加新属性
Object.preventExtensions(对象)
二、密封：在兼具防扩展的基础上，进一步防止删除现有属性
Object.seal(对象)
三、冻结：在密封基础上，进一步禁止修改属性值
如何：Object.freeze(对象)
原理：自动将所有属性的writable:false
ES5新增：
1.保护对象
2.Object.create()
3.替换this：
call()、apply()、bind()
4. 数组函数every是否所有元素都符合要求、some是否包含、forEach、map、filter过滤、 reduce汇总
ES6新增：
- 模板字符串
- let
- 箭头函数
- for of
- 参数增强
- ...语法糖 打散
- 解构 数组解构，对象解构
- 继承 extends super
- Promise多个异步任务顺序执行，Promise对象是用于表示一个异步操作的最终状态（完成或失败）以及其返回的值。
替换this的三种用法和区别
--call()、apply()、bind() 都是用来重定义 this 这个对象的！
--bind会产生新的函数，（永久绑定this）
--call和apply不会产生新的函数，只是在调用时，绑定一下而已。
--call和apply的区别，第一个参数都是要绑定的this，apply第二个参数是数组（打散数组再传参）
promise的三个状态
promise有三种状态：pending/reslove/reject 。pending就是未决，resolve可以理解为成功，reject可以理解为拒绝。
let和var声明变量的区别：
--let 声明的变量具有块作用域的特征。
--let在同一个块级作用域，不能重复声明变量。
--let 声明的变量不存在变量提升
--const声明一个只读的常量。一旦声明，常量的值就不能改变。，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
--const的作用域与let命令相同：只在声明所在的块级作用域内有效。
--const命令不存在变量提升
--const命令不允许重复定义
--如果使用关键字 var 声明一个变量，那么这个变量就属于当前的函数作用域， 如果声明是发生在任何函数外的顶层声明，那么这个变量就属于全局作用域
--如果在声明变量时，省略 var 的话，该变量就会变成全局变量，如全局作用域中存在该变量，就会更新其值。
--var 声明的变量存在提升
怎么添加，移除，移动，复制，创建和查找节点
--创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
--添加、移除、替换、插入
appendChild() //添加已经存在的元素
removeChild() //移除元素节点
replaceChild() //替换元素节点
insertBefore() //放在特定的位置上
cloneNode() //复制
--查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
DOM
五件事，增删查改+事件绑定
2大类关系，6个属性
父子关系：4种
parentElement父元素
children 所有直接子元素
firstElementChild 第一个直接子元素
lastElementChild最后一个直接子元素
兄弟关系：2种
previousElementSibling元素的后一个兄弟
nextElementSibling元素的前一个兄弟
按id,class,标签名，name名、选择器查找
元素修改：
内容修改 --修改html内容(innerHtml)
纯文本内容(textContent)
表单元素
修改属性 旧核心DOM --getAttribute/setAttribute/hasAttribute/removeAttribute
新HTML DOM –元素.属性名
class属性 核心DOM getAttribute HTM DOM:元素对象.className
特殊：bool类型不能用旧核心DOM 修改 只能用HTML DOM 元素.属性名
自定义扩展属性：核心DOM getAttribute HTML DOM 元素。dataset.自定义属性名(去除自定义属性名前的data)
修改样式
DOM事件委托：三步
- 事件绑定在父元素上
- e.target代替this
- 判断当前目标元素是不是想要的
jquery中prop和attr的区别
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
jquery中$的原理
new jQuery()
jquery中的$(document).ready()和window.onload的区别
jquery的ready方法在网页中的DOM结构加载完成后执行。window.onload()必须等到网页全部加载完毕(包括图片等)才执行。
前者可以执行多次，不会上一次覆盖。后者只能执行一次，如果第二次，那么第一次的执行的会被覆盖。
为什么组件中的data一定要是一个函数
反复调用，创建新对象，避免组件间数据冲突
vue中一切都是组件，组件分三大类
1.根组件(root): new Vue
2.全局组件 Vue.component()
3.子组件
既有父组件，又有子组件，生命周期执行顺序
父：beforeCreate created beforeMount
子：beforeCreate created beforeMount mounted
父：mounted
vue中watch是干什么的
watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法
Vue中v-if和v-show的区别
vue-show本质就是标签display设置为none，控制隐藏
vue-if是动态的向DOM树内添加或者删除DOM元素
避免组件间样式冲突
scoped和定义父元素class
ts新特性：
类型检查
编译时错误检查
接口
访问修改
模块
VUE3的绑定原理：
ES6的Proxy代理+虚拟DOM树
createApp(App).use(store).use(router).mount('#app’) • //代替了new Vue()
ref是vue3提供的一个函数，专门将任何东西包装为一个能被监 视的proxy对象。
vuex是什么？怎么使用？哪种功能场景使用它？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。
场景：多个组件共享数据或者是跨组件传递数据时
vue传参方式
通过路由中的name属性来确定匹配的路由
通过router-link中的to属性
通过url传参
使用path来匹配路由组件，然后通过query来传递参数
vue双向绑定原理
数据劫持结合发布者订阅模式
数据劫持结合发布者订阅模式
数据劫持结合发布者订阅模式
vue父子组件生命周期执行顺序
父：
对MVVM的理解
界面View+模型Model+视图模型ViewModel
基于前端开发的架构模式，在MVVM架构下，View和Model之间没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上
vue中$router和route的区别
router是VueRouter的一个对象，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push
route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等
vue生命周期钩子函数有哪些
beforeCreate表示实例完全被创建之前，会执行这个函数
created data 和 methods 都已经被初始化好了！
beforeMount表示模板已经在内存中编译完成，但是尚未把模板渲染到页面中
mounted表示内存中的模板已经真实的挂载到页面中，用户已经可以看到渲染好的页面
beforeUpdate界面还没有被更新，但是数据肯定被更新了
updated页面和 data 数据已经保持同步了，都是最新的
beforeDestory 组件销毁前
destoryed组件销毁后
CSS中可继承的属性有哪些
字体系列属性：font-size
文本系列属性：text-align、line-height、color
元素可见性：visibility
表格布局属性：border-spacing、border-collapse
列表属性：list-style
光标属性：cursor
VUE中路由跳转的方式有哪些
标签跳转router-link
事件跳转this.$router.push();
this.$router.replace(path)
this.$router.go(n)
this.$router.forword()
this.$router.back()
created和mounted的区别
created 在模版渲染成html前调用，通常初始化某些属性值
mounted 在模版渲染成html后调用，再对html和dom节点进行操作
vue双向数据绑定的原理
就是用Object.defineproperty()重新定义（set方法）对象设置属性值和（get方法）获取属性值的操纵来实现的
this的指向
obj.fun() obj
new Fun() 正在创建的新对象
fun()中的this window
访问器属性中的this 访问器属性所在的当前对象
DOM和JQUERY中的this 当前正在触发事件的对象
原型和原型链
js中的对象是基于原型的，它定义并实现了一个新对象所必须包含的属性列表
每个实例对象都有自己的原型或构造函数，这些原型的构造函数也可能会有自己的原型或者构造函数，以此类推，这些原型组成一种类似链式的结构
VUEX中的action和mutaions
流程顺序
修改state 视图触发Action ,Action再触发Mutation
mutation专注修改state 理论上是修改state的唯一途径
action：业务代码，异步请求
Mutation必须同步执行
Action可以异步，但不能直接操作state
H5新特性
time email url range header footer
清除浏览器缓存
meta方法
ajax清除浏览器缓存
cache:false
随机数
http请求的header里包括哪些
可以接收的媒体类型
接收的编码方法
接收到语言
请求资源的地址
有哪三种存储数据的方式，有什么区别
sessionStorage
localStorage
cookier
都保存在浏览器端
传递方式不同，cookie数据始终在同源的http请求中携带，在浏览器和服务器间来回传递
sessionStorage和localStorage仅在本地保存
sessionStorage仅在当前浏览器窗口关闭前有效
localStorage始终有效
cookie只在过期时间前有效
sessionStorage不在不同的浏览器窗口中共享
localStorage和cookie在所有同源窗口中都共享
Ajax运行机制
浏览器服务器之间实现异步数据传输，页面不跳转，拒不刷新
AJax请求get和post的区别
get参数在url中显示，post不会
post传输数据量大2M，get1024字节
get需要注意缓存问题，post不需担心
post请求必须设置Content-Type
双向数据绑定原理
数据劫持结合发布者-订阅者模式
Position的absolute和fixed的区别
共同点：改变元素出现方式 display被设置为block;
元素脱离普通流，不占空间
默认覆盖在非定位元素上
不同点：absolute的根元素是可以设置的，fixed的根元素固定为浏览器窗口
重排重绘的区别
重排：部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算，表现为重新商城布局，重新排列元素
重绘：由于节点的几何属性发生改变或者样式发生改变，屏幕上的部分内容需要更新，表现为某些元素的外观被改变
减少页面加载时间的方法
1.优化图片
2.图像格式选择
3.优化CSS
4.标明宽高
5.减少http请求
6.压缩css，js代码
如何用原生js给一个按钮绑定两个clikc
btn.addEventListener('click',ck1)
btn.addEventListener('click',ck2)
js中的定时器有哪些，区别及用法
setTimeOut; 延迟时间后执行，一次性定时器
setInterVal; 间隔时间重复执行
setImmediate 任务队列完成后执行
nextTick
事件冒泡和事件代理
一个元素接收到事件的时候，会把事件传给父级
阻止方法 stopPropagetion();
当需要给父元素的很多子元素添加事件时，可以通过把事件添加到父元素并把事件委托给父元素来触发事件处理函数
盒子模型
内容 填充 边界 边框
js的typeof返回哪些数据类型
undefined string number boolean object function
js的事件流模型都有什么
冒泡事件流；
捕获事件流
DOM事件流
如何阻止事件冒泡
e.stoppropagation
解释jsonP的原理，以及为什么不是真正的ajax
利用script元素的开发策略
ajax是通过xmlHttpRequest获取非本页的内容，而jsonp是调用js脚本
== 和===的不同
==代表相同，比较的时候可以转换数据类型
===代表严格相同，只要类型不匹配就返回false;
数组对象排序
person.arr((a,b)=>{
return a.age-b.age;
})
如何判断一个对象是对象还是数组
Object.prototype.toString.call()
apply call bind三者之间的相同点和不同点
相同点：都可以改变this的指向
不同点：apply接收的参数从第二位开始可以村委数据
call apply 是改变this后立即执行函数
bind不是用在函数执行的时候，而是用在函数定义的时候
