• 前端面试题总结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) 扩展运算符

  • 相关阅读:
    JWT认证-插件准备
    drf 框架 三大组件
    drf框架 视图、工具视图、视图集
    drf框架 ModelSerializer
    CentOS6.5 上crontab每天自动备份mysql数据库
    php-GatewayWorker搭建实时聊天室
    Centos6.8实现SVN提交后自动更新目录
    Python在线聊天软件(Tkinter)
    Navicat for MySQL连接mysql数据库时提示错误:Can't connect to MySQL server (10060)
    Ubuntu16下apache2安装ssl阿里云证书
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/14428480.html
Copyright © 2020-2023  润新知