自己写的面试题,自己想的答案

大家都知道‘不忘初心,方得始终’,但多少人知道‘初心易得,始终难守’。时代在变化,技术在发展,基础没变。学习新技术的时候,不应把基础落下。

1.前言

因为机缘巧合,让当了无数次面试者的我,当上了面试官,也和几个面试者交流过。既然要应对面试者,我就当然要准备面试题了,好让我大概知道面试者是什么水平。这个时候,也该详解下,自己的写的那些题目。因为题目是我自己写的,并不是网上摘的,所以知识点比较基础,也不全面。如果大家对面试题有什么建议,欢迎指点。

2.考点-面向对象

需求:定义‘我吃火锅

面向过程的思想是:动作(我,吃火锅)

代码实现方面:

//面向过程
let eat=function(who,someThing){
    console.log(`${who}吃${someThing}`);
}
eat('我','火锅');//我吃火锅

使用面向对象的方式改写一下这个实例。

这道题,只希望有一个面向对象的意思在这里就行了,我期待的答案是这样的。

let person={
    name:'守候',
    eat:function(someThing){
        console.log(`${this.name}吃${someThing}`);
    }
}
person.eat('火锅');

更好的方式看下面这篇文章:JavaScript:面试频繁出现的几个易错点。这里不展开讲。

3.考点-预解析

根据以下代码,写出结果

这道题我印象很深刻,因为是我在一年多以前,在Q群看到有人说直自己各种精通的时候,我就出这道题来提问,一抓一个准,至今那些各种精通的人,没一个回答出来的。即使是面试题,也有人掉坑。

之前发布一篇文章的时候,有提及过这个面试题,也被人骂过,大概的意思是:现在都什么年代了,ES都不知道更新多少版本了,谁还这么写代码?看到这个我并没有回应,也没打算和谁对撕。但是我脑子里想到的第一件事就是:以前,新闻有条微博说70%网友赞成数学退出高考,有人谈定回答:数学就是用来淘汰这70%人的。在这里我想说,虽然开发上这样写代码肯定会被批斗,但是面试题,考的不只是开发上遇到的问题,也有考一些基础知识。这道题就是其中之一。而且,现在我也觉得还有必要知道这个知识,还没到全民写 ES6 的时代,抛弃 ES5 的时代。

alert(a)
a();
var a=3;
function a(){
    alert(10)
}   
alert(a)
a=6;
a();  

//------------分割线------------------

alert(a)
a();
var a=3;
var a=function(){
    alert(10)
}   
alert(a)
a=6;
a(); 

这个之前写文章有写过,现在赋值粘贴下。 考点其实就两个,第一变量声明提前,第二函数声明优先于变量声明! 下面我简单分析一下, 第一部分运行结果: 1.函数声明优先于变量声明,所以,刚开始,a就是function a(){alert(10)} ,就会看到这个函数。 2.a(),执行函数,就是出现alert(10) 3.执行了var a=3; 所以alert(a)就是显示3 4.由于a不是一个函数了,所以往下在执行到a()的时候, 报错。 第二部分运行结果: 1.underfind 2.报错 在之前说过,预解析是把带有varfunction关键字的事先声明,但不会赋值。所以一开始是underfind,然后报错是因为执行到a()的时候,a并不是一个函数。

//函数表达式,和变量声明同等
var a=function(){
    alert(10)
} 
//函数声明,优于变量声明    
function a(){
    alert(10)
} 

4.考点-事件委托

一个简单的需求,比如想给ul下面的li加上点击事件,点击哪个li,就显示那个li的innerHTML。这个貌似很简单!代码如下!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul id="ul-test">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </body>
    <script type="text/javascript">
        var oUl=document.getElementById("ul-test");
        var oLi=oUl.getElementsByTagName("li");
        for(var i=0,len=oLi.length;i<len;i++){
            oLi[i].addEventListener("click",function(){
                alert(this.innerHTML)
            })
        }
    </script>
</html>

问题在于: 1.for循环,循环的是li,10个li就循环10次,绑定10次事件,100个就循环了100次,绑定100次事件! 2.如果li不是本来就在页面上的,是未来元素,是页面加载了,再通过js动态加载进来了,上面的写法是无效的,点击li是没有反应的!

应该怎么解决以上问题?

在道题的考点就是事件委托,就是把事件绑在ul上面,之后的li就可以随便添加。代码如下

var oUl=document.getElementById("ul-test");
oUl.addEventListener("click",function(ev){
    var ev=ev||window.event;
    var target=ev.target||ev.srcElement;
    //如果点击的最底层是li元素
    if(target.tagName.toLowerCase()==='li'){
        alert(target.innerHTML)
    }
}) 

但是有些面试者就是从vue的角度回答这个问题--利用v-for进行绑定。虽然我们公司的项目是使用vue,这样说也没错,但是这道题我没提及到vue,说vue的,反而就是一个扣分项了。

5.考点-DOM操作

比如有一个需求,往ul里面添加10个li,如下代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul id="ul-test">
            
        </ul>
    </body>
    <script type="text/javascript">
        var oUl=document.getElementById("ul-test");
        for(var i=0;i<10;i++){
            var oLi=document.createElement('li');
            oLi.innerHTML=i;
            oUl.appendChild(oLi);
        }       
    </script>
</html>

问题:这里相当于操作了10次DOM,有什么方案,减少DOM的操作次数?可写代码简单说明。

这道题,有几个人还是从vue的角度来解决问题(v-for,data),虽然这样不能说错,但是我题目没提及vue的任何东西。考点就是利用innerHTML或者文档碎片的形式。

代码如下

innerHTML

var oUl=document.getElementById("ul-test");
//定义临时变量
var _html='';
for(var i=0;i<10;i++){
    //保存临时变量
    _html+='<li>'+i+'</li>'
}
//添加元素
oUl.innerHTML=_html;

文档碎片-createDocumentFragment

var oUl=document.getElementById("ul-test"),_frag = document.createDocumentFragment();
for(var i=0;i<10;i++){
    var oLi=document.createElement('li');
    oLi.innerHTML=i;
    //把元素添加进文档碎片
    _frag.appendChild(oLi);
}
//把文档碎片添加进元素
oUl.appendChild(_frag);

6.考点-对象深拷贝

写出一个函数,实现对,对象的深拷贝

要求实现一个函数clone。

let obj={
    name:'小明',
    age:24
}
let obj1=clone(obj);

修改obj1,不会影响到obj的值。

这道题,在obj上面,我故意只写一层,对象里面没有嵌套数组或对象,就是想看下面试者能不能往深处想一下。结果面试者都踩坑了。但是可以理解,毕竟大家都是针对题目而论。

基本上回答都是类似下面这样

function clone(object){
    let _obj={}
    for(let key in object){
        _obj[key]=object[key];
    }
    return _obj;
}
let obj1=clone(obj);

//-------------------或者-------------
function clone(obj){
    let _obj=Object.assign({},object);
    return _obj;
}
let obj1=clone(obj);

这个方案,目的是达到了,但是如果obj里面的属性,嵌套着对象或者数组,这个就有问题了。所以理想的解决方案应该是这个。

function clone(object){
    let _obj=JSON.parse(JSON.stringify(obj))
}  

这种方案,如果需要属性值是函数或者是undefined,就会被过滤掉。保险的做法是下面这样。原理也很简单,就是逐个遍历,如果检测到属性值是时引用类型就用当前属性进行遍历。

function clone(obj){    
  if(!obj&& typeof obj!== 'object'){      
    return;    
  }
  var newObj=obj.constructor===Object?{}:[];    
  for(var key in obj){              
    newObj[key] =(obj[key]&&typeof obj[key]==='object')?clone(obj[key]):obj[key];       
  }    
  return newObj; 
}

7.其它考点

其余几道题都是比较笼统的题目,没有唯一的解决方案,这里就不统一回答了!

1.如果设计中使用了非标准的字体,你该如何去实现?

图片,字体图标代替,如果是比较小的英文字体可以使用css3的@font-face。

2.在开发项目上,知道那些优化的方式,提升性能,减少页面加载时间,代码质量,代码可读性等方面

性能优化-压缩代码,懒加载,预加载,合并请求,小图片转换base64编码,资源按需加载等。 代码质量优化-命名有意义,适当的注释,避免巨大函数,避免对象强耦合,代码逻辑清晰等。

3.列举Es6,常用的一些新特性。

参考资料如下: ECMAScript 6 入门 30分钟掌握ES6/ES2015核心内容(上) 30分钟掌握ES6/ES2015核心内容(下) 实例感受-es6的常用语法和优越性 ES6 Promise 用法讲解

4.Div+css排版的时候,从页面渲染和代码可读性的角度,应该注意些什么?

标签语义化,class和id命名有意义并且命名统一规范,css避免深嵌套(3级就得注意),避免@import,!important,和*通配符,避免行内样式,在head引入css等。

参考: 21条CSS高级技巧 css写作建议和性能优化小结

5.说下自己对模块化开发的理解,以及模块化开发的好处。

提高开发效率,有利团队协同开发, 避免全局变量污染,命名冲突, 方便代码的复用维护等。

8.小结

面试题就是这10道,我自己的解决方案也说完了。虽热我们公司的技术栈用的主要是vue,webpack这一些,我面试交流的时候,也会问相关的问题,但是我在面试题里面我不出关于vue,webpack这些题目,就问文章这些题目,就是想知道面试者的基础如何(因为现在的行情,很多人都是注重学习热门的框架,库,工具等,却把基础落下了)。基础好的话,框架不难上手,但是基础不牢,就熟悉两三的框架和一些构建工具,以后技术转型可能会有阻力。现在前端的发展很快,技术很杂,但是基础一直没变。建议大家在学习新技术的同时,不要忘记巩固基础。

最后,如果大家对面试题有什么解法建议或者建议出什么题型,欢迎指点。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏进步博客

[温故知新] Text-level semantics

The em element represents stress emphasis of its contents.

13030
来自专栏HelloCode开发者学习平台

iOS开发-KVC从使用到原理详解(1)

相比往年的iOS招聘,相比之前波涛汹涌,这会已经是相对风平浪静.但是实际上这样的风平浪静只不过是由于无法坚守的iOS 开发者相继退出而已.但是该有的竞争...

9030
来自专栏web前端教室

药不能停之--CSS怎么学怎么记效果好?

image.png CSS这个东西,唉,我也是不知道什么时候就学会了的。想当年根本没有前端,做网页就是table套table的时代,CSS基本上只能一种用法...

22360
来自专栏牛客网

2018春招酷乐家面经分享(前端篇)一面:二面:面试总结:

前言:酷家乐面试前会通知你面试时间,面试后会反馈面试结果,总之,真的挺好的,可惜就是楼主二面没过~~~ 一面: 1.自我介绍 2.说说自己做的前端项目 3.为什...

37080
来自专栏猫哥学前班

第1章:初识编程

写在前面 之前答应过不少朋友今年要写个《猫哥极简编程入门》的系列,帮助各位对编程感兴趣的新人和非程序员,快速掌握一些实用的编程技巧,以便快速入门编程以及应付一些...

35970
来自专栏程序员的诗和远方

20180708_ARTS_week02

Add Two Numbers You are given two non-empty linked lists representing two non-ne...

7510
来自专栏编程微刊

2018年各大互联网前端面试题五(今日头条)

41430
来自专栏程序员的知识天地

谈谈编码与规范

既然是风格,就没有对错。就如现实生活中,我们每个人都有自己的穿着打扮一样。可能有些人打扮土一点,但土就土,并不影响什么。

7010
来自专栏章鱼的慢慢技术路

2017年第八届蓝桥杯C/C++B组省赛题目解析

41050
来自专栏JackieZheng

如何写出好代码

如何写出好代码 这个题目把我自己都看傻了,因为仔细想想,这不是一个命题,是对代码的思考,对细节的推敲和打磨。写好代码是一门学问,还是一种修行。 以前是公众号(...

24150

扫码关注云+社区

领取腾讯云代金券