canvas鼠标绘制图形
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Co ...
MQTT协议
MQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的”轻量级”通讯协议，该协议构建于TCP/IP协议上。
MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议，使其在物联网、小型设备、移动应用等方面有较广泛的应用。
JavaScript中for in和for of
for…offor...of语句在可迭代对象（包括Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句，可用break或者throw跳出。
123456789const array1 = ['a', 'b', 'c'];for (const element of array1) { console.log(element);}// "a"// "b"// "c"
for…infor...in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。for ... in是为遍历对象属性而构建的，不建议与数组一起使用，遍历数组的时候不一定可以保证顺序。
123456789var obj = {a:1, b:2, c:3};for (var prop in obj) { console. ...
JavaScript中内存泄漏的几种情况
意外的全局变量12345678910111213// a没有定义类型，会默认为全局变量，在fun执行后不会被销毁function fun() { a = 10}func()console.log(a)// 通过this创建a，fun执行后，this指向window，a成为了全局变量function fun() { this.a = 10}func()console.log(a)
未清理的DOM元素引用12var a = document.getElementById('id');document.body.removeChild(a);
不能回收，因为存在变量a对它的引用。虽然我们用removeChild移除了，但是还在对象里保存着#的引用，即DOM元素还在内存里面。解决方法： a = null;
定时器123456789101112// 定时器执行后，会导致定时器的回调函数及其内部依赖的变量都不能被回收，造成内存泄漏let temp = 'hello'setTimeout(()=>&# ...
HTPP缓存
HTTP 缓存主要分为强缓存和协商缓存。
强缓存可以通过 Expires / Cache-Control 控制，命中强缓存时不会发起网络请求，资源直接从本地获取，浏览器显示状态码 200 from cache。
协商缓存可以通过 Last-Modified / If-Modified-Since 和 Etag / If-None-Match 控制，开启协商缓存时向服务器发送的请求会带上缓存标识，若命中协商缓存服务器返回 304 Not Modified 表示浏览器可以使用本地缓存文件，否则返回 200 OK 正常返回数据。
优点
节省了不必要的数据传输，节省带宽。
减少服务端的负担，提高网站性能。
降低网络延迟，加快页面响应速度，增强用户体验。
缺点
不恰当的缓存设置可能会导致资源更新不及时，导致用户获取信息滞后。
箭头函数和普通函数的区别
写法不同123456789//普通函数function hello() { console.log('hello')}//箭头函数()=>{ console.log('hello')}
箭头函数全都是匿名函数普通函数可以有匿名函数，也可以有具名函数
箭头函数和普通函数的this指向不同普通函数的this指向的是谁调用该函数就指向谁
箭头函数的this指向的是在你书写代码时候的上下文环境对象的this，如果没有上下文环境对象，那么就指向最外层对象window。
箭头函数不能作为构造函数使用由于箭头函数没有自己的this，且this指向外层的执行环境，且不能改变指向，所以不能当做构造函数使用。
箭头函数没有自己的arguments箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是它外层函数的arguments值。
箭头函数不具有 prototype 原型对象箭头函数不具有 super箭头函数不具有 new.target
map和set的区别
Map
Map 是一组键值对的结构，和 JSON 对象类似。
Map的key值不仅可以是字符串还可以是对象。
1234let a = {b:1}let map = new Map()map.set(a,111)map.get(a) // 111
Map中一个key只能对应一个value，多次对一个key放入value，后面的值会把前面的值覆盖掉
1234var map =new Mapmap.set('Amy',"女")map.set('Amy',"男")map.get('Amy') //男
Map中的常用语法
12345678910111213141516let map = new Map();//添加key和value值map.set('Amy','女')map.set('liuQi','男')//是否存在key，存在返回true,反之为falsemap.has('A ...
Vue中route和router的区别是什么？
今天我们来探讨一下Vue 中 $route和$router 两者之间到底有什么区别
我们可以理解区别为: $route 是用来获取路由信息的，$router是用来操作路由的
$route 对象route是路由信息对象，里面主要包含路由的一些基本信息，包含当前的路径，参数，query对象等。(包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom)
route object 出现在多个地方:1.组件内的 this.route和route watcher 回调（监测变化处理）;2.router.match(location) 的返回值3.scrollBehavior 方法的参数4.导航钩子的参数：
123456789101112131415161718192021222324252627// to: 要去哪个页面// from:从哪里来// next:它是一个函数。// 如果直接放行 next()// 如果要跳到其它页 next(其它页)router.beforeEach((to, fro ...
Vue中父子组件生命周期执行顺序
挂载阶段执行顺序为：父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
更新阶段执行顺序为：父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
销毁阶段执行顺序为：父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
规律就是：只要子组件被引入触发，所处不管任何周期都是父组件先开始执行，然后等到子组件执行完，父组件收尾。
Vue中computed和watch的区别
computed，计算属性，会创建新的响应式数据，依托于data中的数据进行响应式变化。具有可缓存，可依赖多个属性，getter 函数无副作用等特点。
watch，监听器，响应式数据的自定义侦听器，用于响应数据的变化。watch 则更适用于异步或开销大的操作。
原理computed
初始化：为 computed 属性创建 lazy watcher（此处 watcher 指双向绑定中的监听器，下同）。
首次模板渲染：渲染 watcher 检测到 computed 属性时，会调用 computed 属性的 getter 方法，而 computed 属性的 getter 方法会调用依赖属性的 getter，从而形成链式调用，同时保存引用关系用于更新。取得计算结果后 lazy watcher 会将结果缓存，并返回给渲染 watcher 进行模板渲染。
多次模板渲染：直接取 lazy watcher 中的缓存值给到渲染 watcher 进行渲染。
依赖属性更新：根据首次模板渲染阶段构建的依赖关系向上通知 lazy watcher 进行重新计算，缓存计算结果并通知渲染 watcher 重新渲染更新 ...