2019前端面试宝典

JavaScript部分

1、闭包（★★★★★★）

定义：
定义在一个函数内部的函数（能够读取其他函数【外部函数】内部变量的函数）。

优点：
为在函数外部访问函数内部局部变量提供了一个入口。

缺点：
（1）闭包使函数内部的局部变量一直保存在内存中，滥用闭包可能因此影响网页性能（故解决办法为：退出函数前将不使用的局部变量进行删除）；
（2）闭包可以改变函数内部局部变量的值，因此当外部函数做为对象使用，闭包作为其公有方法，内部变量为私有属性，故要注意不可随便改变外部函数内部变量的值。

详细讲解请阅读文章《闭包两三事》：https://blog.csdn.net/chaopingyao/article/details/103402009

2、js的继承方式（★★）

js中的继承方式有6种，分别为：
（1）原型链继承；
（2）借用构造函数继承；
（3）组合继承（组合原型链继承和借用构造函数继承）（常用）；
（4）原型式继承；
（5）寄生式继承；
（6）寄生组合式继承（常用）。

详细讲解请阅读文章《js中的继承》：https://blog.csdn.net/chaopingyao/article/details/103402109

3、this关键字的指代（★）

this通常指代当前执行代码的环境对象。

详细讲解请阅读文章《js中的this详解》：https://blog.csdn.net/chaopingyao/article/details/103416919

4、原型机制？（★★）

Object.prototype是所有对象的根；
Function.prototype是所有构造器的根（除Object外）；
对象可以通过.proto属性来访问其构造函数的原型prototype；constructor属性是指向构造函数的指针。

详细讲解请阅读文章《javaScript的原型机制》：https://blog.csdn.net/chaopingyao/article/details/104631570

5、js的作用域及变量提升（★★）

作用域：即产生作用的区域。
作用域在ES5中分为全局变量和局部变量，ES6中新增了跨级作用域。

变量声明：是在任意代码执行前处理的，在代码区中任意地方声明变量和在最开始（即变量对应的作用域范围的初始位置）的地方申明是一样的。也就是说，看起来一个变量可以在申明之前被使用！这种行为就是所谓的“hoisting”，也就是变量提升，看起来就像变量的声明被自动移动到了函数或全局代码的最顶上。

详细讲解请阅读文章《js作用域以及变量提升》：https://blog.csdn.net/chaopingyao/article/details/104499944

6、页面加载渲染的顺序？如何优化？（★★★★★）；

页面加载和渲染的顺序均为从上到下，且同时进行；

优化方法：
（1）页面减肥：用html tidy对页面进行压缩，对于不用的空格、注释进行删除；
（2）减少请求次数：利用缓存技术，尽量减少请求的次数；
（3）引用外部css与js文件：将css与js代码从HTML页面中分离，并且将css放于文件头部，js文件放于尾部；
（4）文件合并：将多个js以及css文件分别进行合并，以减少请求次数；
（5）将内容分块：不使用嵌套的table，使用div代替或者用非嵌套的table；
（6）指定大小：对于table指定大小，对image标签指定width和height；
（7）优化页面加载顺序：首先加载页面最初显示的内容和与之相关的JavaScript和CSS，然后加载DHTML相关的东西，非最初显示相关的图片、flash、视频等较大的资源可以延时加载。

详细讲解请阅读文章《浏览器加载、渲染以及优化页面的顺序和方法》：https://blog.csdn.net/chaopingyao/article/details/103777294

7、js变量的命名规则（★）；

（1）变量概念：

内存中的数据存储空间，该空间中保存的数据可以随着运算的进行发生改变。

（2）变量三要素：

a、变量名
b、变量值
c、数据类型

（3）变量的特点：

JS是弱（动态）类型的语言，不关心变量创建时的数据类型，是在运行时才能确定变量的数据类型。

（4）JS变量的命名规则：

能够包含的字符：字母、数字、 _ 、 $
不能以数字开头
不能是关键字或保留字（关于JS的关键字和保留字介绍请看：JavaScript的关键字与保留字介绍）
严格区分字母大小写

（5）JS的命名规范：

取简洁的英文单词作为变量名，见名知意。
有多个单词时，第一个单词首字母小写，其他单词首字母大写（驼峰法）。

8、ES6的class用ES5如何实现（★★）；

用ES6的class实现ES5的时候，可以将ES5的构造函数封装于ES6的类中，作为类的构造方法。如下所示：
案例一

//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）
function Person(name,age) {
    this.name = name;
    this.age=age;
}
Person.prototype.say = function(){
    return "我的名字叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("laotie",88);//通过构造函数创建对象，必须使用new 运算符
console.log(obj.say());//我的名字叫laotie今年88岁了

案例二

class Person{//定义了一个名字为Person的类
    constructor(name,age){//constructor是一个构造方法，用来接收参数
        this.name = name;//this代表的是实例对象
        this.age=age;
    }
    say(){//这是一个类的方法，注意千万不要加上function
        return "我的名字叫" + this.name+"今年"+this.age+"岁了";
    }
}
var obj=new Person("laotie",88);
console.log(obj.say());//我的名字叫laotie今年88岁了

其中，案例二是将案例一用class类的方式实现的。

注意事项：
1.在类中声明方法的时候，千万不要给该方法加上function关键字；
2.方法之间不要用逗号分隔，否则会报错。

详细讲解请阅读文章《ES5中的构造函数与ES6中的类class》：https://blog.csdn.net/chaopingyao/article/details/104647786

9、跨域（★★）

10、数据类型的判断？原型的判断？（★★★）

js判断类型的方法有四种，分别为typeof、instanceof、constructor以及Object.prototype.toString.call()方法。
（1）typeof方法的特点：可以区分原始数据类型（数字Number、字符串String、布尔Boolean、未定义Undefined）和引用类型（即对象类型Object和函数Function），但不能区分对象中具体的数据类型，即对于数组Array、空Null、日期Date、正则RegExp类型返回的都是"object"。

（2）instanceof方法的用法：其使用方法为 a instanceof b，其中a表示一个对象实例，b为对象类名或者构造函数（即b是数据类型）。instanceof方法用于判断一个对象是否是数据类型的实例，是则返回true，否则返回false，结果为布尔值。其特点是可以正确判断引用类型的数据类型，但是对于原始数据类型无法正确判断。

（3）constructor方法的用法：其使用方法为 (a).constructor === B， 其中a可以是原始类型也可以是引用类型，B是具体的数据类型（Number、String、Boolean、Function、Object、Array等）。其特点是：对于一个要判断数据类型的对象来说（不区分原始类型或者引用类型），需要先用typeof方法判断其属于引用类型还是原始类型，是对象的话可以进一步确认其具体的数据类型，结果为布尔值。缺点是constructor属性可以被人为修改，安全性不高，并且不能判断null和undefined类型。

（4）Object.prototype.toString.call()的用法：其使用方法为Object.prototype.toString.call(a)；其中a可以为原始类型也可以是引用类型，返回结果为[object XXX]，XXX即为a所对应的具体的数据类型。Object.prototype.toString.call()适用于所有的数据类型的精确判断。

详细讲解请阅读文章《js中判断数据类型方法总结》：https://blog.csdn.net/chaopingyao/article/details/104626369

12、哪些情况下可能出现内存泄漏？（★★★）

内存泄漏是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。即指由于疏忽或错误造成程序未能释放已经不再使用的内存。

造成内存泄漏的原因可能有：全局变量、闭包、定时器。

详细讲解请阅读文章《常见的JavaScript内存泄露原因及解决方案》：https://blog.csdn.net/chaopingyao/article/details/104796336

13、map；（★★★）

map()方法定义在JavaScript的Array中，它返回一个新的数组，新返回数组中的每个元素为原始数组的每一个元素分别调用map中的回调函数处理后的值。

详细讲解请阅读文章《js中map的使用方法》：https://blog.csdn.net/chaopingyao/article/details/104529963

14、三个div层层嵌套，如何获取其直接子孙？（提示“>”）（★）

15、数组去重用的方法（★★）；

1、双循环去重
2、indexOf去重
3、相邻元素去重
4、对象属性去重(推荐，因为只需要遍历一遍)

16、怎样创建js对象？（★★）

17、如何对数字数组进行排序？（★）

js中经常需要用到对数组进行排序的操作，当数组中的元素均为数字时，直接使用sort()进行排序得到的结果可能不是你想要的结果。假如我有数组arrayNums=[15,2,16]，直接使用arrayNums.sort()的排序结果如案例一所示：

这是因为Javascript 的sort()函数在默认情况下是按照字符串顺序对值进行排序的。故sort() 方法在对数值排序时会产生不正确的结果。 所以我们可以通过一个比值函数来修正此问题，如下：

var arrayNums=[15,2,16];
arrayNums.sort((a, b) => a - b);

比较函数的目的是定义另一种排序顺序。其会返回一个负、零或正值，这取决于参数。

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

原文链接：https://blog.csdn.net/Luyanc/article/details/93169195

19、h5的新特性；（★）

20、ssr服务器渲染；（★）

21、手机端开发；（★）

22、自动执行函数、参数传递（★）；

23、overFlow设置为scroll之后，不管是否超出页面显示，都会出现滚动条？（★）

（这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。）

24、call和apply的区别（★★★）

call()与apply()的异同点如下：
相同点：
（1）均是预定义的javaScript方法；
（2）均能够实现将一个对象的方法用于另一个对象；
（3）均可以在使用的时候传递参数。
不同点：
（1）call()方法在传递参数的时候只接受分别传参（也即单个传参），apply()方法在传递参数时仅接受数组传参。
（2）在 JavaScript 严格模式下，如果 apply() 方法的第一个参数不是对象，则它将成为被调用函数的所有者（对象）在“非严格”模式下，它成为全局对象（对这一点不是很明白）。

详细讲解请阅读文章《js中的call()与apply()的应用》：https://blog.csdn.net/chaopingyao/article/details/103405010

25、一个ul下边包含200-300个li，如何给他们修改属性或者修改内容（★）；

26、回调函数的多重调用（★）；

27、如何对数字数组进行排序？（★）

28、两个大整数相加（★）；

29、写出观察者模式的应用实例（★）；

30、一个给定字符串是否包含连续的字符（A_Z|a-z）,包含返回true，否则返回false（★）；

31、i++ 、++i、i+ +1的考察（★）；

css部分

1、盒模型；（华为）

2、盒子的内容居中显示；（华为）

3、常用布局；（华为）

4、css选择器有哪几种；选择器的权重？（华为）

5、css3样式实现hover从左边到右边、旋转灯操作；（华为）

6、页面分三块（左、中、右），左和右设置了宽度，中间的要自适应宽度，如何实现？（华为）

7、ie和谷歌的区别；（华为）

vue部分

1、监听变量变化的：on，watch；（华为）

2、路由传参；（华为）

3、vue常用指令及作用（★★★★★）

（1）v-show：决定是否显示一个元素（类似于css的display属性，不管什么情况下，都会在dom树上创建元素，每次只是修改其隐藏与显示的属性值。多用于频繁操作dom时）
（2）v-if：决定是否显示一个元素（每次都需要在dom树上重建或者删除元素，多用于对页面加载速度要求比较高的情况下，当if的条件为假时，不会在dom上上创建元素）
（3）v-for：循环
（4）v-bind：绑定任何一个属性，可以简写为冒号：
（5）v-module：实现数据的双向绑定
（6）v-on：监听
（7）v-else：判断分支指令

4、v-show和v-if的区别；（华为）

相同点：

v-show和v-if都能控制元素的显示和隐藏。

不同点：

v-show本质就是通过设置css中的display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素

总结：

如果要频繁切换某节点时，使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大）；
如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）

详细讲解请阅读文章《vue中v-show和v-if的异同》：https://blog.csdn.net/chaopingyao/article/details/104799316

5、vue的生命周期；（★★）

6、vuex的介绍；（★★★）

Vuex是一个专门为vue.js设计的集中式状态管理模式，用来管理Vue的所有组件状态。也可以认为Vuex就是vue为了方便数据的操作而建立的一个“前端数据库”。vuex中包含5个不同的状态，分别是state（数据库）、getter（从数据库中获取数据）、mutation（修改获取到的数据并保存）、action（提交mutation保存的数据）、modules（项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理）。

vuex的优点

1、解决了非父子组件的消息传递（将数据存放在state中）；
2、减少了AJAX请求次数，有些情景可以直接从内存中的state获取。

vuex的缺点

1、刷新浏览器，vuex中的state会重新变为初始状态；
2、非大型应用不建议使用vuex（会显得繁琐），一般推荐使用store或者HTML5特有的属性（localStroage和sessionStroage）作为数据之间的传递就可以解决了。

详细讲解请阅读文章《vue中v-show和v-if的异同》：https://blog.csdn.net/chaopingyao/article/details/104799316

8、一般用到的打包工具？用webpack做性能优化？（传音控股-招商银行）；

9、对keep-alive 的了解？

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 在vue 2.1.0版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 该组件是否缓存取决于include和exclude属性 -->
</component>
</keep-alive>

参数解释

include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。

使用示例

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
<component></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
<component></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
<component></component>
</keep-alive>

网络基础知识

1、udp和tcp的区别？ip的作用？（★）

2、http是干啥的？http的状态码都有哪些？304表示什么？（★）

3、浏览器的缓存（★）

其他

1、自我介绍（★★）

201x年x月开始在XX公司工作，工作主要是负责xx的开发，主要用到xx技术，自己平时额外了解了xx知识，以上就是自我介绍部分。

2、技术栈（★★★）；

js、HTML、css、html5、css3、vue、jQuery