js、jq小实例面试
1、动态设置显示的位置（x、y是获得鼠标的坐标），css不需设置left、top等
$(".rt_mouse_box").show().css({left:x,top:y});2、什么是promise、和用法：
解决地狱回调问题
3、跨域：
引起原因：浏览器的同源策略、协议名、域名、端口号必须一致
解决办法：1、jsonp（前端和后台）2、cors（后台）3、服务器代理（后台）
jsonp实现方法原理：scrict标签是不受同源策略影响、js代码动态添加scrict，
var scrict = document.creatElement("crict")scrict.src = "http://xxxxx?callbakc=getdata"function getdata(){console.log(data)
}
document.body.appendchild(scrict)4、闭包：
定义：嵌套函数中，内部函数访问外部函数的局部变量，则内部函数就是闭包
优点：可以延长外部函数的局部变量的生命周期
缺点：也是优点造成的，就是容易出现内存的泄漏
function fun(){var count = 1retutn function(){count++console.log(count)}
}
var fun2 = fun()
fun2() //2
fun2()//3
5、如何实现rem的适配
原因：同一个元素或盒子在不同大小的屏幕上要有一样的大小比例
实现原理：1rem等于html根元素的font-size的大小
实现步骤：
//获取屏幕宽度
var width = document.documentElement.clientWidth
//查找根元素
var htmlNode = document.querySelector("html")
//设置font-size
htmlNode.style.font-size = width+"px"6、变量提升（预处理）
定义：代码执行之前会把变量和函数收集，变量是声明提前但赋值不会，函数是整体提前。
console.log(name)//undefined
var name = "xioaming"console.log(name)//xioaming
func() //xioaming
function func(){console.log(name)
}7、vue和react的区别
相同点：（1）都是组件式开发和虚拟dom
（2）可以通过父子组件传值
（3）通过数据来驱动
不通点：（1）vue是双向绑定、react数据流是单向的
（2）react是使用jsx，即html下载js里，而vue是分开
8、vue的通讯方式有哪几种
1、props（父传子）
2、自定义事件（子传父）
3、消息的订阅与发布（pubsub）（任意组件间）
4、vuex（任意组件间）
5、slot（插槽，主要传标签）
9、es6去重
var arr = [1,2,3,3,4,5]var result = new Set(arr)var newarr = [...result]10、数组元素对应作为实参
var arr=[1,2,3],
function test(a,b,c){}
test.apply(this,arr) //a=1,b=2,c=3call
test.call(this,1,2,3) //a=1,b=2,c=3bind
test.bind(this,1,2,3) //不调用改变this11、前端优化方法
（1）css放顶部，js放底部；（2）异步路由；（3）雪碧图（小图标放到一个图）
（4）减少请求；（5）压缩资源；（6）减少dom操作、和循环
12、前端解决缓存问题
分为：1页面缓存、css缓存、js缓存
页面缓存解决办法
js和css的解决办法（添加版本号）
12、js数据类型
1、基本类型：string、number、null、undefind、boolen、symbol因为大小基本固定，值是存放在栈中2、引用类型：Array、Object、function栈中存的是指针，值存在堆中；指针指向堆，堆中存放值复制只是复制指针，而不是值13.宏任务、微任务
1、宏任务：主线程就是一个宏任务、setTimeout、setInterval宏任务可以有多个宏任务执行完后，如果存在微任务，则想执行完所有微任务、再执行下一个宏任务2、微任务：new Promise.then({微任务})只有一个主线程从上到下执行，遇到异步或setTimeout忽略掉，把它们放到一个队列中，主线上的同步都执行完后，
找微任务来执行，后再指向队列里那些异步Promise中的为同步代码块，then后为异步 微任务
new Promise((resolve,reject)=>{console.log('1111') //相当于主线程，属于宏任务
})
.then({console.log('22') //微任务
})async function fun(){console.log('1111') //相当于主线程，属于宏任务await fun2() //同步，会去执行fun2console.log('222') //微任务，相当于promise.then}Async 函数中：await前的可以看做Promise外部的diamante await相当于在执行Promise中的为同步代码块 await后的相当于在执行then的回调 微任务
14、rem、em的区别
rem：相对html的font-size,如果html的font-size的字体大小为10px，则1rem等10pxem:两种情况字体大小：相对父元素的字体大小，如：父的font-size=10px;则子的font-size是1em的话即使 10px；width/height/padding/margin:相对自身的字体大小15、vw、wh
相对于视窗，（1vw 代表视窗的宽度为 1%）如窗口宽度为100px，则1vw=1px
vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致与%的区别是，%是相对父元素16.判断是数组还是对象
一.通过构造函数
arr.constructor == Array //返回true则是数组二.Array.isArray(arr) //返回true三.console.log(arr instancof Arrray) //返回true17.类
类：具有相同属性和方法的对象的集合
怎么定义？和定义函数一样，类名需要大写：（属性写在构造函数下，方法写在原型下）function Person(name,age){ //类或叫构造函数this.name = name,this.age = age，//this.eat = function(){ 不建议写在这// }
}
//定义类里面的方法最好在原型下定义，因为原型对象下的属性和方法能被实例化对象共用
Person.prototype.eat = function(){console.log(this.name +"在吃饭") //this指向当前实例化对象
}实例化：通过构造函数new出来的就是实力化对象，如person1就是实例化对象
var person1 = new Person('小明','20')
console.log(person1.eat()) //小明在吃饭18.继承
父类：
function Person(name,age){ this.name = name,this.age = age
}
Person.prototype.eat = function(){console.log(this.name +"在吃饭")
}子类继承父类的属性和继承方法是不一样的继承父类的属性:
function Cat(name,age){Person.call(this,'lili',20) //使用call使得this指向car1而不是window
}
继承父类的方法：
Cat.prototype = new Person()
Cat.prototype.constructor = Cat.constructor //指回Cat使用：
var car = new Cat("lili",20)19.改变this的方法
var name = "小明"
var obj ={name:"小红"
}
function a(one,two){console.log(this.name)
}
a() //指向window 小明a.call(obj,1,2) //小红 指向obj
a.apply(obj,[1,2]) //小红
a.bind(obj,1,2)() //小红 需要执行()20.事件
div1.addEventListen('click',function(e){ e.stopPropagation() //阻止冒泡e.preventDefault() //阻止默认e.target //事件源，就是点击了哪里触发的this //当前事件的事件源return false //阻止默认e.cancelBubbiele() //IE阻止冒泡})
21 事件委托
作用：解决后生成元素的事件绑定问题
通过冒泡事件，点击子元素触发父元素事件，再根据e.target.tagname == "LI" 来识别jq $("ul").on("click","li",function(){ }) //动态添加的li也有点击事件22、闭包
定义：函数里定义函数，内部函数可以调用外部函数的局部变量，外部函数被抵用完之后，内部函数没被释放，所以变量也没有释放用到的例子：ul下，点击li输出是第几个（自己的索引）for(var i=0;i23、jquery原理
使用的是继承（面向对象的方法封装），$是一个函数，返回jquery对象function $(selector){ selector是节点如 #divreturn new jquery(selector)
}function jquery(){//定义属性//判断selector是类还是id还function，并且放进elementui数组
}
jquery.prototype.css = function(xxx,xxx){//this指向新生成的对象
}//使用：
$(".div").css("color":"#000")24、重绘与回流
重绘：元素改变不影响布局，只是UI层面上的改变就叫重绘
如改元素的颜色，背景色等回流（重排）：当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。
如：页面初始渲染、浏览器窗口大小变化，增删dom元素、 大小、位置更改避免这两种情况：避免频繁操作样式，可汇总后统一一次修改减少 DOM 的操作25、防抖
任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行
（每次执行方法时先清除之前的的延时器）（模糊搜索用到）26、节流
https://www.cnblogs.com/jianxian/p/12077570.html
节流：指定时间间隔内只会执行一次任务
（防止表单频繁提交）27、mvc与mvvm怎么理解
mvc：数据层改变后传给控制层，控制层做了一系列操作后传给视图层改变视图，整个过程是单向的mvvm：视图层改变把指令发给viewmoldel层，直接改变视图，是双向的28、js原型
什么是原型对象
每一个js对象（除了null）在创建的时候，都会有一个与之关联的对象，这个对象就是原型，每一个对象都可以从它的原型中继承属性。function Person () {}
var person = new Person()
每一个js函数都有一个prototype属性，这个属性指向函数的原型对象
每一个js对象(除null)都有一个_proto__属性，这个属性指向该对象的原型
Person.prototype === person.__proto__
Object.prototype.__proto__ 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。所以查找属性的时候查到 Object.prototype 就可以停止查找了。29、http缓存
强缓存：状态码是200的时候，浏览器如果判断本地缓存未过期，就直接使用，不发请求到服务器
协商缓存：状态码304，浏览器向服务器发起http请求，然后由服务器告诉浏览器文件并未改变，让浏览器使用本地存储；
通过header头部的来区分两种缓存机制30、js常用知识
数组
var arr = [1,2,3,4,5]
splice：数组剪切，会改变原来数组
arr.splice(1,3)//从索引1开始剪切3个位置的，返回被剪部分 [2,3,4]，原来数组变为[1,5]slice:索引剪切，包头不包尾，返回新数组，不改变原来数组
arr.splice(1,3)
31、axios如何使用form-data，上传和下载文件流
const beforeUpload = async (file) => {console.log('file', file)let fileObject = file.filelet pic = new FormData()pic.append('file', fileObject)pic.append('id', state.rowId) //其他参数axios({method: 'post',url: url,data: pic,config: config,}).then((response) => {console.log(response)}).catch((error) => {console.log(error)})
}//如何使用form-data
import axios from 'axios'
import qs from 'qs';
function httpFun(api,sendData,met,callback) {
axios({url:...,method:...,data: qs.stringify({ //参数序列化MethodName: api,RequestContent: sendData}),headers: {'Content-Type':'application/x-www-form-urlencoded'},timeout:20000,
}).then((res) =>{callback(true);
})}32、websocket心跳重连
//初始化
ws = new Websocket(url)
ws.onOpen()
ws.onClose()
ws.onError()
ws.onmessage()//心跳重连
每隔固定时间触发ws.send('ping'),服务器有响应则证明连接正常，没响应则触发重连//断开有两种情况
1、服务器设置问题，在一定时间内没有数据交流则会主动断开，这时候会触发onError,前端再主动重连(可设置重连次数,超出次数不再重连)
2、心跳重连没有收到服务器返回的数据，则触发重连33、前端安全问题
1、xss(跨站脚本攻击)，通过url带入，浏览器错误的将攻击者提供的数据（如![]()
等标签的脚本）当成脚 本执行
解决：使用正则匹配去除某些字符串、过滤域名（过滤掉标签再从url上获取参数）2、CSRF当你登录了网站再去访问别黑客网站时，点击了隐藏的div就会触发，造成cookie个人信息泄露
解决：添加token验证，和页面来源判断3、iframe漏洞
使用iframe访问外部网站时产生的安全隐患
解决：iframe添加sandbox属性
4、本地数据存储漏洞个人信息存到cokie或localstore时需要加密，（转为base64再解密、加盐等）5、使用HTTPS加密传输数据
34、instaceOf的实现原理
主要是通过右边变量的protype是否在左边变量的原因链上,
因此，instanceof 在查找的过程中会遍历左边变量的原型链，
直到找到右边变量的 prototype，如果查找失败，则会返回 false本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！