前端面试中,回答不出的那些问题

Posted jzhey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端面试中,回答不出的那些问题相关的知识,希望对你有一定的参考价值。

前两天电话面试了一个公司的前端,差不多问题都能回答出一点,但是一旦向下深挖,就不会了,还是自身基础打得不够啊,怕以后面试还是会遇到这些个问题,所以就觉得把面试官问我的,我回答不上来的,且现在还记得问题记录一下,方便以后巩固复习,顺便分享给面试的小伙伴

1. 深度拷贝和浅度拷贝了解过吗,是否可以说一下

当时回答:了解过,浅度拷贝的话,拷贝的如果是基本数据类型的话,他就会原样拷贝,如果拷贝的时引用数据类型,比如说对象,数组,函数这类的,他只能拷贝他的应用地址,所以拷贝完成,修改引用数据类型里面的数据时,原来的也会发生修改(当时有点紧张所以说的不是很清楚,再解释一下,a对象里面又有基本数据类型和引用数据类型,拷贝a得到b,修改b里面的引用数据类型的数据时,a也会发生变化),深度拷贝的话,他会拷贝的更加彻底,当他拷贝的时引用数据类型的数据,他会递归向下继续拷贝,直到拷贝的数据都是基本数据类型。
面试官继续问:你刚才提到了递归,那你能说一下,深度拷贝的递归出口是什么?
问道这个问题时,心里暗喜,我可是敲过深度拷贝的代码的,但是还是因为紧张,想不起来了,哎,果然面试总归会紧张,跟面试官说,等下我想下,然后手心就开始出汗,后悔面试之前没有再敲一遍代码了,终于几十秒过去,想起来了,判断这个数据是不是引用数据类型,如果不是,结束递归,???,还是想起来了,开没开心几秒呢,面试官继续问:当深度拷贝中出现两个对象相互引用,该如何处理?你懂的,我傻了,相互引用????????我咋从来没有想过这个问题呢,想了一会,告诉面试官,我们是不是可以判断这两个数据的地址是不是相等的是不是就好了,面试官:可是我不知道,哪两个对象相互引用,你怎么去判断地址是否相等呢 ?,完了完了,我已经彻底傻了,只能认输......

面试完查的资料:可以使用一个WeakMap结构存储已经被拷贝的对象,每一次进行拷贝的时候就先向WeakMap查询该对象是否已经被拷贝,如果已经被拷贝则取出该对象并返回。

//判断是数组还是对象
function getType(target){
    // console.log(Object.prototype.toString.call(target).slice(8,-1))
    return Object.prototype.toString.call(target).slice(8,-1)
}

function cloneUtil(target,hasObj = new WeakMap()){
    let result;

    // 判断数据类型
    if(getType(target) === 'Array'){
        result = []
    } else if(getType(target) === 'Object'){
        result = {}
    } else {
        return result
    }

    for (let i in target) {
        let item = target[i]
        
        //当遍历的数据中仍然有数组/对象时,重新按照之前的步骤 进行拷贝,直到所有拷贝数据的类型都是基本数据类型
        if(getType(item) === 'Object' || getType(item) === 'Array'){
            //判断hasObj中是否已经拷贝过该对象,如果已经被拷贝则取出该对象并返回。
            if(hasObj.has(item)) return hasObj.get(item)
            hasObj.set(item,{})
            let cloneitem = cloneUtil(item,hasObj)
            result[i] = cloneitem
        } else{
            result[i] = item
        }
    }

    return result
}

let obj = {
    name:'Bob',
    age:22,
    sex:{
        option1:'男',
        option2:'女'
    }
}

let cloneObj = cloneUtil(obj)
cloneObj.sex.option1 = 'xxx'
obj.obj = obj
console.log(obj)
console.log(cloneObj)

2. vue项目中你用了ui框架,比方说element-ui,你要修改ui框架提供的组件样式的时候,你会怎么去操作

当时回答:vue的style标签中,会添加一个scoped属性,防止样式的污染,但是你要修改element-ui组件的话,再带有scoped属性的style标签中去修改,是不会达到想要的结果,vue组件是可以有多个style标签的,所以当你要修改element-ui组件的样式时,可以添加一个没有scoped的style,就可以修改组件样式。

面试官继续追问:那我就是想要在有scoped属性的style标签里面去修改,那要怎么处理?

面试官这个问的时候,我顿时emmm傻了,仔细想来了想,记得如果项目用来stylus,less这样的预处理器,可以用样式穿透来实现,我就这么回答了,但是本人没有实践过,所以还是有点慌慌的,面试完之后就去查了资料。资料显示,我的回答是对的,举个例子把,看一下到底怎么穿透。

<style lang="stylus" scoped>
.a >>> .b { 
    /* ... */ 
}
</style>

//或者

<style lang="scss" scoped>
.homePage /deep/ .el-main {
    padding: 0;
}

3. call,apply了解过吗,能自己实现一个call,apply吗,还有其他什么立即绑定的函数吗

当时回答:了解过,call,apply都是更改this指向的,然后其他的我都没回答出来,后来面试完之后想想其他立即绑定还有bind啊,哎,傻了傻了

补完知识:

let person ={
    name: 'bob',
    age: 18
}

function student (){
    console.log(this.name,this.age,sex,like)
}
student.call(person,'nan','eat')

//call,apply的原理相当于,把上面的两个合并成立这个下面一个

let person = {
    name: 'bob',
    age: 18,
    fn:function student (){
        console.log(this.name,this.age,sex,like)
    }
}

person.fn('nan','like')
Function.prototype.myCall = function (context = window){//如果传入context没有赋值,就赋默认值window
    if(Object.prototype.toString.call(context) !== '[object Object]'){
        console.log('不是对象')
        return
    }
    let fn = Symbol('fn')//产生一个唯一不重复的值,以免冲突
    context[fn] = this//这里的this,是调用了myCall的函数,比方说a.mayCall(),那a就是这里的this
    let args = [...arguments].slice(1)//这里是传值
    let result = context[fn](...args)//运行这个函数
    delete context[fn] //删除context上的方法
    return result
}

Function.prototype.myApply = function (context = window){
    if(Object.prototype.toString.call(context) !== '[object Object]'){
        console.log('不是对象')
        return
    }
    let fn = Symbol('fn')
    context[fn] = this
    let args = arguments[1]
    let result = context[fn](...args)
    delete context[fn]
    return result
}

let person = {
    name: 'bob',
    age: 18
}

function student(sex,like){
    console.log(this.name,this.age,sex,like)
}

student.myCall(person,'nan','eat')
student.myApply(person,['nan','eat'])

4.因为之前问了事件循环机制是怎么样子操作的,当时回答的时候,说了js单线程的,然后就有了这个问题,js如果不是单线程会怎么样?后面再回答es6里面除了let,const新增的,es6里面还有什么你记得的内容吗,当时中间有回答了async 和 promise,所以,js单线程,又出了一道问题,promise js单线程是怎么运行过程(突然描述不清楚了,大概就是这个意思)?

当时回答:js如果不是单线程的话,对dom会有影响,但是具体什么影响我记不清楚了,然后面试官就把答案告诉我了:如果js被设计了多线程,多个线程都要操作一个dom元素,如果有一个线程要修改一个dom元素,另一个线程要删除这个dom元素,这时候就会产生问题。

下面的那个promise 在js上运行过程我又没说出来,哎,面试完之后躺在床上好好的想了下,promise里面不就是装异步函数的么,啥ajax请求不是都是放里面的么,那不就是js运行到这边的时候,会交给对应的管理模块管理,满足条件之后,进入回调队列,然后,js主线程上的同步代码执行完成之后,通过事件轮询机制,看回调队列里是否又东西,有的话就把他钩到主线程上去运行,嗯,当时人傻已经实锤了,换种问法,问事件循环机制就不知道怎么说了,所以啊,小伙伴们,记得面试的时候要冷静,冷静,冷静,虽然我面试的时候也这么跟我自己说的??

5. 隐式类型转换,2+{a:2} 会出现什么结果

当时回答:emmmmmmmmm了半天,还是没回答出来

6. 数据结构,链表出现环要怎么处理

5,6两个问题先放在这怕忘记,知识点还没补上,所以暂时就不写正确答案了,补好了会在写上的

总体感觉给自己挖了不少坑,但是平易近人的面试官告诉我,就算我不自己挖坑,他也还是会问,emmm,好吧,不后悔自己挖坑了,这只是一面我回答不出来的一些问题,还有些记不住了,就没有写上去,还有二面,到时候有不知道的,还会写上去的

以上是关于前端面试中,回答不出的那些问题的主要内容,如果未能解决你的问题,请参考以下文章

前端面试题之手写promise

2018前端个人面试总结

2018 前端面试题(不定期更新)

浅谈Java程序员面试为什么会失败?

在WPF中显示不出winform控件的原因吗

那些年大厂流露出的数百道 Java 经典面试题.可查缺补漏