2019最新版前端面试题

这些是我从网站上收集的一些大佬的面试题，用自己所理解的知识和网络搜的整合起来，如果有不同见解，欢迎留言讨论

· 跨域的方式（ JSOP 和 CORS ）还有其他的吗

常用的还有window.name和nginx反向代理
Window.name:
当在浏览器中打开一个页面，或者在页面中添加一个iframe时即会创建一个对应的window对象，当页面加载另一个新的页面时，window的name属性是不会变的。这样就可以利用在页面动态添加一个iframe然后src加载数据页面，在数据页面将需要的数据赋值给window.name
nginx反向代理
nginx支持配置反向代理，通过反向代理实现网站的负载均衡
一般最安全的是WINDOW.NAME，因为iframe会销毁

· 你觉得 vue 有哪些特点

a、响应式，可以实现数据和视图层的双向绑定。即逻辑层数据发生变化时，绑定在视图层的数据也会随之发生变化。
b、组件化、模块化。将大片代码拆解为若干个小的代码片段（模块），这样的代码重用性高、可读性强、更便于管理。
c、单个文件组件化，即将结构、样式、逻辑同一文件内。
·

用过 git 是吧，在项目怎么用 git 知道吗

安装完成之后
1.先进行初始化 $gitinit2.$git add. 添加文件到暂存区
3.$gitstatus查看工作区文件状态4.$git commit -m 文件添加到版本库
5.$git log 查看提交信息
6.下载远程仓库数据git pull 仓库地址 master
7.提交到远程仓库git push 仓库地址 master

TCP 和 UDP 的区别

TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议，是专门为了在不可靠的网络中提供一个可靠的端对端字节流而设计的，面向字节流。
UDP（用户数据报协议）是iso参考模型中一种无连接的传输层协议，提供简单不可靠的非连接传输层服务，面向报文
区别：
1） TCP是面向连接的，可靠性高；UDP是基于非连接的，可靠性低
2） 由于TCP是连接的通信，需要有三次握手、重新确认等连接过程，会有延时，实时性差，同时过程复杂，也使其易于攻击；UDP没有建立连接的过程，因而实时性较强，也稍安全
3） 在传输相同大小的数据时，TCP首部开销20字节；UDP首部开销8字节，TCP报头比UDP复杂，故实际包含的用户数据较少。TCP在IP协议的基础上添加了序号机制、确认机制、超时重传机制等，保证了传输的可靠性，不会出现丢包或乱序，而UDP有丢包，故TCP开销大，UDP开销较小
4） 每条TCP连接只能时点到点的；UDP支持一对一、一对多、多对一、多对多的交互通信

前端性能优化

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

·

对闭包的理解，以及哪些地方用过闭包，以及闭包的缺点

什么是闭包：闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)
特点：*可以读取函数内部的变量

• 让这些变量的值始终保持在内存中。
• 增加块级作用域

· 对跨域了解吗，jsonp 的限制

跨域访问就是跨域名访问，即A网站的网页在代码上访问了B网站的页面
由于同源策略（浏览器的安全机制），所以，AJAX不能实现跨域访问。
Jsonp的限制：1、jsonp没有使用XMLHttpRequest对象。
2、jsonp只是在一种跨域的技巧。
3、jsonp只支持Get方式

position 属性有哪些值，分别什么含义

absolute 生成绝对定位的元素，相对于第一个父元素进行定位。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位
inherit 规定应该从父元素继承 position 属性的值。

· ES6 用到过吗，新增了哪些东西，你用到过什么

Let、const 用来声明变量,它的用法类似于var，但是所声明的变量，只在命令所在的代码块内有效,并且没有变量提升
使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明
使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值.就相当于声明了一个常量，其值不能更改
This this指向的是当前函数的作用域(对象实例)
Bind (this重新指代的对象): 只能为匿名函数服务
JSON.parse/JSON.stringify JSON字符串和对象直接的转换: //必须要严格的json对象
箭头函数 针对匿名函数
解构赋值:解析结构进行赋值 可以一次性定义很多个变量，使用[] 可以让一个函数返回多个值
可以实现两个数的交换

· const 和 let 区别，可以改变 const 定义的某个对象的属性吗

使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明
使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值.就相当于声明了一个常量，其值不能更改
不能更改

· 箭头函数，箭头函数的特点

箭头函数会捕获其所在上下文的this值，作为自己的this值，在使用call/apply绑定时，相当于只是传入了参数，对this没有影响
箭头函数不能作为构造函数，和 new 一起用就会抛出错误
箭头函数没有原型属性
箭头函数不能换行
不能简单返回对象字面量，如果要返回对象字面量,用括号包裹字面量

Cookie的特点:

（1）cookie可能被禁用。
（2）cookie是与浏览器相关的。不同浏览器所保存的cookie也是不能互相访问的。
（3）cookie可能被用户删除。
（4）cookie安全性不够高。如果要保存用户名密码等信息时，最好事先经过加密处理。
（5）存储的数据量 4k 大小，cookie只支持存储string类型的数据。
（6）简单易用。
（7）信息存储于用户硬盘，因此可以作为全局变量。

· cookie 有哪些限制

所创建Cookie的NAME不能和Set-Cookie或者Set-Cookie2的属性项值一样，如果一样会抛出IllegalArgumentException异常。
所创建Cookie的NAME和VALUE的值不能设置成非ASSIC字符，如果要使用中文，可以通过URLEncoder将其编码，否则会抛出IllegalArgumentException异常。
当NAME和VALUE的值出现一些TOKEN字符（如“\”、“,”）时，构建返回头会将该Cookie的Version自动设置为1。
当在该Cookie的属性项中出现Version为1的属性项时，构建HTTP响应头同样会将Version设置为1。
防止“<”等特殊字符，防止注入js
敏感信息需要加密
单个cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个cookie

· 除了 cookie 还有那些东西辨别用户身份的

sessionStorage 会话级存储将数据保存在session对象中，当关闭浏览器后，这些数据就被删除
localStorage 没有时间限制的数据存储方式，可以将数据永久保存在客户端。

· 事件机制

当某个事件执行时，从子元素向父元素触发 或 从父元素向子元素触发 称为事件流
事件流的两种模式：
事件冒泡：从子元素向父元素触发 —>当某个事件触发时，同样的事件会向父元素触发。
但并不是所有事件都会产生冒泡问题 onfocus onblur onload不会产生冒泡问题
事件捕获：从父元素向子元素触发
阻止事件冒泡：e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;
阻止浏览器默认事件：e.preventDefault?e.preventDefault():e.returnValue = false;简易写法（return false）

· settimeout 的机制

将指定的代码移出本次执行，等到下一轮事件循环时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果没到，就等到再下一轮事件循环时重新判断。这意味着，setTimeout 指定的代码，必须等到本次执行的所有代码都执行完，才会执行。

了解 MVVM 吗，和 MVC 的区别

MVVM分为三个部分：分别是M（Model，模型层，主要负责业务数据相关），V（View，视图层，负责视图相关，细分下来就是html+css层；），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器MVC的C层，负责监听M或者V的修改，是实现MVVM双向绑定的要点）
区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter来进行的.MVC可以在view中直接使用model的数据

· 对象和类的区别，举个现实中的例子

类:是具有相同属性和行为的对象的集合（模板）
对象:根据类的属性和行为创建的实例化。
例子： 人是类，张三，李四属于对象

· 你理解的面向对象

面向对象是将功能通过对象来实现，将功能封装进对象之中，让对象去实现具体的细节
降低了耦合，提高了程序维护性！

· 说一下原型链吧

让子对象的原型指向父对象的实例，父对象的原型指向爷爷对象的实例，依次类推，就形成了原型链

· 闭包的原理

所谓“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标 对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目 标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，但只会生成新对象和方法，新的临时变量只是对应新 的值，和上次那次调用的是各自独立的。

css 响应式布局

响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构，行为，表现的设计方式。
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，页面头部必须有meta声明
1.外联式媒体查询

2.内嵌式媒体样式（常用） @media screen and (min-width:640px) and (max-width:960px){ body{ background:red; } }

· 简述一下 node

Node.js是一个基于Chrome V8引擎(编译成原生机器码)的让JavaScript运行在服务器端的运行环境，它让JavaScript的触角伸到了服务器端。
Node有三大特性：
单线程 NodeJS不会为每个连接客户创造一个新的线程,仅用一个线程
非阻塞IO NodeJS在访问高IO操作后不会等待其完成，而是立即去执行其他代码，操作完成后会使用回调函数返回保证高效的利用当前线程的cpu 不造成硬件浪费
事件驱动 通过事件来驱动整个程序的进行 由于是单线程，所以把高io的操作 就会移动到事件队列中等待完成，完成后通过回调函数的方式返回给线程来进行处理。这个循环处理的过程称之为：事件环
优点：减少代码重复，提高利用率划分功能，方便管理方便使用第三方模块

· ES6 新增的 set() 和 map() 有什么区别

map和set一样是关联式容器，它们的底层容器都是RBTree，区别就在于map的值不作为键，键和值是分开的。

· 说一下快排的原理

每次排序的时候设置一个基准点，将小于等于基准点的数全部放到基准点的左边，将大于等于基准点的数全部放到基准点的右边，如此循环，直至左边或者有点的数只剩一个

· js 数组有哪些方法

尾插Push(), 尾删pop() , 头插unshift(), 头删shift() , 返回一个由删除元素组成的新数组splice(), join(char), 获取数组的区间slice(start,end), 拼接数组concat,数组逆序排序reverse(), 数组顺序排序sort():

· 哪些会改变原数组

尾插Push(), 尾删pop() , 头插unshift(), 头删shift() ,splice()

· every 和 some 的区别

every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。

深拷贝和浅拷贝

简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，如果B没变，那就是深拷贝
浅拷贝：传参时值只传递了引用空间的地址
深拷贝：开辟空间，且赋值

· 继承，原型链继承怎么实现

JS里的继承主要依靠是的原型链。让原型对象（每一个构造函数都有一个原型对象）的值，等于另一个类型的实例，即实现了继承；另外一个类型的原型再指向第三个类型的实例，以此类推，也就形成了一个原型链

· 箭头函数和之前的区别，

箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向
普通函数的this指向调用它的那个对象
箭头函数作为匿名函数,是不能作为构造函数的,不能使用new,没有原型属性，不能换行

讲一下 webpack，有什么作用

Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。
性能优化 模块化，可以把复杂的程序细化为小的文件
减少浏览器像服务器的请求次数
节约服务器的带宽资源

· AMD 和 commonjs 怎么使用，怎么配置，有哪些好处

Nodejs的模块系统就采用CommonJS模式。CommonJS标准规定，一个单独的文件就是一个模块，模块内将需要对外暴露的变量放到exports对象里，可以是任意对象，函数，数组等，未放到exports对象里的都是私有的。用require方法加载模块，即读取模块文件获得exports对象。

AMD：AMD（Asynchronous Module Definition）异步加载模块。AMD标准规定，用define来定义模块，用require来加载模块：
define(id, [depends], factory);
require([module], callback);

spa 了解吗，

1、single-page application是一种特殊的Web应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示和隐藏），从而实现UI与用户的交互。
2、简单来说SPA的网页只有一个页面，而这个网页的实际方式要能够回应使用者所使用的各种装置并且赋值使用者在电脑上使用软件的体验，让使用者可以更容易和有效的使用网站。按照正常情况下，我们会在一个页面中链接到其他的很多个页面，进行页面的跳转，但是如果使用单页面应用的话，我们始终在一个页面中，通常使用a标签的描点来实现。
优点：便于开发，使用户体验更好，
缺点：以SPA方式开发的网站不容易管理也不够安全，不利于seo优化

· 函数防抖和函数节流

函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。简单的说，当一个动作连续触发，则只执行最后一次
应用场景：搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
原理：函数防抖在执行目标方法时，会等待一段时间。当又执行相同方法时，若前一个定时任务未执行完，则 clear 掉定时任务，重新定时。
函数节流，限制一个函数在一定时间内只能执行一次
应用场景：滚动加载，加载更多或滚到底部监听，谷歌搜索框，搜索联想功能，高频点击提交，表单重复提交
原理：通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。

· 前端路由的实现了解吗

路由就是根据对不同的请求，找到不同的代码完成处理
Vue中路由配置
1.先下载 npm install --save vue-router
2.定义 (路由) 组件 var tema={template:"#tema"};
3.使用template模板进行路由板块封装
4.定义路由规则 var routes=[ {name:“tema”,path:"/index",component:tema}]
5.定义路由对象实例化 const router = new VueRouter({routes:routes})
6.路由实例绑定 new Vue({ el:"#box", router:router,methods:{} })
7…设置路由显示 路由出口
8.路由连接跳转 index