美文网首页
2022面试题随笔

2022面试题随笔

作者: 头头_d92d | 来源:发表于2022-10-21 18:05 被阅读0次

    常用伪元素有哪一些?

    两个冒号::before ::after ::selection ::placeholder
    一个冒号:hover :visited :active :first-child :not() :disabled :checked

    移动端如何适配不同屏幕尺寸?

    *使用rem布局
    *使用百分比布局
    *使用弹性盒子flex布局
    *使用media媒体查询定义不同屏幕的大小的样式代码
    *vw/vh
    *在 head 设置 width=device-width 的 viewport‘
    `<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">

    说一下ES6的新特性有哪些?

    *const let
    *模板字符串
    *箭头函数
    *数组、对象解构
    *Map和Set
    *函数设置默认参数

    function f(a='111'){
     console.log(a);
    }
    

    *for...in for...of
    *class类的支持

    class person{
      constructor(name){
        this.name=name;
      }
    }
    

    *对象的简化赋值let obj={name,age} //let obj={name:'name',age:'age'}
    *展开运算符

    说一下防抖和节流。怎么实现?

    防抖: 在指定的时间内代码只执行一次(频繁触发事件时, 代码不会执行的,当在指定的时间内不在触发事件时, 代码会执行一次, 当不再触发事件时,代码也不再执行)
    使用场景:

    • 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求
    • 搜索框搜索输入。只需用户最后一次输入完,再发送请求
    • 手机号、邮箱验证输入检测(change、input、blur、keyup等事件触发,每次键入都会触发)
    • 窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。

    节流: 每间隔指定的时间内代码都会执行一次(频繁触发事件时,只要等待够预定的时间, 代码都会执行一次,当不再触发事件时,代码也不再执行)
    使用场景:
    *滚动加载,加载更多或滚到底部监听
    *搜索功能
    *高频点击提交,表单重复提交

    //防抖函数
    var timer; //全局的timer,只有一个
    function debounce(fn,delay){
        if(timer){
            clearTimeout(timer) //保证只开启一个定时器
        }
        timer = setTimeout(function(){
            fn(); //延迟delay,执行函数
        },delay)
    }
    //节流函数
    function throttle(fn,delay){
        let timer;
        return function(){
            let _args = arguments;
            let _this = this;
            if(timer){//如果有定时器,退出
                return
            }
            timer = setTimeout(function(){
                fn.apply(_this,_args);//定时器结束执行函数
                timer = null;//清除定时器,可以再次进入
            },delay)
        }
    }
    

    你的登录拦截怎么实现的?

    //登录拦截
    router.beforeEach((to,from,next)=>{
      if (to.meta.requireAuth) {//requireAuth若为true则该路由需要判断是否登录
        if (localStorage.userName) {//判断当前的userName数据是否存在
          next();
        }
        else {
          next({//返回登录页面
            path: '/',
            query: {redirect: to.fullPath}
          })
        }
      }
      else {
        next();
      }
    })
    

    Vue常用的指令有哪些?

    v-show、v-if、v-else、v-for、v-html、v-text、v-bind、v-on、v-model

    你是如何封装一个组件的?

    每个 .vue单文件就是一个组件。在另一组件import 导入,并在components中注册,子组件需要数据,可以在props中接受定义。自定义内容可以通过slot来实现

    在vue的项目应用中,不使用框架,怎么封装?

    //封装组件
                <template id="zujian">
                    <div>
                        <h1>{{msg}}</h1>
                        <button type="button" @click="dianji">点我加1</button>
                    </div>
                </template>
    Vue.component('mycom1', {
                template: '#zujian',
                data: function() {
                    return {
                        msg:'1'
                    }
                    
                },
                methods:{
                    dianji(){
                        this.msg ++
                    }
                }
            })
    

    用闭包的原理做过哪些?

                var i;
                for (i = 0; i < 10; i++) {
                    (function(i) {
                        var a=document.createElement('a');
                        a.innerHTML=i+'</br>';
                        a.addEventListener('click',function(e){
                            alert(i)
                        })
                        document.body.appendChild(a)
                    })(i)
                }
    

    作用域是什么?

    作用域是变量的可访问范围,就是一个独立的地盘,让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突

    操作数组的方式有哪些?

    push :向数组的末尾添加新元素
    pop():删除数组的最后一项
    shift():删除数组的第一项
    unshift():向数组首位添加新元素
    slice():参数start 和 end
    splice():对数组进行增删改
    concat():用于连接两个或多个数组
    indexOf():检测当前值在数组中第一次出现的位置索引
    lastIndexOf():检测当前值在数组中最后一次出现的位置索引
    includes():判断一个数组是否包含一个指定的值
    sort():对数组的元素进行排序
    reverse():对数组进行倒序
    forEach():ES5及以下循环遍历数组每一项
    map()

    keep-alive是什么?有哪几个生命周期阶段?

    activated 与 deactivated
    activated钩子:在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用
    deactivated钩子:组件被停用时调用

    判断一个变量是否是数组,有哪些办法?

    Array.isArray( arr )
    arr instanceof Array
    Object.prototype.toString.call(arr).indexOf('Array') > -1
    Array.prototype.isPrototypeOf(arr)

    判断一个变量是否是对象,有哪些办法?

    *Object.prototype.toString.call(obj) === '[object Object]'
    *obj.constructor === Object 参数为null时,会出现错误
    obj instanceof Object 参数为数组时也为true
    *$.isPlainObject(obj)

    创建一个空数组/空对象有哪些方式?

    数组:arr=[]; arr=new Array();
    对象:

    const object = new Object();
    Object.create(null);
    const object = {};
    

    哪些遍历方式会改变原数组?

    *所有遍历方法都不会影响原数组
    *map和filter会返回一个新的数组
    *forEach没有返回值
    *some和every返回bool值且能提前中断循环

    Set和Map各是什么?

    set 是一种叫做集合的数据结构,Map是一种叫做字典的数据结构。set类似于数组,里面是一个个的值,Map里面是键值对。
    共同点:内部成员均不可重复,是唯一的
    不同点:set是以 [value, value]的形式储存元素,map是以 [key, value] 的形式储存
    PS:set去重无法检测[{name: 1}, {name: 1}]这样的

    如何改变一个函数a的上下文?

    *apply会执行调用apply的函数,并且this指向第一个参数,第二个参数是个数组
    *call会指向调用call的函数,并且this指向第一个参数;后续可以接着传n个参数,在接收的时候,依次去获取;

    mixins有几个生命周期阶段?

    mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > mixin的mounted >父mounted

    数组和类数组的区别

    *类数组对象:arguments对象、NodeList对象、以及getElementsByClassName("a")获取的对象;
    *类数组对象也length属性,可以这种取值: NodeList[0]、NodeList.item(0);
    *但类数组对象不能调用数组原型上的方法
    类数组转为数组的方法:Array.prototype.slice.call(NodeList, 0);
    Array.from(someNode.childNodes)

    for in 和for of的区别

    for in返回的是索引index
    for of返回的是值

    promise 和async await区别

    *promise是ES6,async/await是ES7
    *async/await相对于promise来讲,写法更加优雅
    *reject状态:
    1)promise错误可以通过catch来捕捉,建议尾部捕获错误,
    2)async/await既可以用.then又可以用try-catch捕捉

    相关文章

      网友评论

          本文标题:2022面试题随笔

          本文链接:https://www.haomeiwen.com/subject/dmxmzrtx.html