深拷贝，浅拷贝
- 深拷贝是开辟一块新的内存地址，将源对象的各个属性逐个复制过去，对拷贝对象和源对象各自的操作互不影响
- 递归方法：（深拷贝）
function deepCopy(obj) {
var out = (obj.constructor === Array) ? [] : {};
for (var i in obj) {
if (typeof obj[i] === 'object') {
out[i] = (obj[i].constructor === Array) ? [] : {};
out[i] = deepCopy(obj[i]);
} else {
out[i] = obj[i];
}
}
return out;
}
- 浅拷贝（会导致引用类型A和引用类型B指向同一块内存地址。改变其中一方内容，都是在原来的内存上做修改会导致对象和源对象都发生改变）
let obj = {a: 1}
obj1 = obj
https://www.cnblogs.com/jiajiamiao/p/11641574.html
promise
- Promise是一种用于解决异步问题的思路、方案或者对象方式。
const fn = new Promise(function (resolve, reject) {
setTimeout(()=>{
let num = Math.random()
if (num > 5) {
resolve(num) //返回值
} else {
reject(‘error’) // 报错
}
},3000)
})
fn.then((res)=>{
console.log(res) // 随机数
},(err)=>{
console.log(err) // 报错
})
https://www.cnblogs.com/lunlunshiwo/p/8852984.html
响应式，数据绑定
- 数据驱动：Vue.js 一个核心思想是数据驱动。所谓数据驱动是指视图是由数据驱动生成的，对视图的修改，不会直接操作 DOM，而是通过修改数据。
- 在vue.js里面只需要改变数据，Vue.js通过Directives指令去对DOM做封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM的变化，DOM是数据的一种自然的映射。vue.js还会对View操作做一些监听（DOM Listener），当我们修改视图的时候，vue.js监听到这些变化，从而改变数据。这样就形成了数据的双向绑定。
- 大致上是使用数据劫持和订阅发布实现双向绑定。通过实例化一个Vue对象的时候，对其数据属性遍历，通过Object.defineProperty()给数据对象添加setter getter，并对模板做编译生成指令对象，每个指令对象绑定一个watcher对象，然后对数据赋值的时候就会触发setter，这时候相应的watcher对其再次求值，如果值确实发生变化了，就会通知相应的指令，调用指令的update方法，由于指令是对DOM的封装，这时候会调用DOM的原生方法对DOM做更新，这就实现了数据驱动DOM的变化。同时vue还会对DOM做事件监听，如果DOM发生变化，vue监听到，就会修改相应的data
https://blog.csdn.net/tangxiujiang/article/details/79594860
$set
- 受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
- 要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。
数组===> this.$set( Array, index , value)
对象===>this.$set(Object,''key'',value)
https://blog.csdn.net/aaa333qwe/article/details/80362117
$nextick
- 定义： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
- 用法1：created
Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。- 用法2：
当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它
https://blog.csdn.net/zhouzuoluo/article/details/84752280
节流函数
- 函数节流：针对调用频率高的函数，通过设置定时器，使其在执行后间隔一段时间，才进行下一次的执行，避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。
- 最常见的一些需要节流的事件：onresize，scroll，mousemove ,mousehover，因为这些事件会在页面中频繁被触发
- 主要实现思路就是通过setTimeout定时器，通过设置延时时间，在第一次调用时，创建定时器，写入需要执行的函数。第二次调用时，会清除前一个定时器并设置新的定时器。如果这时前一个定时器暂未执行，则将其替换为新的定时器。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用
document.querySelector('.box').addEventListener('mouseenter',function(){
console.log('鼠标进来啦')
})
节流函数
var clock
document.querySelector('.box').addEventListener('mouseenter',function(){
clearTimeout(clock)
clock = setTimeout(function(){
console.log('鼠标进来啦')
},1000)
})
https://www.jianshu.com/p/be095def79ec
子组件改变父组件的值
$emit直接调用函数，把参数传给父元素，父元素调用函数时，赋值就可以了。
https://www.cnblogs.com/doing-good/p/10862491.html
vue .sync修饰符
- vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决
<text-document :title.sync="doc.title"></text-document>
当子组件需要更新 title 的值时，它需要显式地触发一个更新事件：
this.$emit('update:title', newValue)
https://www.cnblogs.com/00feixi/p/11526057.html
跨域： jsonp、 document.domain+iframe、window.name、window.postMessage、服务器上设置代理页面
jsonp的原理是动态插入script标签CSS Sprites 图片精灵
继承：
继承：子类可以使用父类的所有功能，并且对这些功能进行扩展。继承的过程，就是从一般到特殊的过程。
var arr = [8, 7, 6, 5, 4, 3, 2, 1];
function maoPao(s) {
for (var i = 1; i < arr.length; i++) { //进行了7次
for (var j = 0; j < arr.length; j++) {
if (arr[j] > arr[j + 1]) {
var temp; //空杯子
temp = arr[j]; //大叔放到空杯子
arr[j] = arr[j + 1]; //小数放到小的位置上
arr[j + 1] = temp; //da数放到大的位置上
}
}
}
return arr;
}
console.log(maoPao(arr))
https://www.cnblogs.com/yy0419/p/11137205.html
- es6新增属性，与es5比较
块级作用域 关键字let, 常量const
箭头函数
(1).简化了代码形式，默认return表达式结果。
(2).自动绑定语义this，即定义函数时的this。
promise异步请求数据
set,map
字符串模板 Template strings
var name = "Bob", time = "today";
Hello ${name}, how are you ${time}?
// return "Hello Bob, how are you today?"
https://www.cnblogs.com/sunshinezjb/p/9248533.html
作用域（JavaScript中的作用域与变量声明提升）
https://baijiahao.baidu.com/s?id=1627502571462484522&wfr=spider&for=pc跨域
webpack
jquery 根据name获取元素
$('input[name="nw"]' $("[name='theName']");
- canvas画圆
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI); x,y,r,开始度数，结束度数，圆是360度（2*Math.PI）
ctx.stroke();
https://www.w3school.com.cn/tags/canvas_arc.asp
怎么理解闭包,内存泄漏
https://www.cnblogs.com/wkxdd/p/11222480.html媒体查询
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
https://www.runoob.com/cssref/css3-pr-mediaquery.html
- 通过navigator属性检查浏览器是什么浏览器
var cu = navigator.userAgent;
if('ActiveXObject' in window){
alert('是ie浏览器')
}else if(/firefox/i.test(cu)){
alert('是火狐浏览器')
}else if(/chrome/i.test(cu)){
alert('是谷歌浏览器')
}
https://blog.csdn.net/qq_35872777/article/details/85272300
页面跳转
https://blog.csdn.net/zhangkeke_/article/details/79730597生命周期
原型链？？
原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
- 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
- js中的内存泄露
- 定义：程序不需要的内存，由于某些原因其不会返回到操作系统或者可用内存池中。 内存泄露会导致（运行缓慢 ，高延迟，崩溃）的问题
- 常见的导致内存泄露的原因有：
1；意外的全局变量
2；被遗忘的计时器或回调函数
3；脱离文档的DOM的引用
4；闭包
- 跨域
1.CORS跨域资源共享 后端需要设置Access--Control-Allow-Credentials:true ****
2.jsonp实现跨域：动态创建script，利用src属性进行跨域
3.nginx代理跨域
4.nodejs中间件代理跨域
5WebSokect协跨域
6.window.name+ifram跨域
- url 参数转对象
let str = "http://localhost:3000/index.html？phone=12345678901&pwd=123123";
let arr = str.split("?")[1].split("&"); //先通过？分解得到？后面的所需字符串，再将其通过&分解开存放在数组里
let obj = {};
for (let i of arr) {
obj[i.split("=")[0]] = i.split("=")[1]; //对数组每项用=分解开，=前为对象属性名，=后为属性值
}
console.log(obj);
https://www.cnblogs.com/zhangzhiyong/p/9949641.html
- 防抖函数（单位时间内多次触发只会执行一次）
//500毫秒内多次触发只会执行一次，
function de(){
let timer;
、
return function(){
if(timer) clearTimeout(timer);//如果500毫秒内又一次触发，则会重新计算时间
timer = setTimeout(() => {
console.log('dddd')
}, 500)
}
}
document.querySelector('#btn').addEventListener('click',de())
https://blog.csdn.net/weixin_35958891/article/details/94462047
@import和link
优化页面
sessionStorage用法
position属性及区别
去重v-if和c-show 封装一个函数
- 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
分为4个步骤：
（1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
（2）， 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
（3），一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
（4），此时，Web服务器提供资源服务，客户端开始下载资源。
请求返回后，便进入了我们关注的前端模块
简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM
面试题网站
https://www.cnblogs.com/jiajiamiao/p/11609335.html OK V
https://www.jianshu.com/p/eb0f269098d5 不是很全 V
https://blog.csdn.net/keyandi/article/details/89227175 OK V
自己了解
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
怎么让Chrome支持小于12px 的文字?
答案：p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是缩放比例Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.react
ajax过程
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?
- 通过异步模式，提升了用户体验
- 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
- Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
- Ajax的最大的特点是什么。
Ajax可以实现动态不刷新（局部刷新）
readyState属性 状态 有5个可取值： 0=未初始化 ，1=启动 2=发送，3=接收，4=完成
ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
- 握手（3次）
1、首先服务器处于LISTEN（监听）状态，客户端向服务器发送请求，其中SYN=1，初始化一个seq为x
2、服务器接收连接请求报文后，如果同意建立连接，则向A发送连接确认报文，SYN=1,ACK=1,seq=y,ack=x+1
3、A接收到B发出的连接确认报文后还需要向B发送确认报文。ACK=1,seq=x+1,ack=y+1
4、B收到A的确认后，连接建立 - 挥手（4次）
1、A发送挥手报文，FIN=1, 初始化一个seq=u
2、B接收到挥手报文后进入CLOSE-WAIT状态，通知应用进程。并向A发出确认。此时TCP处于半连接状态，即B能向A发送数据而A不能向B发送数据。ACK=1，seq=v,ack=u+1
3、当B不再需要连接时，向A发送第三次挥手报文，FIN=1,ACK=1,ack=u+1
4、A接收到第三次挥手报文后向B发送确认，并且等待2MSL的时间再关闭。
5、B接收到确认后直接关闭连接。
