前端面试题

HTML&CSS

1. CSS常用的选择器有哪些

1. id选择器（ # myid）
   2. 类选择器（.myclassname）
   3. 标签(元素)选择器（div, h1, p）
   4. 相邻选择器（h1 + p）
   5. 子选择器（ul > li）
   6. 后代选择器（li a）
   7. 通配符选择器（ * ）
   8. 属性选择器（a[rel = “external”]）
   9. 伪类选择器（a:hover, li:nth-child）

2. display 有哪些值？说明他们的作用?

3. px 和 em 的区别。

px和em都是长度单位，区别是：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

4. src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

Javascript

5. 请描述一下cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

6. undefined 和 null 区别

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。
null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，和其它语言一样都是代表“空值”，不过 undefined 却是javascript才有的。undefined是在ECMAScript第三版引入的，为了区分空指针对象和未初始化的变量，它是一个预定义的全局变量。没有返回值的函数返回为undefined，没有实参的形参也是undefined。
null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。

7. == 和 ===的区别

==是非严格意义上的相等，值相等就相等
===是严格意义上的相等，会比较两边的数据类型和值大小，值和引用地址都相等才相等

8. JS数组常用方法有哪些

map : 遍历数组，返回回调返回值组成的新数组
forEach : 无法 break ，可以用 try/catch 中 throw new Error 来停止
filter : 过滤
some : 有一项返回 true ，则整体为 true
every : 有一项返回 false ，则整体为 false
join : 通过指定连接符生成字符串
push / pop : 末尾推入和弹出，改变原数组， 返回推入/弹出项
unshift / shift : 头部推入和弹出，改变原数组，返回操作项
sort(fn) / reverse : 排序与反转，改变原数组
concat : 连接数组，不影响原数组， 浅拷贝
slice(start, end) : 返回截断后的新数组，不改变原数组
splice(start,number,value…): 返回删除元素组成的数组，value 为插入项，改变原数组
indexOf / lastIndexOf(value, fromIndex) : 查找数组项，返回对应的下标
reduce / reduceRight(fn(prev, cur) ，defaultPrev) : 两两执行，prev 为上次化简函数的return 值，cur 为当前值(从第二项开始)

9. 原型，原型链，有什么特点？

每个独享都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就是去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平说的原型链的该概念。关系：instance.constuctor.prototype = instance.proto
原型链：当我们需要一属性的时候，JavaScript引擎会先看当前对象是够有这个属性，如果没有的话，就会查找它的prototype独享时候有这个属性，如此递推下去，一直检索到Object内建对象

10. JavaScript如何实现继承

构造函数继承

• 构造继承

通过apply和call方法，将父对象的构造函数绑定在子对象上
构造函数继承的方式可以继承到构造函数上的属性和方法，但是原型prototype下的属性和方法无法继承

• 原型继承

通过改变子函数原型指向继而实现继承父函数下的属性和方法
原型继承可以继承原型上的方法和属性，但构造函数上的属性和方法无法被修改

• 组合继承

通过原型继承加上构造函数继承，完美实现继承的方案

• 拷贝继承

拷贝继承就是把一个对象中的属性或者方法直接复制到另一个对象中
通常构造函数使用组合继承的方式实现继承，是最完美的实现

非构造函数继承

• 浅拷贝
  浅拷贝就是把相当于把一个对象中的内容复制一份给另一个对象，但是这种事是复制复制不完整的，只能复制对象下的方法和属性，对象下的对象的方法和属性无法复制
  

• 深拷贝
  

  深拷贝，就是能够实现真正意义上的数组和对象的拷贝，需要递归调用浅拷贝

11. BOM 对象有哪些

1. window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
2. document 对象，文档对象；
3. location 对象，浏览器当前URL信息；
4. navigator 对象，浏览器本身信息；
5. screen 对象，客户端屏幕信息；
6. history 对象，浏览器访问历史信息；

12. call和.apply的区别是什么？

call方法:
语法：call(thisObj，Object)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
apply方法：
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
对于apply和call两者在作用上是相同的，但两者在参数上有以下区别：
对于第一个参数意义都一样，但对第二个参数：apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。

13. 请描述下事件冒泡机制

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
捕获型事件：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

14. 说说异步编程的实现方式?

回调函数
优点：简单、容易理解
缺点：不利于维护、代码耦合高
事件监听
优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数
缺点：事件驱动型，流程不够清晰
发布/订阅(观察者模式)
类似于事件监听，但是可以通过‘消息中心’，了解现在有多少发布者，多少订阅者
Promise 对象
优点：可以利用 then 方法，进行链式写法；可以书写错误时的回调函数
缺点：编写和理解，相对比较难
Generator 函数
优点：函数体内外的数据交换、错误处理机制
缺点：流程管理不方便
async 函数
优点：内置执行器、更好的语义、更广的适用性、返回的是 Promise、结构清晰
缺点：错误处理机制

Vue

15. vue 中使用了哪些设计模式？

1、工厂模式 - 传入参数即可创建实例
虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode。
2、单例模式 - 整个程序有且仅有一个实例
vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉。
3、发布-订阅模式。（vue 事件机制）
4、观察者模式。（响应式数据原理）
5、装饰器模式（@装饰器的用法）
6、策略模式，策略模式指对象有某个行为，但是在不同的场景中，该行为有不同的实现方案 - 比如选项的合并策略。

16 $route和$router的区别

• $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
• $router是“路由实例”对象包括了路由的跳转方法，钩子函数等

17 vue常用指令

v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-bind 动态绑定 作用： 及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat)
v-show 显示内容 （同angular中的ng-show）
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法
对象型 ‘{red:isred}’
三元型 ‘isred?“red”:“blue”’
数组型 ‘[{red:“isred”},{blue:“isblue”}]’
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出

18 说说你对vue生命周期的理解

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

19 vue组件中data为什么必须是一个函数

因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

20 简述computed和watch的使用场景

• 所有需要用到计算的都应该使用计算属性。多条数据影响一条数据时使用计算属性，使用场景购物车。
  
• 如果是一条数据更改，影响多条数据时，使用watch，使用场景搜索框。