前端面试题总结1

vue的优势：

基于html放入模板语法，响应式的更新机制，可以让我们更快更高效的开发项目；渐进式的开发理念

vue项目中的错误处理：

1 后台接口错误
2 代码逻辑错误
后台接口错误：
axios interceptor实现网络请求的response拦截

1 判断给定的日期是否是工作日

date.getDay()%6==0

2 反转字符串

str.split(‘ ‘).reverse().join(‘ ‘);

3 判断当前选项卡是否在视图/焦点中

document.hidden

4 从日期获取时间，通过使用toTimeString() 方法将字符串切片用在正确的位置

new Date().toTimeString().slice(0,8)

5 按位取反~

~~ 取反两次去掉小数部分; Math.floor()
双非位运算符只对 32 位整数有效,对于任何大于 2147483647 的数字，双非位运算符 (~~) 都会给出错误的结果，这种情况下推荐使用 Math.floor() 方法。
~~12.3333 12

6 检查当前元素是否处于焦点

const elementIsInFocus=(el)=>(el===docuement.activeElement)

7 检查当前用户是否支持触摸事件

const touchSupported=()=>{
(‘onTouchstart‘ in window || window.DocumentTouch&&document instanceof window.documentTouch )
}

8 检查当前用户是否在iphone设备上

const isAppleDevice=/Mac | iPad | iPhone | iPod /.test(navigator.platform);

算法题建议养成每天刷一道leetcode的习惯，重点刷数据结构(栈，链表，队列，树)，动态规划，DFS，BFS
建议优先掌握：
instanceof (考察对原型链的理解)
new (对创建对象实例过程的理解)
call&apply&bind (对this指向的理解)
手写promise (对异步的理解)
手写原生ajax (对ajax原理和http请求方式的理解，重点是get和post请求的实现)
其他：数组，字符串的api的实现，难度相对较低。只要了解数组，字符串的常用方法的用法，现场就能写出来个大概。(ps：笔者认为数组的reduce方法比较难，这块有余力可以单独看一些，即使面试没让你实现reduce，写其他题时用上它也是很加分的)

instanceof 是判断一个实例是否是其父类或者祖先类型的实例

函数柯里化

柯里化的定义：接收一部分参数，返回一个函数接收剩余参数，接收足够参数后，执行原函数。

函数深拷贝

1 递归拷贝

2 Object.parse(Object.stringfy(obj))

缺点：
2 循环对象用这种方法的时候会抛出异常
1 诸如 Map, Set, RegExp, Date, ArrayBuffer 和其他内置类型在进行序列化时会丢失。
3 function undefined会丢失
3 如果有一个单级对象，例如没有嵌套的对象，那么我们也可以使用扩展符来实现深拷贝。
let obj = {x: 20, y: ‘hello‘};
const cloneObj = {...obj};

浅拷贝

Object.assign(obj1,obj2)

GET和post的区别：

1 get请求回退是无害的，post回退需要重新发送请求
2 get请求，参数在url上，参数长度有限制
3 post的参数在请求体上，没有长度限制
4 get请求产生的url可以bookmark
5 get请求的参数会被完整保留在浏览器历史记录里面，而post中的参数不会被保留
6 get请求的url中传送的参数只接受ASICC字符，post没有限制
7get比post更不安全，参数暴露在URL上，所以不能用来传递敏感信息

Vue组件通信方式：

1 props $emit 父子组件

2 Vuex

state 数据存储，是store中唯一数据源
getters
action 需要通过提交mutation修改state的值，可以进行异步操作
mutation 修改数据的唯一途径，只能进行同步操作
mapState mapMutations MapActions

3 $attrs $listeners 跨级组件通信

$attrs 除了props class style之外的属性
$listeners 除了native修饰的v-on事件监听器

4 $parent $refs children root

5 provide inject

provide(){
return {
}},
祖先组件向所有的子孙后代注入一个依赖，可以注入属性和方法，从而实现跨级父子组件通信。
provide 和inject的绑定对于原始类型来说并不是可响应的，

6 Vue.observable 实现迷你vuex

export const state=Vue.observable({
count:0
});

export const mutations={
increment(){state.count++},
decrement(){state.count--}
}

7 中央bus EventBus

混入 mixins

默认的事件流是：捕获阶段-目标阶段-冒泡阶段
.capture外层元素先触发事件，然后往深层传递

.passive：当页面滚动的时候就会一直触发 onScroll 事件，这个其实是存在性能问题的，尤其是在移动端，当给他加上 .passive 后触发的就不会那么频繁了
自定义指令

.sync 子组件更新父组件的数据 $emit(‘update:obj‘,value)

自定义指令

function install(){
Vue.directive(‘auth‘,{
inserted(){}
});
}

export default{install}
在main.js中
import Auth from ‘.utils/auth‘
Vue.use(Auth)

删除自己 el.parentNode.removeChild(el);

自动化导入模块

优雅导出请求接口

// api.js
import http from ‘./config/httpServer.js‘

/* 登入页面获取公钥 */
export const getPublicKey = (data) => {
return http({ url: ‘/userGateway/user/getPublicKey‘ }, data)
}

// 用户登录
export const login = data => {
return http({ url: ‘/userGateway/userSentry/login‘ }, data)
}

// 验证码登录
export const loginByCode = data => {
return http({ url: ‘/userGateway/userSentry/loginByCode‘ }, data)
}

优化：
const ApiList={
getPublicKey :‘/userGateway/user/getPublicKey‘,
login :‘/userGateway/userSentry/login‘,
‘loginByCode‘:‘/userGateway/userSentry/loginByCode‘
};
const API={};
Object.keys(ApiList).forEach((item)=>{
Api[item]=(data)=>{
return http({ url: ApiList[item]}, data)
}
});
export default Api;

监听子组件的钩子函数

parent.vue
<child @mounted=‘doSomething‘></child>
child.vue
mounted(){this.$emit(‘mounted‘)}

简单写法：
parent.vue
<child @hook:mounted=‘doSomething‘></child>

深入watch用法

deep:true
immediate:true
多个handlers
实际上，watch 可以设置为数组，支持类型为 String、Object 和 Function。触发后，多个处理函数都将被调用
https://mp.weixin.qq.com/s/MchD5YiXvuIjhvkj86hTlg

跨域本质是浏览器基于同源策略的一种安全手段
协议 主机 端口

跨域是浏览器的限制，抓包工具和postman可以正常获取数据，

解决跨的方法：

JSONP
CORS 跨域资源共享 是有一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止
前端js代码获取跨域请求的响应

Proxy
vue-cli webpack 搭建本地服务器。设置请求代理 devServer:proxy
通过nginx实现代理

发布订阅模式

单例模式

https://mp.weixin.qq.com/s/fByGtad10ghK5Nn-elrw4w

与(&&)短路运算

只有某个值为true时调用一个函数，可以使用&&短路形式书写
isLogined&&goHomePage()

10. 多条件检查
对于多个值匹配，我们可以将所有的值放到数组中，然后使用indexOf()或includes()方法。
//Longhand
if (value === 1 || value === ‘one‘ || value === 2 || value === ‘two‘) {
// Execute some code
}
// Shorthand 1
if ([1, ‘one‘, 2, ‘two‘].indexOf(value) >= 0) {
// Execute some code
}
// Shorthand 2
if ([1, ‘one‘, 2, ‘two‘].includes(value)) {
// Execute some code
}

获取数组的最大值

1 通过Array.reduce(pre,cur,index,arr)
max=arr.reduce((pre,cur)=>{return Math.max(pre,cur)});
2 Math.max(...arr) 扩展运算符

原文：https://www.cnblogs.com/xiaofenguo/p/14428480.html