前端面试题(亲身面试经验)

Posted jinzhenzong

tags:

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

  最近面试了一些公司,趁着疫情期间,总结一波。大家可以看看  会有用的。

 

webpack

1、webpack中entry和output的作用

webpack中的entry标记入口文件,它可以是一个字符串(单入口)或者一个数组(多入口),output用来标记输出,主要有两个属性 path和 filename。其次就是publicPath 和chunkFileName

2、webpack中loader和plugin的作用

loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件,对于其他资源例如 css,图片,或者其他的语法集,比如 jsx, coffee,是没有办法加载的。 这就需要对应的loader将资源转化,加载进来。loader是用于加载的,它作用于一个个文件上。
plugin 用于扩展webpack的功能。它直接作用于 webpack,扩展了它的功能。当然loader也是变相的扩展了 webpack ,但是它只专注于转化文件。而plugin的功能更加的丰富,而不仅局限于资源的加载。

3、webpack中可以有哪些优化

1、优化Loader的文件搜索范围,指定include、exclude
2、把Babel编译过的文件缓存起来  loader: babel-loader?cacheDirectory=ture
3、懒加载、按需加载、分包、压缩
4、提取公共代码与第三方代码
5、使用HappyPack插件开启多进程Loader转换
6、区分dev、product环境,减少不必要
7、减少不必要的编译,提升开发时构建速度(devServer.watchOptions.aggregateTimeout)

4、你是依据什么来确定你要优化哪个模块

我会使用一个webpack-bundle-analyzer的插件,这个插件(plugin常规使用,需要在package.json 中写npm_config_report=true)可以查看打包后文件包的大小,进而可以找出比较大的包,对他进行优化

5、webpack构建流程

1、初始化参数,从配置文件和shell语句中读到的参数合并,得到最后的参数
2、开始编译:用合并得到的参数初始化complier对象,加载是所有配置的插件,执行run方法开始编译
3、确定入口,通过entry找到入口文件
4、编译模块,从入口文件出发,调用所有配置的loader对模块进行解析翻译,在找到该模块依赖的模块进行处理
5、 完成模块编译,得到每个模块被翻译之后的最终的内容和依赖关系
6、输出资源,根据入口和模块之间的依赖关系,组装成一个个包含多个模块的chunk,在把每个chunk转换成一个单独的文件加载到输出列表、
7、输出完成,确定输出的路径和文件名,把内容写到文件系统中

简单版
初始化参数 -> 编译开始 -> 找到入口 -> 编译入口及其依赖 -> 完成编译确定关系 -> 输出资源 -> 输出完成

6、webpack热更新原理

首先可以这么理解 webpack是一个基于node的小服务器,这么就好理解了,简单来说:
1、watch 编译过程、devServer 推送更新消息到浏览器
2、浏览器接收到服务端消息做出响应
3、对模块进行热更新或刷新页面

7、webpack-dev-server和http服务器如nginx有什么区别?

webpack-dev-server使用内存来存储webpack开发环境下的打包文件,并且可以使用模块热更新,他比传统的http服务对开发更加简单高效。

8、happypack使用方法

module:{
    rules:[{
            test:/.js$/,
            use:[happypack/loader?id=babel]
            exclude:path.resolve(__dirname, node_modules)
        },{
            test:/.css/,
            use:[happypack/loader?id=css]
        }],
    plugins:[
        new HappyPack({
            id:babel,
            loaders:[babel-loader?cacheDirectory]
        }),
        new HappyPack({
            id:css,
            loaders:[css-loader]
        })
    ]
}

 

js

1、array map和foreach的区别

map有返回值而且必须return返回一个数组才行,而forEach没有返回值可直接打印结果。

2、array some和filter的区别

some方法返回的是boolean值,可用于检察数组中是否有某对象
filter方法返回的是一个新数组,可用于过滤数组中的对象

3、new一个对象过程发生了什么

1、创建一个新对象,如:var person = {};
2、新对象的_proto_属性指向构造函数的原型对象。
3、将构造函数的作用域赋值给新对象。(也所以this对象指向新对象)
4、执行构造函数内部的代码,将属性添加给person中的this对象。
5、返回新对象person。

4、数组排序的方式

主要有像快速排序、插入排序、冒泡排序

插入排序

方法:将第一待排序序列第一个元素看做一个有序序列,把第二个元素到最后一个元素当成是未排序序列。
从头到尾依次扫描未排序序列,将扫描到的每个元素插入有序序列的适当位置。

代码:
var insertSort = function(arr) {
    var len = arr.length;
    var preIndex, current;
    for(var i = 1; i < len; i++){
        preIndex = i - 1;
        current = arr[i];
        while(preIndex >= 0 && arr[preIndex] > current){
            arr[preIndex + 1] = arr[preIndex];
            preIndex--;
        }
        arr[preIndex + 1] = current;
    }
    return arr;
}

快速排序

方法 :基本原理是将数组内的数分成三组,取数组中间的数为基准,将较小数放在左边,较大数放在右边,分别将三类数存放在一个数组内,最后递归进行排序。

代码:

function quickSort(arr) {

    if(arr.length<=1) {
        return arr;
    }

    let leftArr = [];
    let rightArr = [];
    let q = arr[0];
    for(let i = 1,l=arr.length; i<l; i++) {
        if(arr[i]>q) {
            rightArr.push(arr[i]);
        }else{
            leftArr.push(arr[i]);
        }
    }
    return [].concat(quickSort(leftArr),[q],quickSort(rightArr));
}

冒泡排序

方法:比较两个相邻的元素,如果后一个比前一个大,则交换位置,然后类推,每次比较完成后可以少比较最后一个

代码:
function bubbleSort(arr) {  
    for(let i = 0,l=arr.length;i<l-1;i++) {
        for(let j = i+1;j<l;j++) { 
          if(arr[i]>arr[j]) {
                let tem = arr[i];
                arr[i] = arr[j];
                arr[j] = tem;
            }
        }
    }
    return arr;
}

5、数组去重的几种方式

1、利用ES6 Set去重
代码:
Array.from(new Set(arr))或者[...new Set(arr)]
2、健值去重法
原理:
利用对象的属性不能相同的特点进行去重

function unique(arr) {
    var arrry= [];
     var  obj = {};
    for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            arrry.push(arr[i])
            obj[arr[i]] = 1
        } else {
            obj[arr[i]]++
        }
    }
    return arrry;
}
3、includes


function unique(arr) {
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {
                    array.push(arr[i]);
              }
    }
    return array
}
高大上写法:(reduce+includes)
function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
4、排序后相邻去除法
原理:sort之后会把所有元素排序,只需要比较当前和下一个元素是否完全一致,不完全一致则增加
function uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.length; i++){
        if( array[i] !== temp[temp.length-1]){
            temp.push(array[i]);
        }
    }
    return temp;
}
5、indexof
原理:如果当前数组的第i项在当前数组中第一次出现的位置不是i,那么表示第i项是重复的,忽略掉。否则存入结果数组。
function uniq(array){
    var temp = [];
    for(var i = 0; i < array.length; i++) {
        //如果当前数组的第i项在当前数组中第一次出现的位置是i,才存入数组;否则代表是重复的
        if(array.indexOf(array[i]) == i){
            temp.push(array[i])
        }
    }
    return temp;
}

6、字符串出现最多的次数

1、对象法
原理:利用js健值对唯一的特性,如果包含key则value++
function countStr(str){
    var obj = {};
    for(var i = 0, l = str.length,k; i < l ;i++){
        k = str.charAt(i);
        if(obj[k]){
            obj[k]++;
        }else{
            obj[k] = 1;
        }
    }
    var m = 0,i=null;
    for(var k in obj){
            if(obj[k] > m){
                m = obj[k];
                i = k;
            }
    }
return i + ‘:‘ + m;
}

7、reduce两个参数分别是什么?

第一个参数是一个函数,函数包含4个参数分别是:total(本次总和、初始值)、currentValue(当前元素)、currentIndex(当前index)、arr(原数组)
第二个参数是一个初始值

8、怎么可以将一个包含id的数组变成一个用id做key的json

arr.reduce((total,currentItem) => {
    total[currentItem.id] = currentItem;
    return total
},{})

 

9、下面这个代码段输出什么

 console.log(1);
        setTimeout(function(){
            console.log(2)
        })
        new Promise(function(res,rej){
            console.log(3)
            res()
        })
        .then(function(){
            console.log(4)
        })
        .catch(function(){
            console.log(5)
        })
        async function a(){
            console.log(6);
            await console.log(7);
            console.log(8)
        }
        a();
        console.log(9)

1,3,6,7,9,4,8,2
本题花式比较多,遵循 同步>异步 微任务>宏任务

10、promise有几种状态?

三种,分别是pending、fulfilled、rejected(未决定,履行,拒绝),resolve时候会由padding->fulfilled,reject会由padding->rejected

11、聊聊原型链

这个。。。不知道怎么描述,也不给个题目,大致说下我是怎么说的吧
js是一个万物皆对象的语言,每一个对象都会包含一个原型对象,对象以原型为模版,从他的原型继承方法和属性。当然对象也是可以由原型的,一层一层类似于一个链条,我们叫做原型链。比如举个例子,man->person->object

12、判断是不是array

1、instanceof (检测构造函数的 prototype 属性是否出现在某个实例对象的原型链)
a instanceof Array
2、原型prototype + toString +  call()
Object.prototype.toString.call(a) === "[object Array]"
Object.getPrototypeOf(a) ===  "[object Array]"
3、原型prototype + isPrototypeOf()
Array.prototype.isPrototypeOf(variable)
4、 Array.isArray

13、判断是不是对象

1、原型prototype + toString +  call()
Object.prototype.toString.call(obj) === ‘[object Object]‘
Object.getPrototypeOf(b).toString() === "[object Object]"
2、instanceof(需要处理array)
a instanceof Object && !(a instanceof Array)

14、闭包是什么?怎么写?

主要是为了从函数外部访问函数内部的变量,且这个变量永远不会被内存回收(会回收闭包内函数的变量不会回收闭包的变量),写法为函数内reuturn一个function

15、null和undefined的区别?

1、null是一个表示”无”的对象,转为数值时为0;undefined是一个表示”无”的原始值,转为数值时为NaN。
2、undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。
3、null表示”没有对象”,即该处不应该有值。

16、前端几种数据存储方式

localstorage、sessionstorage、cookie、websql等

17、localstorage和sessionStorage以及cookie的区别

首先是cookie他的存储大小对比local和session会小很多,local他会一直存在于浏览器内存,即使窗口关闭或者是浏览器关闭哪怕是新开一个页面local都是共享的。而session他是属于会话级的,我们哪怕打开相同的页面,session也不会共享过来。

18、解决跨域的方式

1、通过jsonp跨域(callback)
2、CORS (服务端配置Access-Control-Allow-Origin)
3、domain+iframe(做法:页面写一个iframe,将sec设置为要跨域的域名,通过document.getElementById(‘iframe‘).contentWindow.$,来取到对应的$,再通过$.ajax调用即可,不过仅限于主域名相同)
4、nginx
5、iframe

19、eventloop介绍

js是一个单线程的东西(为什么单线程自己百度),
在javascript中,存在一个执行栈,当我们调用一个函数时,JavaScript引擎会将函数push到执行栈(Stack)中,
执行完毕之后pop出去(先进先出),当遇到异步任务时,就将任务放进任务队列中。异步任务有两种,一种叫做宏任务一种叫做微任务,
当主线程执行完毕,也就是执行栈为空时,会先确认微任务队列是否为空,不为空就取出微任务队列中所有微任务然后顺序执行,微任务执行完毕后
会在宏任务队列中取出下一个任务添加到执行栈,如果这时候再遇到微任务继续加到微任务队列,如此循环。

20、对象深拷贝方式

1、最简单的方式 JSON.parse(JSON.stringify(Obj)) 这种方法使用较为简单,可以满足基本的深拷贝需求,而且能够处理JSON格式能表示的所有数据类型,但是对于正则表达式类型、函数类型等无法进行深拷贝(而且会直接丢失相应的值)。
2、jQuery深拷贝 var copiedObject = $.extend(true, {}, originalObject)
3、手动写递归方式
function deepClone (obj) {
        var newobj = obj.constructor === Array ? [] : {};
        if(typeof obj !== ‘object‘){
            return;
        }
        for(var i in obj){
           newobj[i] = typeof obj[i] === ‘object‘ ? deepClone(obj[i]) : obj[i];
        }
        return newobj
}

21、object.assign 是深拷贝还是浅拷贝

Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。
也就是说,如果对象的属性值为简单类型(如string, number),通过Object.assign({},srcObj);
得到的新对象为深拷贝;如果属性值为对象或其它引用类型,那对于这个对象而言其实是浅拷贝的。

22、聊聊平时你都会做哪些优化

这个比较多了,我之前总结过。可以移步https://www.cnblogs.com/jinzhenzong/p/11777065.html,可以整理一下剪短的话语。
我们可以分为几块去说,首先是缓存方面,我们可以借助如:localstorage、sessionStorage、cookie、浏览器自带缓存、h5 minifest等对数据、ajax接口、页面等进行缓存,
在请求时,我们应该尽量减少重定向,做一些dns预解析、提高浏览器并发数等。之后就是页面解析和渲染时候,可以做关键路径的渲染,避免一下复杂的布局,用flex替换原始的布局模型
还有一些像长列表的尾优化啊、图片懒加载啊,尽量的减少js的占用时间,比如使用jq时候我们经常会遇到一些操作样式或者设置内容等,这个时候我们可以对dom进行缓存和批量处理,来减少操作dom和回流重绘等。比如我们
需要监听用户输入时候都要做一下事件的防抖节流,还有一些如减少闭包(为了变量能够被内存回收机制回收)、使用性能好的api如requestanimationframe代替settimeout、setinterval等。还有一块比较大的就是
资源的处理,更多还是借助webpack,比如像分包、代码合并、文件的缓存、小图片base64等,还有像综合考虑是否使用框架、图片选质量比较低的,视频的预加载等。
ps:强烈建议去看我原文章至少吧xmind下下来注释都看一编,不然深入问一下你就废了

23、前端打开页面的过程

同样之前总结过https://www.cnblogs.com/jinzhenzong/p/11753559.html
大概过程如下:
1、输入网址
2、浏览器解析ip
3、通过ip发起链接
4、服务器接受请求
5、处理请求并返回
6、页面渲染 -> 
    解析HTML文件,创建DOM树(解析执行JS脚本时,会停止解析后续HTML) 
    解析CSS,形成CSS对象模型
    将CSS与DOM合并,构建渲染树
    布局渲染树
    绘制渲染树(可能触发回流和重绘)
7、渲染完毕

经过几个公司问题总结出,一般多会问第六步。前面就是听听而已。

24、promise,async函数区别与理解

promise 将原来的用 回调函数 的 异步编程 方法转成用relsove和reject触发事件, 用 then 和 catch 捕获成功或者失败的状态
async函数就相当于自执行的Generator函数,async函数就相当于自执行的Generator函数,较于Promise,async 的优越性就是把每次异步返回的结果从 then 中拿到最外层的方法中,不需要链式调用,只要用同步的写法就可以了。
比 promise 直观,但是 async 必须以一个 Promise 对象开始 ,所以 async 通常是和Promise 结合使用的。

js的比较多,我只是选了一部分比较常问的,其他还有像设计模式、mvc、mvvm、jq组件、还有各种数组对象的方法的作用参数等就不总结了

vue篇

1、watch和计算属性区别

watch适合处理的场景是,侦听一个数的变化,当该数据变化,来处理其他与之相关数据的变化(该数据影响别的多个数据)
computed适合处理的场景是,获得一个值或者结果,该结果受其他的依赖的影响。(一个数据受多个数据影响)

2、watch也可以实现监听为什么还要计算属性这个?

1、首先vue官方推荐的是如果可以用计算属性就不要用watch,为什么呢?因为计算属性是有缓存的,对性能来说是更好的。
2、其次两种功能是不一样的,computed针对于一个值依赖于多个,watch虽然也可以,但是代码会很臃肿

3、data为什么是一个函数?

组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

4、双向数据绑定原理?

利用了 Object.defineProperty() ,让数据变得可观测,结合订阅者发布者模式,当数据变化时候会由发布者来通知订阅者更新数据和view
vue3利用proxy来让数据可观测。

5、组件怎么实现双向数据绑定

组件 内部props写上value,watch value进行数据的初始化,data中声明一个newvalue,监听这个newvalue,如果页面发生变化使用emit/on向上抛出input事件

6、生命周期(8+3)官网去看

7、extend和混合

extend用于创建vue实例
    mixins可以混入多个mixin,extends只能继承一个
    mixins类似于面向切面的编程(AOP),extends类似于面向对象的编程

8、什么是单向数据流

数据流向是单向的,即父能给子,子不能修改父,写组件时我都会声明一个类似box的东西,当我子组件发生变化我都会通知到box再由box进行分发,这么做可以保证出现bug时候的调试

9、事件通信

父子:props
子父:emit/on
同级:新声明一个vue作为中间,来转发。或者原生写一个eventbus
跨层级:provide 和 inject(不建议日常开发使用,主要在开发高阶插件/组件库时使用。)、同级的在这里也可以使用 

10、vue中 key 值的作用

1、不加key的话,更新机制的进行diff的时候是会全部比较的,对性能不好。
2、不加可能会出现数据变化而没有渲染视图
3、根据diff算法,同一层级的一组节点,他们需要通过唯一的id进行区分。

11、vue中如果数据更新了视图没有渲染怎么办

一般这种都会出现在jsonjsonArray中,需要使用$set(目标,要修改的key,值),如果是层级特别多可能set还是不会生效,需要this.$forceUpdate();

12、如果我需要在视图更新后进行一些操作可以怎么做

$nextTick

13、vue v-show/v-if

v-show控制display,适用于切换频繁的场景
v-if如果为false,页面都不会渲染这个dom,适用于不经常切换的场景。

14、vue-router有哪几种导航钩子

1、全局的 beforeEach、afterEach
2、单个路由独享的beforeEnter
3、页面级的 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

15、hash和history路由

hash 值变化不会导致浏览器向服务器发出请求
hash改变会触发 hashchange 事件(hashchange只能改变 # 后面的url片段)
hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了

history 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。但是history路由需要后端配置
如果路由找不到,就始终返回一个html,不然会由刷新404的问题

更多的会慢慢完善,我过滤掉了很多比如根据自己理解去解答的,代码题也过滤了不少,因为最近电话面试居多,程序题几乎没有。过滤了很多基础的,基本用过的人都会的。只取其中最经典,最常问,最有误区的,可能会由一些疏漏我之后想起来或者遇到再补上

 

以上是关于前端面试题(亲身面试经验)的主要内容,如果未能解决你的问题,请参考以下文章

leetcode 最常见的 150 道前端面试题(简单题上)

经验总结:Java高级工程师面试题-字节跳动,成功跳槽阿里!

leetcode 最常见的150道前端面试题(简单题下)

关于前端大厂面试经验分享

2021最新大厂前端面试题总结(百度字节跳动腾讯小米.....),附面试经验!

一年内经验前端面试题记录