美文网首页
常见前端面试问题小收集

常见前端面试问题小收集

作者: 江川哇 | 来源:发表于2022-04-12 17:22 被阅读0次

    1、深浅拷贝
    浅拷贝只是对指针的拷贝拷贝后会出现两个指针指向同一个内存空间,深拷贝不但对指针进行拷贝,而且对指针的内容进行拷贝。不会造成内存的泄露。
    2、咋手写一个深拷贝

    function deepClone(oldObj = {}) {
        // 过滤掉值类型
        if (typeof oldObj !== "object" || oldObj == null) {
            return oldObj;
        }
        let result;
        if (oldObj instanceof Array) {
            result = [];
        } else {
            result = {};
        }
        for (const key in oldObj) {
            // 保证不拿其原型上的属性
            if (oldObj.hasOwnProperty(key)) {
                result[key] = deepClone(oldObj[key]);
            }
        }
        return result;
    }
    

    3、说一下基本类型和引用类型
    参考链接 https://zhuanlan.zhihu.com/p/26282765
    基本类型(undefined number string boolean null)是栈内存,栈内存里面分别存储变量的标识以及变量的值
    引用类型(object array function) 保存在堆内存中 ,栈内存保存的是变量的标识符以及对象在堆内存中的存储地址,当需要访问引用类型的时候,得先从栈中获取对象的地址指针,然后再从对象的堆内存中取得所需的数据。
    4、改变this指向(call apply bind)
    参考链接:https://www.cnblogs.com/theblogs/p/9943179.html
    共同点:第一个参数都为改变this的指针。若第一个参数为null/undefined,this默认指向window
    call:第一个参数改变this指向,后面的参数可以很多
    apply:第一个参数改变this指向,第二个参数为数组
    bind:第一个参数改变this指向,后面的参数可以很多,但是需要手动执行
    5、1px问题
    手机css最低只支持1px大小,解决方案 transfrom:scaleY(0.5)
    用pxtorem 完美解决屏幕适配和1px的问题
    6、事件循环
    参考链接:https://www.jianshu.com/p/184988903562
    宏任务:整体的script setTimeout setInterval
    微任内: Promise process.nextTick

    先执行同步任务,,然后看看有么有微任务,有的话就执行微任务,没有的话继续执行宏任务
    7、BFC(block formatting context 块级格式化上下文)
    float
    position(absolute fixed)
    display:inline-block 、flex
    overflow:hidden auto scroll
    以上都会触发BFC 脱离文档流
    8、Flex 1 对应的是啥
    flex-grow 放大比例
    flex-shrink 缩小比例
    flex-basis 剩余空间

    flex1 其实是flex:1 1 0;

    9、盒子模型 ie和谷歌有啥区别
    w3c的盒子模型content不包括边框和内边距
    ie的盒子模型content包含边框和内边距
    用box-sizing:border-box 可以让两种盒子模型保持一致的效果
    10、防抖 节流
    函数防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内再次被触发 则重新计算时间

    function (fn,apply) {
      var timeout = null;//创建一个用来存放定时器的的返回值
      return function () {
        clearTimeout(timeout)  //每当用户输入的时候先把前一个setTimeOut clear
        timeout = setTimeout(function() {
          fn.call(this,argument)
        },apply)
      }
    }
    

    函数节流:高频事件发生后,但在n秒内只会执行一次,所以节流会稀释掉函数的执行率

    function (fn,apply) {
      var canrun = true //通过闭包来保存一个标记
      return function () {
        if(!canrun) return //在函数开头用来判断是否为true,不为true 则 return
        canrun = false
        //将外部传入的函数的执行放在setTimeout 中
        setTimeout(()=> {
          //最后在setTimeout执行完成后再把标记设置为true 表示可以执行下一次循环了
          //当定时器没有执行的时候永远是false 在开头被return 掉
          fn.apply(this,argument)
          canrun = true
        },apply)
    
      }
    }
    

    栈和队列
    闭包以及使用场景
    原型和原型链 proto 和 prototype
    判断类型的4种方法
    参考链接 https://www.cnblogs.com/onepixel/p/5126046.html
    1、typeof 2、instanceof(instanceof 检测的是原型)

    module: {
    rules: [
    {
    test: "/.xxx$/",//指定匹配规则
    use: "xxx-loader"//指定使用loader
    }
    ]
    }

    继承

    回流和重绘

    vue编译缓存

    last-modifyed什么时候返回

    mvvm得特点和优势

    原型和原型链

    深拷贝得几种方式
    JSON.parse(JSON.stringif())
    _.cloneDeep

    判断是对象还是数组
    Array.isArray(xxx)

    typeof
    instanceof
    constructor
    Object.portotype.tostring.call(xxx) === '[object Array]'

    箭头函数和普通函数的区别
    1、箭头函数比普通函数简洁
    2、箭头函数中是不存在this,它的this继承的是函数上下文的this
    3、箭头函数里面不存在arguments(所有参数的数组集合),只能基于...arg获取参数
    let fn3 = (...args)=> {
    console.log(args)//[10,20,30]
    console.log(arguments)//arguments is not defined
    }
    fn3(10,20,30)

    相关文章

      网友评论

          本文标题:常见前端面试问题小收集

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