前端面试常问问题

这段时间一直在为找实习工作发愁，奔波了一个多星期，总结了一些我遇到的关于前端的面试题。内容不全，欢迎补充！

js常问题：

1.js基本数据类型
undefined、null、Boolean（布尔）、number（数值）、object（对象）、string（字符串）
还有一种是es6引入的一种新的原始数据类型:symbol，表示独一无二的值。（当然如果你了解熟悉es6可以把这个symbol也说上，不然就是给自己挖坑，本人亲身体会）
2.null和undefined的区别？
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2）调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null表示"没有对象"，即该处不应该有值。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
2.跨域问题
跨域是前后台交互时，一种安全机制，域名或者端口不同都会产生跨域，一般后端解决跨域，前端也可以用代理暂时解决。
3.关于ajax
ajax是前后台交互的数据一种方式，
里面有url：是请求后台的地址，
method是请求方式（get,post,put等）
contentType:请求的格式，主要设置你发送给服务器的格式(application/JSON)
dataType设置你收到服务器数据的格式。一般是json格式
success:请求成功返回的结果
error:请求失败返回的数据
4.Cookie、sessionStorage、localStorage
三者都可以保存数据，比如登录者的信息，cookie和session是服务端发起的。
Cookie:存储在用户本地终端的上的数据。
SessionStorage：针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除。
LocalStorage：没有时间限制的数据存储，第二天、第二周或一年之后数据仍然可用。
5.闭包
闭包:闭包就是能够读取其他函数内部变量的函数，闭包是在一个函数内部的函数。外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象
闭包函数:声明在一个函数中的函数叫做闭包函数。
闭包有三个特性：
1.函数嵌套函数;
2.函数内部可以引用外部的参数和变量;
3.参数和变量不会被垃圾回收机制回收。
闭包就是一个函数的返回值为另外一个函数，在outer外部可以通过这个返回的函数访问outer内的局部变量.

6.暂存死区
暂存死区：在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”
7.浏览器输入网址到展示页面发生了啥 :
输入网址的时候，会根据域名解析，然后找到对应的IP地址和端口，然后根据IP地址和端口找到我们对应的请求网站资源，之后会返回到客户端，客户端会根据返回的数据然后进行渲染页面，前台会根据代码从上到下解析然后把后端返回的数据渲染到页面上展示出来
8. 添加 删除 替换 插入到某个接点的方法
1）创建新节点
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
10. ajax请求的时候get 和post方式的区别
get安全性低，对输入的url地址长度有很大限制，不能很长
post相反，post一般用于提交表单操作，get用于加载页面

vue常问题：

1.vue父组件向子组件传递数据？
答：通过props
2.子组件像父组件传递事件？
答：$emit方法
3.说出几种vue当中的指令和它的用法？
答：v-model双向数据绑定；
v-for循环；
v-if v-show 显示与隐藏；
v-on事件；v-once: 只绑定一次。
4.Vue中双向数据绑定是如何实现的？
答：vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。
5.vue常用的修饰符
答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次。
6.vue的生命周期概述
答：beforeCreate：在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
7.vue-router 是什么?它有哪些组件
答：vue用来写路由一个插件。router-link、router-view
8.active-class 是哪个组件的属性？
答：vue-router模块的router-link组件。children数组来定义子路由
9.怎么定义 vue-router 的动态路由? 怎么获取传过来的值？
答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id。
10.vue-router 有哪几种导航钩子?
答：三种，
第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子
第三种：单独路由独享组件

vuex常问题

1.vuex是什么？怎么使用？哪种功能场景使用它？
答：vue框架中状态管理。在main.js引入store，注入。
新建了一个目录store.js，…… export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
2.vuex有哪几种属性？（mutations和actions有什么区别）
答：有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
答：如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用

css常问题

1.position 关于定位？
absolute 生成绝对定位元素，相对与值部位static的第一个父元素进行定位
fixed 生成绝对的元素，相对于浏览器窗口进行定位
relative 生成相对定位的元素，相对于其正常位置进行定位
static 默认值。没有定位，元素出现在正常出现的流中
inherit 规定从父元素继承position属性的值
2.margin和padding分别适合什么场景使用？
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin是用来布局分开元素，使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容与元素之间有一段间距

3.什么是伪类，什么是伪元素，他们的区别？
伪类的受体是文档树中已有的元素，而伪元素则创建了一个DOM外的元素
伪类用于添加元素的特殊效果，而伪元素则是添加元素的内容
伪类使用的一个冒号，为元素使用两个冒号
伪类更常用一些简单的动画或者交互的样式，例如滑入滑出，而为伪元素更常用语字体图标，清除浮动等
4.怎么实现元素垂直水平居中？（两种常用的）
(1)

text-alian:center;
line-height:父元素的高

(2).利用弹性布局实现，在父容器添加 ：display:flex;align-items:center;

es6常问题

1.ES6新增的一些特性：

1）let声明变量和const声明常量，两个都有块级作用域
　ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明
2）箭头函数
　ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义
　3）模板字符串
　模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串
　4）解构赋值
　ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
　5）for of循环
　for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串
　6）import、export导入导出
　ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用
　7）set数据结构
　Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数
　8）… 展开运算符
　可以将数组或对象里面的值展开；还可以将多个值收集为一个变量
　9）修饰器 @
　decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数
　10）class 类的继承
　ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念
　11）async、await
　使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性
　async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成
　12）promise
　Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大
　13）Symbol
　Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的
　14）Proxy代理
　使用代理（Proxy）监听对象的操作，然后可以做一些相应事情
2、Var let const区别
变量提升：就是将js中的变量或者函数提高到作用域的最顶部。
一、var声明的变量会挂载在window上，而let和const声明的变量不会：
二、var声明变量存在变量提升，let和const不存在变量提升
三、let和const声明形成块作用域
四、同一作用域下let和const不能声明同名变量，而var可以

最后：牢记一点，不要把面试官引导到你不擅长的问题上面，避免给自己挖坑，希望你们都能找到满意的工作，加油！！