一些web前端面试题的总结

最近呢,出去面试了几家公司,就此记录一下我印象比较深刻的一些问题吧:

在ES5下实现const的功能(还问了const定义的对象和数组能否修改,为什么)

var const_=function (varName,value){
    window.varName=value;
    Object.defineProperty(window,varName,{
        enumerable:false,
        configurable:false,
        get:function(){
            return value;
        },
        set:function(data){
            if(data!==value){
                throw new TypeError('不允许修改');
            }else{
                return value;
            }
        }   
    })
}
const_('a',20);
a=30;//报错

vue是怎么实现数据的双向绑定(其实这个和上面的问题是一个知识点)

这个和上面的方法是一样的,通过监听对象上的get和set,从而实现在修改数据的时候及时判断是否需要更新。这也是为啥每次console vue中的数据是打印出来的都是getter和setter具体的代码就不写了,差不多的

纯函数相关,涉及到react

纯函数的标准定义百度即可,我的理解就是:吃啥吐啥,雷打不动,React中的纯组件(或者说是函数式组件)就是一个纯函数,给我啥数据我显示啥视图,贼稳。再比如Redux中的reducer也是纯函数,负责处理action提供的数据。React文档中就说过,react特别执着于纯函数。

关于数据转换的问题(这类型问题两个公司都问了,感觉是比较关键的点)

这个是真的没想到,一年前我面试的时候还没这类型的问题,感觉自己答的不是很好。。。心态炸裂啊

就举第二家公司的例子吧:

后台给你返回的数据是:[{year:2000,month:1,day:11,birth:200}]这种格式的,计算出每年每个月出生的人数以及在当年的占比,并且能够在视图中展现

假设初始数据是:
arr: [
        {year:2000,month:1,day:11,birth:200},
        {year:2000,month:1,day:11,birth:20},
        {year:2010,month:2,day:22,birth:100},
        {year:2000,month:1,day:11,birth:200},
        {year:2012,month:3,day:11,birth:200},
        {year:2004,month:4,day:11,birth:200},
        {year:2013,month:10,day:11,birth:200},
        {year:2017,month:7,day:11,birth:200},
        {year:2019,month:7,day:11,birth:200},
        {year:2018,month:8,day:11,birth:200},
        {year:2005,month:12,day:11,birth:200},
        {year:2005,month:11,day:11,birth:200},
        {year:2004,month:1,day:11,birth:200},
        {year:2000,month:10,day:11,birth:200},
        {year:2016,month:11,day:11,birth:200},
      ];
// 不使用lodash
let years=arr.map(item=>item.year);
let yearsUnique=[...new Set(years)];
let yearMonths=yearsUnique.map(item=>{
    var monthArr=[];
    var yeartotal=0;
    arr.map(citem=>{
      if(citem.year==item){
        yeartotal+=citem.birth;
        if(monthArr.length<=0){
          monthArr.push({month:citem.month,birth:citem.birth});
        }else{
          monthArr.forEach((mitem,index)=>{
            if(mitem.month==citem.month){
              monthArr[index].birth=citem.birth+mitem.birth;
            }else{
              monthArr.push({month:citem.month,birth:citem.birth});
            }
          })
        }
          
      }
    })
    monthArr.forEach(item=>{
      item.precent=(Math.round((item.birth/yeartotal)*100))+'%'
    })
    return {year:item,month:monthArr,yearBirth:yeartotal};
})
// 最终结果
[
    { 
        "year": 2000, 
        "month": [ 
                    { "month": 1, "birth": 420, "precent": "68%" }, 
                    { "month": 10, "birth": 200, "precent": "32%" } 
                 ], 
        "yearBirth": 620 
    },
    { 
        "year": 2010, 
        "month": [ 
                    { "month": 2, "birth": 100, "precent": "100%" }
                 ], 
        "yearBirth": 100 
    },
    .
    .
    .
]
// 使用lodash
const yearsMonths=arr.map(item=>{
      return {year:item.year,month:item.month}
    });
const yearsMonthsUnique=_.uniqWith(yearsMonths,_.isEqual);

let res=yearsMonthsUnique.map(item=>{
    var yeartotal=0;
    var monthTotal=0;
    arr.map(citem=>{
      if(item.year==citem.year){
        yeartotal+=citem.birth;
        if(item.month==citem.month){
          monthTotal+=citem.birth;
        }
      }
    })
    return {year:item.year,month:item.month,yearBirth:yeartotal,monthBirth:monthTotal};
})
res.sort(function(prev,next){
    if(prev.year===next.year){
      return prev.month-next.month;
    }else{
      return prev.year-next.year;
    }
})
// 最终结果(percent 再map一遍即可)
[
    { "year": 2000, "month": 1, "yearBirth": 620, "monthBirth": 420 }
    { "year": 2000, "month": 10, "yearBirth": 620, "monthBirth": 200 }
    { "year": 2004, "month": 1, "yearBirth": 400, "monthBirth": 200 }
    { "year": 2004, "month": 4, "yearBirth": 400, "monthBirth": 200 }
    { "year": 2005, "month": 11, "yearBirth": 400, "monthBirth": 200 }
    { "year": 2005, "month": 12, "yearBirth": 400, "monthBirth": 200 }
    { "year": 2010, "month": 2, "yearBirth": 100, "monthBirth": 100 }
    { "year": 2012, "month": 3, "yearBirth": 200, "monthBirth": 200 }
    { "year": 2013, "month": 10, "yearBirth": 200, "monthBirth": 200 }
    { "year": 2016, "month": 11, "yearBirth": 200, "monthBirth": 200 }
    { "year": 2017, "month": 7, "yearBirth": 200, "monthBirth": 200 }
    { "year": 2018, "month": 8, "yearBirth": 200, "monthBirth": 200 }
    { "year": 2019, "month": 7, "yearBirth": 200, "monthBirth": 200 }
]

说实话,这些数据转换的题有时候是真的烧脑,感觉贼绕

关于闭包

也是一道题:f()=''; f('a')()='a'; f('a')('b')()='ab'; f('a')('b')('c')()='abc'·····实现一个类似这种的函数

function ff(s){
	var str='';
	function f(params){
        if(params){
			str+=params;
            return arguments.callee;
        }else{
            return str;
        }
    }
	return f(s);
}
ff('a')('b')('c')()//'abc'

// 这个主要是考察对闭包的理解

2019-08-23

浏览器的缓存处理

浏览器缓存就是在访问页面或者是发送get请求时,浏览器会记住当前输出的内容,当再次通过相同的URL访问的时候,浏览器会根据缓存机制决定是否使用缓存的副本进行响应。比如你访问某个页面的时候,再次通过相同的URL访问,如果页面的输出内容没有变化,就会使用浏览器缓存的副本。

清除浏览器缓存的一些方法:

1.通过设置meta标签使得每次访问页面的时候都会重新加载页面的内容,而不是使用缓存中的副本

 

2.发送get请求时,通过设置请求头来重新获取响应的数据

$.ajax({
   url:'请求路径',
   dataType:'json',
   type:'get',//默认值即为get
   data:{},
   beforeSend :function(xmlHttp){ 
    xmlHttp.setRequestHeader("If-Modified-Since","0"); 
    xmlHttp.setRequestHeader("Cache-Control","no-cache");
   },
   success:function(response){
     
   }
 });

3.每次发送请求时,url后跟不同的查询参数,当url不一样时,不会使用缓存的副本。例如在请求路径后加随机数,或者是时间戳等。

 

react高阶组件,见过那些高阶组件

高阶组件就是接收一个组件作为参数,最终返回一个组件,即对已有的组件进行扩展或者修改。高阶组件的实现方式主要有两种:1.属性代理,通过修改覆盖接收组件的props对其进行重新的渲染2.反向继承,通过继承接收的组件来对其props,方法进行修改

 redux的connect方法就是一个高阶组件,react-router中也用到了高阶组件

react纯组件和普通组件的区别

 纯组件自己实现了shouldUpdateComponent方法,进行props和state的浅比较,如果没有变化的话不会进行render;

普通组件需要自己手动实现shouldUpdateComponent

react版本区别及对应的生命周期变更

 使用递归和非递归分别实现阶乘

 instanceof相关的用法

 浏览器从输入url到渲染页面发生了什么

 浏览器为什么要阻拦跨域请求

 不使用JSON.stringify()实现将复杂对象转换为字符串

 两个有序数组,实现一个函数,返回两个数组合并后的中位数

 ‘use strict’;

function a(){
    this.x=1;
    console.log(this);
}
function b(fn){
    fn();
}

new a();

a();

b(a);

分别输出什么

 console.log('one');

setTimeout(function(){

    console.log('two');

},0);

Promise.resolve().then(function(){

    console.log('three');

})

console.log('four');

输出顺序是什么?

 

持续更新中。。。。

你可能感兴趣的:(一些web前端面试题的总结)