一轮：前端面试题

1、常用的数据类型：基本数据类型和引用数据类型。

基本数据类型： 

undefined

、

null

、Boolean、String、Number

引用数据类型：对象、数组、函数

2、Es6新特性：

1、let和const

2、变量的解构赋值

3、数组的扩展 

      Array.from：将类数组转换成一个真正的数组；

      Array.of：将一组数转换成数组；

      剩余运算符 ...

      扩展运算符：经常用于数组的合并，对象的合并 ary1.concat(ary2)

4、对象的扩展

      Object.assign(tar1, tar2)

5、for...of...

6、箭头函数

3、 闭包

闭包的特性：

   1、函数内再嵌套函数

   2、内部函数可以引用外层的参数和变量

   3、参数和变量不会被垃圾回收机制回收

说说你对闭包的理解

   使用闭包主要是为了设计私有的方法和变量。

   闭包的优点是可以避免全局变量的污染，

   闭包的缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

   在js中，函数即闭包，只有函数才会产生作用域的概念

闭包 的最大用处有两个：一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中

                                        闭包的另一个用处，是封装对象的私有属性和私有方法

使用闭包的注意点：

• 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露
• 解决方法是，在退出函数之前，将不使用的局部变量全部删除

总结：

       好处：能够实现封装和缓存等；

       坏处：就是消耗内存、不正当使用会造成内存溢出的问题

4、利用原生js怎样绑定事件

（一）在DOM中直接绑定事件

我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup 

、ondblclick、onkeydown、onkeypress、onkeyup等。

<input type="button" value="click me" onclick="pin()">

<script>
function pin(){
    alert("hello world!");
}
</script>
           

（二）在JavaScript代码中绑定事件

 将一个函数赋值给一个事件处理程序属性，在元素的作用域中运行，程序中的this引用当前元素

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert(this.id); //"myBtn"
}
           

 (三)使用事件监听绑定事件

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

5、怎样利用js获取元素

JS获取DOM元素的方法（8种）

• 通过ID获取（getElementById）
• 通过name属性（getElementsByName）
• 通过标签名（getElementsByTagName）
• 通过类名（getElementsByClassName）
• 通过选择器获取一个元素（querySelector）
• 通过选择器获取一组元素（querySelectorAll）
• 获取html的方法（document.documentElement）

  document.documentElement

  是专门获取html这个标签的
• 获取body的方法（document.body）

  document.body

  是专门获取body这个标签的。

6、 promise的理解

promise是一个异步编程的一种解决方案，ES6规定promise对象是一个构造函数，用来生成Promise实例。

Promise构造函数接受一个函数作为参数，这个函数的参数同样也有两个参数： resolve和 reject，这两个参数也是函数

resolve执行后返回promise的成功状态，

reject执行后返回promise的错误状态

10、TCP和UDP 

1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接

2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付

Tcp通过校验和，重传控制，序号标识，滑动窗口、确认应答实现可靠传输。如丢包时的重发控制，还可以对次序乱掉的分包进行顺序控制。

3、UDP具有较好的实时性，工作效率比TCP高，适用于对高速传输和实时性有较高的通信或广播通信。

4.每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信

5、TCP对系统资源要求较多，UDP对系统资源要求较少。

简单总结：

• TCP 是面向连接的，UDP 是面向无连接的
• UDP程序结构较简单
• TCP 是面向字节流的，UDP 是基于数据报的
• TCP 保证数据正确性，UDP 可能丢包
• TCP 保证数据顺序，UDP 不保证

11、Axios 

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装

它本身具有以下特征：

     a.从浏览器中创建 XMLHttpRequest

     b.从 node.js 发出 http 请求

     c.支持 Promise API

     e.拦截请求和响应

     f.转换请求和响应数据

    g.取消请求

    h.自动转换JSON数据

    i.客户端支持防止 CSRF/XSRF

关于拦截器：在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
           

 12、常用的异步请求方法

- 回调函数
- 订阅和发布模式
- Promise
- generator
- async/await
           

13、虚拟DOM的理解

Virual DOM是用JS对象记录一个dom节点的副本。是用javascript对象表示的，和真正的DOM有一层映射关系，当dom发生更改时候，先用虚拟dom进行diff，算出最小差异，然后再修改真实dom。

虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。

简单地说：

1. 根据虚拟dom树最初渲染成真实dom
2. 当数据变化，或者说是页面需要重新渲染的时候，会重新生成一个新的完整的虚拟dom
3. 拿新的虚拟dom来和旧的虚拟dom做对比（使用diff算法）。得到需要更新的地方之后，更新内容。这样就能大量减少真实dom的操作,提高性能。

14、vue数据双向绑定的原理： 

vue

实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 

Object.defineProperty()

 来劫持各个属性的

setter

，

getter

，在数据变动时发布消息给订阅者，触发相应监听回调。

15 、vue的生命周期

钩子函数	触发的行为	在此阶段可以做的事情
beforeCreadted	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。	加loading事件
created	vue实例的数据对象data有了，$el还没有	结束loading、请求数据为mounted渲染做准备
beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。
mounted	vue实例挂载完成，data.filter成功渲染	配合路由钩子使用
beforeUpdate	data更新时触发
updated	data更新时触发	数据更新时，做一些处理（此处也可以用watch进行观测）
beforeDestroy	组件销毁时触发
destroyed	组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在	组件销毁时进行提示

16、vue中父子组件之间传值

父传子：通过在子组件内部定义一个props

子传父：在子组件中，利用  $emit  触发 父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件

17、路由的钩子函数

首页可以控制导航跳转，

beforeEach

，

afterEach

等，一般用于页面

title

的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next。
to：route即将进入的目标路由对象。
from：route当前导航正要离开的路由。
next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转
           

18、keep-alive的理解

<keep-alive>

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

<keep-alive>

是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中。

当组件在

<keep-alive>

内被切换,它的

activated

和

deactivated

这两个生命周期钩子函数将会被对应执行。

• activated

  : keep-alive组件激活时调用

• deactivated

  : keep-alive组件停用时调用

19、跨域的几种方式

 1、 通过jsonp跨域

2、 document.domain + iframe跨域

3、 location.hash + iframe

4、 window.name + iframe跨域

5、 postMessage跨域

6、 跨域资源共享（CORS）

7、 nginx代理跨域

8、 nodejs中间件代理跨域

9、 WebSocket协议跨域