面试总结

 

 

 

 如果发的是post请求就将请求体参数转换成查询字符串的格式，

*************数组*************

一般方法增删改查，push添加一个元素，pop和shift一个是删除最后一个元素，一个是删除第一个元素，sort排序数组，splice，增删改操作，

map遍历返回一个新数组，filter根据指定条件过滤原数组返回一个新数组，indexof找一个元素在数组中的第一个下标，找到就返回他的下标，没找到就返回-1，foreach遍历数组，

find是遍历找一个元素，找到返回这个元素，findindex也是遍历找一个元素，只不过找到的话返回的是这个元素的下标

这两个方法如果找到匹配的元素就不会往下遍历了，所以性能比foreach高，foreach就算找到匹配的也会遍历整个数组

**************promise****************

可以理解为他是一个代理对象，代理一个未来可能成功也可能失败的一个值，他有三种状态，padding，resolved，rejected，而且他的状态是不可逆的，他是解决异步回调的一种方式，promise的执行器函数是同步执行的，不过执行器函数中的回调和then方法的回调是异步的，then方法的返回值是一个promise，所以它支持链式调用，then方法返回的promise的结果是由then方法的回调的执行的结果决定的，

************编程式路由*************

编程式路由就是通过写代码实现路由跳转，通过操作history对象的方法进行路由跳转，vue全局注册路由器后组件的实例有两个对象，$route、$router，$router操作的就是history对象方法，this.$router.push()/this.$router.replace()/this.$router.back()....,$router是路由器对象，$route是路由对象，保存的是路由的信息，比如路由路径，路由参数

*********vue封装过哪些组件************

封装过swiper轮播图组件，图片加按钮组件、弹窗组件

************防止重复提交保存****************

点按钮提交发请求以后，用disabled属性把按钮禁用，显示一个加载图，请求成功了再把按钮恢复成可点击

也可以用防抖去做，然后大概介绍防抖的实现原理，利用定时器，每次触发事件先清定时器，重新计时，保证只有最后一次才提交发请求...

********map和filter区别**********

map和filter都不会改变原数组，返回的都是新数组，map可以对数组进行加工，比如返回一个每个元素都加1的新数组，filter会根据给定的条件过滤数组，比如我只返回大于10 的元素

**********==和===区别*******

双等会进行隐式类型转换

******[] == ![]&&{} == !{}*********

!的优先级比==高，先执行右边的运算，数组和对象转为布尔值是true，再取反是false
再调用number方法把等号两边转成数值比较，{}转成数值是NAN，NAN和任何类型都不相等，所以是false
[]转成数值是0，false转成数值是0，所以是true

********jsonp和get区别***********

jsonp发的就是get请求，他的原理是利用script标签的src属性不受跨域影响，jsonp是为了解决跨域，get是一种发请求的方式

******如何链式发请求******

可以用axios发，axios内部封装的promise，支持链式调用

********实现找数组或字符串重复出现的元素，重复的次数**********

let str = 'abbbb'
let length = str.length
let obj = {}
for(let i = 0;i<length;i++){
let element = str.charAt(i)
console.log(element)
if(obj[element]){
obj[element]++
}else{
obj[element] = 1
}

}
console.log(obj)
let char = null
let count = 0
for (const i in obj) {
console.log(i)
if (count<obj[i]) {
count = obj[i]
char = i
}
}
console.log(/*最多的字符*/char,/*几次*/count)

let arr = [1,1,1,2]
let obj4 = {}
arr.forEach(item=>{
!obj4[item]?obj4[item] = 1:obj4[item]++
})
let max = 0//重复次数
let attr = null//重复的元素
for (const key in obj4) {
if (max<obj4[key]) {
max = obj4[key];
attr = key
}
}
console.log(max,attr)
console.log(obj4)

*****实现promise的嵌套依赖*****

在当前promise的then方法中返回下一个promise

*****数组的方法*******

 

 *****reduce数组扁平化*****

 

 *****...运算符*****

他是es6新增的特性，他有两个用法，在函数里边作为参数使用，rest参数，（...arges）
把多余的参数都放在一个数组中，但是这样用的话，他后边不能再有其他参数了，
他代表的就是其他所有的参数
作为扩展运算符用
这样用的话就相当于解构，把数组的每个元素都拆解开，他可以实现一维数组的深拷贝，/合并数组

***为什么.../set/map/数组/伪数组可以进行遍历***

他们都有iterator接口，只要给一个数据类型添加iterator接口，他就可以遍历，
iterator遍历过程：
先创建一个指针指向这个要遍历的数据，调用next方法，每调一次指针向后移一位，他的返回值
有两个属性，value和done，value是当前遍历的结果，done是一个标识遍历是否结束的布尔值
对象没有iterator接口，因为对象的结构不像数组一样是有序的

***forof/forin区别****

前者可以遍历所有具有iterator接口的数据类型，后者是用来遍历对象的，返回的是对象的key

***cookie，sessionstorage，localstorage**

他们都是保存在浏览器端的，session是保存在服务器端的，cookie只能保存4k左右的数据，sessionstorage和localstorage能保存5m左右数据，他们的生命周期也不一样，cookie可以设置过期时间，只要超过有效期，浏览器就会自动清除，localstorage存的数据是永久的，除非手动删除，sessionstorage存的是临时数据，当前浏览器窗口关闭后就会清除，cookie的数据会自动发给服务器，sessionstorage和localstorage只在本地保存

***cookie****

cookie是服务器生成的，保存在浏览器，因为HTTP是无状态的，服务器不会记录上一次和谁通过话，所以需要一个标识记录浏览器和服务器的通信，第一次请求服务器，服务器给浏览器返回一个cookie，下次再请求的时候，浏览器会自动把cookie带上，表示我俩之前通过话

设置：document.cookie = key+value的字符串

cookie.setMaxAge(60*60*24*365);           // 设置有效期，单位秒

***innerhtml和innerText***

他们都是给一个元素写入内容，当内容有标签的时候，innerhtml会解析标签，innertext不会

****ajax***

普通HTTP请求是浏览器引擎发送的，只能发送get请求，通过form表单，img标签的src属性发的都是普通的http请求，ajax比HTTP灵活，可以发get，post请求，他是由ajax引擎发送的，但是他有跨域问题，受浏览器的同源策略限制，发送的是xhr类型，就会出现跨域，

*****解决跨域*****

jsonp：他是一个技巧，不是一门技术，利用script标签的src属性不受跨域限制，在浏览器端定义一个函数，发请求的时候把这个函数当做参数传给服务器，然后服务器把响应数据当做函数的实参返回，他只能发get请求，

cors：在服务器端设置响应头Access-Control-Allow-Origin:*，跨域资源共享，他能处理get，post请求，但是只能兼容ie8以上，

浏览器为了安全起见，采用的同源策略，，同源指的是协议，域名，端口号，必须一致，有一个不一致就是跨域，举例：没有同源的危害：钓鱼网站可以轻松拿到别的网站的dom，获取用户的关键信息，比如账号，密码

*****非同源的限制****

不能读取cookie，不能发ajax请求，不能获取dom

使用代理：开发环境使用proxytable正向代理解决跨域，在config文件夹的index文件中配置，反向代理：在生产环境使用nginx服务器配置反向代理，nginx就相当于一个服务器，浏览器的请求先发到nginx服务器，再由nginx服务器转发请求，解决跨域，利用反向代理可以实现负载均衡：将多个请求转发到不同的服务器

******请求步骤，取消请求*****

 

 ***undefined和null 的区别***

null代表的是一个空对象，一般给一个变量赋值为null的时候，表示他后边的值可能是一个对象，undefined表示变量声明未赋值，没有初始化，一个函数没有指定返回值，返回的就是undefined

***HTTP和https****

HTTP是无状态的，他是通过明文传输数据的，不安全，https是HTTP的加密版，他多了一个协议加密层，传输的数据都是经过加密的，比HTTP安全

**HTTP状态码**

200:服务器成功处理请求，304:请求重定向,发了请求，但是服务器没有返回数据，因为请求内容没有变化，通知浏览器走缓存，404:页面未找到，一般是地址错了，500：服务器内部错误

 

****性能优化******

压缩js，css文件，使用第三方库的时候按需加载，减少js操作dom的次数，使用外链式引入js，css文件，减少请求次数，对图片资源进行懒加载，使用路由的时候实现按需加载，缓存路由组件

***严格模式******

消除js语法的一些不严谨的地方，必须用var声明变量，禁止自定义函数的this指向window，对象不能有重名的属性

***深浅拷贝*****

深拷贝的意思是修改拷贝后的数据，不会改变原数据，这个是针对引用类型说的，基本数据类型是值传递，不会修改原数据，所以深拷贝的原理是我去遍历这个数组或对象，拿到每个属性值去判断是不是引用类型，如果是的话继续递归遍历，直到这个值是一个基本数据类型，js内置有一些方法可以实现深拷贝，比如数组的slice方法，concat方法，对象的assign方法，不过他们都是一级的深拷贝，对嵌套层级没效果

浅拷贝只是复制的对象或数组的引用，修改新数据会影响原数据

 

 ***作用域，作用域链*******

作用域说白了是一个规则，用来隔离变量的，他是js引擎提前定好的一个规范，规定我要按照什么规则去找一个变量，然后在说作用域链，其实他是真实存在的，用chrome调试工具看的话，在local里边有一个scopes属性，那个就是作用域链，他是一个数组，他的每一项其实都是一个变量对象，保存的是当前域下的所有变量，一般可能是这么理解的，js找一个变量先在当前的作用域找，没有的话再去上一级的作用域找，我的理解是他是顺着作用域链数组往下找的，数组的第一项是他自己的变量对象，后边是他的上级变量对象，最后找到global

***闭包******

闭包可以说是一个对象，保存的是外部函数的局部变量，闭包必须满足函数嵌套，内部的函数引用了外部函数的变量，而且内部函数必须得使用才会产生闭包，一个函数调用会产生一个变量对象，其实闭包就是一个引用，指向的就是这个变量对象，一个对象有指针指着，才不会被回收，所以闭包他延长的是外部函数整个变量对象的生命周期，所以有闭包引用的变量在外部函数执行完才不会被销毁

 

***原型，原型链******

原型他也是一个普通对象，设计原型就是为了节省内存占用，一般把一些公用的方法定义在对象的原型里边，他的实例都能共享到这个方法，对象有两种，普通对象和函数对象，除了new function出来的是函数对象，其他都是普通对象，普通对象有__proto__隐式原型属性，函数对象有prototype显示原型属性，他两指向的都是同一个原型对象，原型链说白了也是一条线，他和作用域链一样，我要在一个对象里边找一个属性或者方法的时候，先在自身找，没有的话就会沿__proto__这个属性去原型中找，如果还没有的话再往上找，一直会找到object.prototype，

****promise两个方法*****

all：传入多个promise，只有所有的promise的状态都成功，返回的promise才成功，否则失败

race：状态是由最先返回的那个promise的状态决定的

all的场景：一个页面要等两个以上的ajax请求数据，才显示，在此之前显示加载图

********fatch******

是对promise的封装，使用的原生js，语法简单，有两个参数，第一个是URL，第二个是可选的配置对象，他返回的promise不会拒绝HTTP的错误状态

****mvvm*******

m是medal层，数据层，v是视图层，vm相当于一个中转站，medal层和view层不会直接通信，都是通过Vm层传输数据的，mvvm的核心是双向数据绑定，model层的数据改变会更新到view层，view层的数据变化也会同步到model层，