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

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

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这些题目,就问文章这些题目,就是想知道面试者的基础如何(因为现在的行情,很多人都是注重学习热门的框架,库,工具等,却把基础落下了)。基础好的话,框架不难上手,但是基础不牢,就熟悉两三的框架和一些构建工具,以后技术转型可能会有阻力。现在前端的发展很快,技术很杂,但是基础一直没变。建议大家在学习新技术的同时,不要忘记巩固基础。

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

-------------------------华丽的分割线--------------------
想了解更多,关注关注我的微信公众号:守候书阁

clipboard.png

你可能感兴趣的

16 条评论
五月花开 · 2018年03月28日

您好,谢谢您的分享。有一个小问题:关于对象的深拷贝,通过 JSON.parse(JSON.stringify(obj)) 这样的方式拷贝,当属性值为 null 时,是不会被过滤掉的。

+1 回复

0

改过来了,多谢提醒

守候 作者 · 2018年03月29日
0

这种方式循环引用时,还会报错

莫等闲no1 · 2018年04月09日
0

深拷贝error的event,唔~,一阵酸爽

jack_sirens · 2018年06月26日
Pomelo1213 · 2018年04月09日

for in遍历的对象或者数组的时候会把原型链上的属性也遍历过来的吧?需不需要加上hasOwnProperty来判断?

+1 回复

Alain · 2018年03月28日

事件委托 在父标签接收处理子标签的事件,准确说考的不应该是事件的传递嘛?事件的创建到传递再到处理

回复

0

也有把这个叫事件委托的

莫等闲no1 · 2018年04月09日
leon · 2018年03月28日

第三题的两部分是一样的?

回复

0

函数的声明方式不同

莫等闲no1 · 2018年04月09日
0

不好意思,看得不够仔细

leon · 2018年04月09日
浮生如梦灬 · 2018年04月10日

判断obj是否为对象那个判断 应该是 !obj || typeof obj!== 'object' 吧

回复

0

用范式吧😂 Object.prototype.toString.call(obj).slice(8, -1) === 'Object'

jack_sirens · 2018年06月26日
BerryJiang · 2018年04月13日

基础扎的牢,才能走得远!楼主看的很透!赞一个 关于深拷贝,有篇文章讲的不错,顺道贴上了:https://juejin.im/post/5abb55...

回复

_CRY · 2018年04月14日

一个建议,那个「预解析」应该叫做「提升 hoisting」

回复

fitbye · 2018年04月16日

哎 这些题可能6,7年前就有了,现在还不会就有点说不过去了

回复

这是你的玩具车吗 · 2018年09月05日

function deepClone(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (obj instanceof Boolean) return new Boolean(obj.valueOf());
if (obj instanceof Number) return new Number(obj.valueOf());
if (obj instanceof String) return new String(obj.valueOf());
if (obj instanceof RegExp) return new RegExp(obj.valueOf());
if (obj instanceof Date) return new Date(obj.valueOf());
var cpObj = obj instanceof Array ? [] : {};
for (var key in obj) cpObj[key] = deepClone(obj[key]);
return cpObj;
}

回复

载入中...