前端实习面试经验汇总

前端实习面试经验汇总(不定期更新)

第一波前端面试比想象中问的面比较小,主要集中在js,尤其是es6的一些特性上,还有就是项目经验,项目中展开的问题。可能是这些公司对实习生要求没那么高?这次没有问到网络相关的,比如tcp、http啥的,不过感觉以后不会这么简单。




有鱼(一面挂)

1.promise和settimeout

笔试,面试都有问到
主要是给一道带有promise和settimeout方法的程序题,手写输出的顺序,当时给我的是这道题

Promise.resolve().then(
            ()=>{
                console.log('A');
                setTimeout(()=>{
                    console.log('B')
                },0)
            }
        );
        console.log('C');
        setTimeout(()=>{
            console.log('D')
            Promise.resolve().then(
                ()=>{
                    console.log('E');
                }
            )
        },0)

answer : CADEB

现在看很简答的一道题,只要搞清楚事件循环宏任务微任务的概念就很好懂,这里推荐
2分钟了解 JavaScript Event Loop | 面试必备
这个视频,很短很易懂。



2.深拷贝与浅拷贝

说实话这是我当时第一次接触的概念,我完全不知道这俩是啥意思。所以后来直接挂了

实际上就是

假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。

如何实现深拷贝呢?

  1. 递归赋值,即拷贝对象各个层级的属性,赋给一个全新的对象
function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象,如果是,递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是,简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    

  1. 利用JSON的stringfyparse方法实现
function deepClone(obj){
    let _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
    return objClone
}   

  1. JQ的extend方法
$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝,true为深拷贝,false为浅拷贝

target Object类型 目标对象,其他对象的成员属性将被附加到该对象上。

object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。

let a=[0,1,[2,3],4],
    b=$.extend(true,[],a);

  1. lodash中的 _.cloneDeep(value)
    详情见该库

3.vue组件间中的通信方式

老生常谈的东西,包括但不仅限于props/emit、vuex、事件总线、parent\children(感觉不怎么用?)


总结:人生第一次面试,直接一个白给开局




简巨(一面挂)

1.如何给string加一个getlength方法,用于获取字符串中数字个数(原型链)
 String.prototype.getNumberCount = function()  {
            var reg = /\d/g
            var res = this.match(reg)
            return res.length
        }

注:原型函数不能用箭头函数声明

原因:this指向问题
因为箭头函数的this是window,function的this是string本身


2.v-show和v-if的区别

相同点:v-show和v-if都能控制元素的显示和隐藏。

不同点:

  1. 实现本质方法不同
    v-show本质就是通过设置css中的display设置为none,控制隐藏
    v-if是动态的向DOM树内添加或者删除DOM元素
  2. 编译的区别
    v-show其实就是在控制css
    v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
  3. 编译的条件
    v-show都会编译,初始值为false,只是将display设为none,但它也编译了
    v-if初始值为false,就不会编译了
  4. 性能
    v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。
    注意点:因为v-show实际是操作display:" "或者none,当css本身有display:none时,v-show无法让显示
    总结:如果要频繁切换某节点时,使用v-show(无论true或者false初始都会进行渲染,此后通过css来控制显示隐藏,因此切换开销比较小,初始开销较大),如果不需要频繁切换某节点时,使用v-if(因为懒加载,初始为false时,不会渲染,但是因为它是通过添加和删除dom元素来控制显示和隐藏的,因此初始渲染开销较小,切换开销比较大)

3.闭包

闭包指的是有权访问另一个函数作用域中变量的函数,常见的方式就是在函数中创建函数,借此突破作用链域。


4.vue单元测试

单元测试(unit testing),是指对代码中的最小可测试单元进行检查和验证。单元就是人为规定的最小的被测功能模块,可能是一个单一函数或方法、一个完整的组件或类。

组件的单元测试有很多好处:
提供描述组件行为的文档
节省手动测试的时间
减少研发新特性时产生的 bug
改进设计
促进重构
自动化测试使得大团队中的开发者可以维护复杂的基础代码

5.var和let的区别,var有啥问题,let怎么解决的

var和let区别之前写过 ——>var、let、const的区别
这里主要说下var存在的问题:(let全部给予了解决)

  1. var定义的变量没有块作用域。let只有块级作用域
  for (let i =0 ; i<10 ; i ++){}
  
  console.log(i);//undefined

  for( var i = 0 ; i<10 ; i++){}
  
  console.log(i);//10
  1. var定义的全局变量会自动添加全局window对象的属性。这个var、let、const的区别中有提到,delete不掉

  2. var存在变量提升,let没有,var后声明的会输出undefined,let后声明的会报Cannot access ‘xxx’ before initialization


总结: 简巨好像只要当年毕业的,农业相关的公司,hr直说了996,牛





和风天气(没面挂)

总结: 他们只要6个月+的md,甚至都没给我做题的机会淦




联想(联想研究院)offer

总结: 一共进行了两次电话面试,主要都是在围绕项目经验在问,问的比较杂,比较像即兴提问,还问了爬虫的事情。
工作时间早9晚6,弹性,200一天。




爱奇艺(一面挂)

  1. Number(‘1a’) => 输出什么
    输出NAN
    (我当时说的输出1,上来就一个白给)
    如果要输出1的话,得是parseInt(‘1a’)

  2. vue 父子组件加载顺序

父 beforeCreate
父 created
父 beforeMount
子1 beforeCreate
子1 created
子1 beforeMount
(子2 beforeCreate
子2 created
子2 beforeMount…如果有多个孩子以此类推)
子1 mounted
(子2 mounted…如果有多个孩子以此类推)
父 mounted

  1. 现有ABC三类,C类的实例c要有AB的全部属性和方法,如何做到
    JS中类的继承主要有6种:
    例——
function Person(name){
            this.name = name ;
            this.callname = function(){
                alert(this.name)
            }
        }
        Person.prototype.age = 10

        const person = new Person()
        person.school = 'g'

1.原型链继承

	//原型链继承

        function MT(){
           this.name = 'mt'
        }

        MT.prototype = new Person() //让新实例的原型等于父类的实例。
        const mt = new MT()
        
        console.log(mt.name); //mt
        console.log(mt.age); // 10
        console.log(mt instanceof Person);//true

实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性。(新实例不会继承父类实例的属性!)
缺点:1. 新实例无法向父类构造函数传参。
   2. 继承单一。
   3. 所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!

2.借用构造函数继承

 //借用构造函数继承
        function test2(){
            Person.call(this,'person') //用.call()和.apply()将父类构造函数引入子类函数(在子类函数中做了父类函数的自执行(复制))
            this.age = 12 
        }

        var t2 = new test2()
        console.log(t2.name);//person
        console.log(t2 instanceof Person);//false

解决了原型链继承缺点,可以继承多个构造函数属性(call多个)。在子实例中可向父实例传参。(this,‘person’)
缺点:1. 只能继承父类构造函数的属性。没有继承父类原型的属性。
   2. 无法实现构造函数的复用。(每次用每次都要重新调用)
   3. 每个新实例都有父类构造函数的副本,臃肿。


3.组合继承(组合原型链继承和借用构造函数继承)(常用)

  //组合继承
        function mix(name){
            Person.call(this,name)
        }

        mix.prototype = new Person()
        var m = new mix('mix')
        
        console.log(m.name);//mix
        console.log(m.age);//10

结合了两种模式的优点,传参和复用,可以继承父类原型上的属性,可以传参,可复用。每个新实例引入的构造函数属性是私有的。
缺点: 调用了两次父类构造函数(耗内存),子类的构造函数会代替原型上的那个父类构造函数。

这道题可以让B成为A的原型链上的实例B.protoype = new A() ,再让C成为B原型链上的实例 C.prototype = new B()
也可以让C在函数内部call这两个类 A.call() B.call()

  1. Vue生命周期
    Vue官方生命周期图

  2. Vue通信方式
    上面有提到

  3. 箭头函数和普通函数的区别

    1. this指向不一样:
      箭头函数的this默认指向定义它时,所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向,偶尔没有上下文对象,this就指向window
      普通函数的this指向的是它的调用者,谁调用这个this,this就指向谁,如果没有调用者,那这个this就指向window在严格模式下(设置“use strict”),this为undefined
    2. 箭头函数是匿名函数,普通函数式具名函数
    3. 箭头函数无protoype,不可用于构造函数;普通函数有prototype,可用于构造函数
  4. Promise有几种状态

    1. pending未定
    2. fulfilled履行
    3. rejected拒绝
      同一时刻只能存在一种状态, 状态一变就不能再变,即一个promise的状态只可能从==“等待”转到“完成”态或者“拒绝”态==,不能逆向转换
      promise必须实现then方法(可以说,then就是promise的核心),而且then必须返回一个promise,同一个promise的then可以调用多次,并且回调的执行顺序跟它们被定义时的顺序一致,then方法接受两个参数,第一个参数是成功时的回调,在promise由“等待”态转换到“完成”态时调用,另一个是失败时的回调,在promise由“等待”态转换到“拒绝”态时调用。同时,then可以接受另一个promise传入,也接受一个“类then”的对象或方法,即thenable对象。

  5. 算法题,判断字符串是否为回文(如‘abcddcba’、‘123454321’)
    中心扩散法

 //中心扩散法判断回文

        const checkhuiwen = (s) => {
            if (s.length === 1) return true
            
            //中心判断法
            const check_center =(m,n) => {
                while(s[m] === s[n] && s[m] && s[n]){
                    m--;
                    n++
                }
                if (m=== -1 && n === s.length) return true
                else return false
            }
            
            if (s.length % 2 === 0){
                //偶数双中心
                return check_center((s.length/2)-1,s.length/2)
            }
            else {
                //奇数单中心
                return check_center(s.length/2,s.length/2)
            }
        }

        console.log(checkhuiwen('bbbd'));//false
        console.log(checkhuiwen('abcddcba'));//true

  1. 判断数组与对象
    let a = [2,3,4]
    let b = {name:'mt'}
    //isArray
    console.log(Array.isArray(a));//true
    console.log(Array.isArray(b));//false
    
     //.length
    console.log(a.length);//3
    console.log(b.length);//undefined
    if(!undefined){
        console.log('!undefined判断条件为正');
    }
    
    //.toString()
    console.log(a.toString());//2,3,4
    console.log(b.toString());//[object Object]
    
    //Object.prototype.toString.call
    console.log(Object.prototype.toString.call(a));//[object Array]
    console.log(Object.prototype.toString.call(b));//[object Object]
    
    //.contructor()
    console.log(a.constructor());//[]
    console.log(b.constructor());//{}
    
    // .Array.prototype.isPrototypeOf
    console.log(Array.prototype.isPrototypeOf(a));//true
    console.log(Array.prototype.isPrototypeOf(b));//false
    
    


滴滴(offer)

一面

  1. ES6的新特性
    1. 函数默认参数
    2. 箭头函数
    3. const、let
    4. 解构赋值
    5. 模板表达式
    6. Promise
  2. add(1)(2)(3) = 6
    知识点:闭包+console.log/alert 调用toString方法
 const add = (num) => {
        const s = (a)=> {
            num += a
            return s
        }

        s.toString = ()=>{
            return num
        }

        return s
    }
    console.log(add(1)(2)(3)(4)(5)) //15

拓展:add(1)(2)(3)(4)…
3. 获取无重复的最长子串

 const longsubstring = (s) =>{
            let max = 0
            let m = ""
            let len = 0
            let ls = []
            for (n of s)
            {
                if (m.indexOf(n) !== -1){
                    m += n 
                    m = m.slice(m.indexOf(n)+ 1)
                }
                else {
                    m += n 
                    len = m.length
                    if(len > max){
                        max = len 
                        ls.length = 0
                        ls.push(m)
                    }
                    else if (len === max){
                        ls.push(m)
                    }
                    
                    
                }
            }
            return ls
        }
  1. 闭包,实现闭包

  2. webpack中cssloader和styleloader的区别
    webpack使用JS写的,运行在node环境,所以默认打包时只会处理JS之间的依赖关系
    所以像.css这样的文件不是一个js模块,需要配置webpack使用cssloader或者styleloader去合理地处理他们,
    如果在js中导入了css,就需要css-loader进行识别
    css-loader会处理 import / require() @import / url 引入的内容。

    	//base.css
    .bg {
      background: #000;
    }
    
    
    const style = require('./base.css')
    console.log(style, 'css')
    

    css-loader处理后是这样的
    11
    这是个数组,页面是无法直接使用,这时我们需要用到style-loader来处理。
    style-loader 是通过一个JS脚本创建一个style标签,里面包含一些样式。style-loader是不能单独使用的,因为它并不负责解析 css 之前的依赖关系,每个loader的功能都是单一的,各自拆分独立。

  3. 强制缓存和协商缓存
    强缓存就是给资源设置个过期时间,客户端每次请求资源时都会看是否过期;只有在过期才会去询问服务器。所以,强缓存就是为了给客户端自给自足用的
    而当某天,客户端请求该资源时发现其过期了,这是就会去请求服务器了,而这时候去请求服务器的这过程就可以设置协商缓存。这时候,协商缓存就是需要客户端和服务器两端进行交互的。
    协商缓存流程——
    发请求–>看资源是否过期–>过期–>请求服务器–>服务器对比资源是否真的过期–>没过期–>返回304状态码–>客户端用缓存的老资源。
    or
    发请求–>看资源是否过期–>过期–>请求服务器–>服务器对比资源是否真的过期–>过期–>返回200状态码–>客户端如第一次接收该资源一样,记下它的cache-control中的max-age、etag、last-modified等。

  4. 常见状态码
    常见状态码

  5. Vue计算属性的作用 computerd(){}

    computed和methods对比

    计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
    相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
    缓存的意义?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

二面

  1. vue的key的作用

  2. 计算属性v-modal ,有什么优点
    计算属性的优点在于其缓存机制,即只有在它相关依赖发生改变时才会重新求值。

  3. 微任务、宏任务、eventLoop

  4. 跨域

  5. webpack

  6. js中的静态方法与实例方法

    function A() {
         }
    //say为a的静态方法
    A.say = function () {
         
        console.log('im static');
    }
    //A是方法对象
    A.say()
    
    function B() {
         }
    //say为B的实例方法
    B.prototype.say = function () {
         
        console.log('im not dynamic')
    }
    
    //bb是B的引用,可以找到say方法
    var bb = new B()
    bb.say()
    
    

    静态方法通过函数名.方法名的方式直接定义。

  7. 函数节流,函数防抖
    防抖:所有操作在一定时间间隔内都将只触发一次回调,应用:滚动,搜索栏相关词
    实现:

    	//防抖
    const debounce = (fn,content,delay)=>{
         
        let movement = null
        return function () {
         
            let args = arguments
            if(movement) clearTimeout(movement)
            movement = setTimeout(()=>{
         
                fn.apply(content,args)
            },delay)
        }
    }
    

    节流:所有操作在一定时间内都将只触发一次回调,应用:监听滚动调位置

    	//节流
    const throttle = (fn,content,delay) => 
  • 16
    点赞
  • 79
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值