前端实习面试经验汇总(不定期更新)
第一波前端面试比想象中问的面比较小,主要集中在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没变,那就是深拷贝,自食其力。
如何实现深拷贝呢?
- 递归赋值,即拷贝对象各个层级的属性,赋给一个全新的对象
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;
}
- 利用JSON的stringfy和parse方法实现
function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
- 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);
- 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都能控制元素的显示和隐藏。
不同点:
- 实现本质方法不同
v-show本质就是通过设置css中的display设置为none,控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素 - 编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件 - 编译的条件
v-show都会编译,初始值为false,只是将display设为none,但它也编译了
v-if初始值为false,就不会编译了 - 性能
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全部给予了解决)
- var定义的变量没有块作用域。let只有块级作用域
for (let i =0 ; i<10 ; i ++){}
console.log(i);//undefined
for( var i = 0 ; i<10 ; i++){}
console.log(i);//10
-
var定义的全局变量会自动添加全局window对象的属性。这个var、let、const的区别中有提到,delete不掉
-
var存在变量提升,let没有,var后声明的会输出undefined,let后声明的会报Cannot access ‘xxx’ before initialization
总结: 简巨好像只要当年毕业的,农业相关的公司,hr直说了996,牛
和风天气(没面挂)
总结: 他们只要6个月+的md,甚至都没给我做题的机会淦
联想(联想研究院)offer
总结: 一共进行了两次电话面试,主要都是在围绕项目经验在问,问的比较杂,比较像即兴提问,还问了爬虫的事情。
工作时间早9晚6,弹性,200一天。
爱奇艺(一面挂)
- Number(‘1a’) => 输出什么
输出NAN
(我当时说的输出1,上来就一个白给)
如果要输出1的话,得是parseInt(‘1a’)
- vue 父子组件加载顺序
父 beforeCreate
父 created
父 beforeMount
子1 beforeCreate
子1 created
子1 beforeMount
(子2 beforeCreate
子2 created
子2 beforeMount…如果有多个孩子以此类推)
子1 mounted
(子2 mounted…如果有多个孩子以此类推)
父 mounted
- 现有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()
-
Vue生命周期
Vue官方生命周期图 -
Vue通信方式
上面有提到 -
箭头函数和普通函数的区别
- this指向不一样:
箭头函数的this默认指向定义它时,所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向,偶尔没有上下文对象,this就指向window
普通函数的this指向的是它的调用者,谁调用这个this,this就指向谁,如果没有调用者,那这个this就指向window在严格模式下(设置“use strict”),this为undefined - 箭头函数是匿名函数,普通函数式具名函数
- 箭头函数无protoype,不可用于构造函数;普通函数有prototype,可用于构造函数
- this指向不一样:
-
Promise有几种状态
- pending未定
- fulfilled履行
- rejected拒绝
同一时刻只能存在一种状态, 状态一变就不能再变,即一个promise的状态只可能从==“等待”转到“完成”态或者“拒绝”态==,不能逆向转换
promise必须实现then方法(可以说,then就是promise的核心),而且then必须返回一个promise,同一个promise的then可以调用多次,并且回调的执行顺序跟它们被定义时的顺序一致,then方法接受两个参数,第一个参数是成功时的回调,在promise由“等待”态转换到“完成”态时调用,另一个是失败时的回调,在promise由“等待”态转换到“拒绝”态时调用。同时,then可以接受另一个promise传入,也接受一个“类then”的对象或方法,即thenable对象。
-
算法题,判断字符串是否为回文(如‘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
- 判断数组与对象
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)
一面
- ES6的新特性
- 函数默认参数
- 箭头函数
- const、let
- 解构赋值
- 模板表达式
- Promise
- 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
}
-
闭包,实现闭包
略 -
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处理后是这样的
这是个数组,页面是无法直接使用,这时我们需要用到style-loader来处理。
style-loader 是通过一个JS脚本创建一个style标签,里面包含一些样式。style-loader是不能单独使用的,因为它并不负责解析 css 之前的依赖关系,每个loader的功能都是单一的,各自拆分独立。 -
强制缓存和协商缓存
强缓存就是给资源设置个过期时间,客户端每次请求资源时都会看是否过期;只有在过期才会去询问服务器。所以,强缓存就是为了给客户端自给自足用的
而当某天,客户端请求该资源时发现其过期了,这是就会去请求服务器了,而这时候去请求服务器的这过程就可以设置协商缓存。这时候,协商缓存就是需要客户端和服务器两端进行交互的。
协商缓存流程——
发请求–>看资源是否过期–>过期–>请求服务器–>服务器对比资源是否真的过期–>没过期–>返回304状态码–>客户端用缓存的老资源。
or
发请求–>看资源是否过期–>过期–>请求服务器–>服务器对比资源是否真的过期–>过期–>返回200状态码–>客户端如第一次接收该资源一样,记下它的cache-control中的max-age、etag、last-modified等。 -
常见状态码
常见状态码 -
Vue计算属性的作用 computerd(){}
computed和methods对比
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
缓存的意义?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。
二面
-
vue的key的作用
-
计算属性v-modal ,有什么优点
计算属性的优点在于其缓存机制,即只有在它相关依赖发生改变时才会重新求值。 -
微任务、宏任务、eventLoop
-
跨域
-
webpack
-
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()
静态方法通过函数名.方法名的方式直接定义。
-
函数节流,函数防抖
防抖:所有操作在一定时间间隔内都将只触发一次回调,应用:滚动,搜索栏相关词
实现://防抖 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) =>