【面试题整理】

日常记录

# Q：vue双向绑定实现原理

# A：VUE实现双向数据绑定的原理就是利用了Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

// defineProperty的用法
      var obj = {};
      var name; //第一个参数：定义属性的对象。//第二个参数：要定义或修改的属性的名称。//第三个参数：将被定义或修改的属性描述符。
      Object.defineProperty(obj, "data", {
        //获取值
        get: function() {
          return name;
        },
        //设置值
        set: function(val) {
          name = val;
          console.log(val);
        }
      });
      //赋值调用set
      obj.data = "aaa";
      //取值调用get
      console.log(obj.data);
      // 代码演示：defineProperty的双向绑定
      var obj = {};
      Object.defineProperty(obj, "val", {
        set: function(newVal) {
          document.getElementById("a").value =
            newVal == undefined ? "" : newVal;
          document.getElementById("b").innerHTML =
            newVal == undefined ? "" : newVal;
        }
      });
      document.getElementById("a").addEventListener("keyup", function(e) {
          console.log(e.target.value)
        obj.val = e.target.value;
      });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# Q：前端自动化部署流程

# A：一个项目的三个环节，开发环境，测试环境，生产环境，然后每次 npm 打包ftp去拖是不是很麻烦，只想一次提交git后不同环境就能够根据不同环境的对应的分支进行打包，代码发布。

jenkins和gitlab配合起来的确是特别爽

# Q：单点登录实现

# A：参考链接1 (opens new window)/参考链接2 (opens new window)

# sso单点登录

session
cookie

# Q：require和import的区别

# A：

# 1. 遵循规范（require 是 AMD规范引入方式，import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法）

# 2.调用时间（require是运行时调用，所以require理论上可以运用在代码的任何地方import是编译时调用，所以必须放在文件开头）

# 3.本质（require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require）

# Q：多个标签通讯方式

# A：参考链接 (opens new window)

1.WebSocket：WebSocket 是 HTML5开始提供的一种在单个 TCP连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

<script type="text/javascript">
 function WebSocketTest()
 {
    if ("WebSocket" in window)
    {
       alert("您的浏览器支持 WebSocket!");
       
       // 打开一个 web socket
       var ws = new WebSocket("ws://localhost:9998/echo");
        
       ws.onopen = function()
       {
          // Web Socket 已连接上，使用 send() 方法发送数据
          ws.send("发送数据");
          alert("数据发送中...");
       };
        
       ws.onmessage = function (evt) 
       { 
          var received_msg = evt.data;
          alert("数据已接收...");
       };
        
       ws.onclose = function()
       { 
          // 关闭 websocket
          alert("连接已关闭..."); 
       };
    }
    
    else
    {
       // 浏览器不支持 WebSocket
       alert("您的浏览器不支持 WebSocket!");
    }
 }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

localstorage：是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信

window.onstorage = (e) => {console.log(e)}
// 或者这样
window.addEventListener('storage', (e) => console.log(e))

1
2
3

3.SharedWorker：SharedWorker可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)

// sharedWorker所要用到的js文件，不必打包到项目中，直接放到服务器即可
let data = ''
onconnect = function (e) {
  let port = e.ports[0]

  port.onmessage = function (e) {
    if (e.data === 'get') {
      port.postMessage(data)
    } else {
      data = e.data
    }
  }
}

// 这段代码是必须的，打开页面后注册SharedWorker，显示指定worker.port.start()方法建立与worker间的连接
    if (typeof Worker === "undefined") {
      alert('当前浏览器不支持webworker')
    } else {
      let worker = new SharedWorker('worker.js')
      worker.port.addEventListener('message', (e) => {
        console.log('来自worker的数据：', e.data)
      }, false)
      worker.port.start()
      window.worker = worker
    }
// 获取和发送消息都是调用postMessage方法，我这里约定的是传递'get'表示获取数据。
window.worker.port.postMessage('get')
window.worker.port.postMessage('发送信息给worker')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# Q：列举居中布局方法

# A：

<div class="box box1">
        <span>垂直居中</span>
</div>

1
2
3

table-cell

.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}

1
2
3
4
5

2.display:flex

.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}

1
2
3
4
5

3.绝对定位和负边距

.box3{position:relative;}
.box3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }

1
2
3
4
5
6
7
8
9
10
11

4.绝对定位和0

.box4 span{
  width: 50%; 
  height: 50%; 
  background: #000;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}

1
2
3
4
5
6
7
8
9

5.translate

.box6 span{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
        }

1
2
3
4
5
6
7
8

# Q：列举打包优化方案

# A：

使用CDN引入资源
ExtractTextPlugin 分离css
UglifyJsPlugin代码压缩
tree shaking：消除unused code
dll 全称是：dynamic link library（动态链接库）告诉webpack指定库在项目中的位置，从而直接引入，不将其打包在内

# Q：深拷贝方法

# A：

Object.assign()（对象只有一层可使用）
JSON.parse(JSON.stringify(obj))
递归

//使用递归的方式实现数组、对象的深拷贝
function deepClone1(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空，并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone1(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Q：Promise原理和用法，四个异步函数怎么顺序执行

# A：Promise对象是一个构造函数，用来生成Promise实例。通过在函数内部return 一个 Promise对象的实例

Promise.prototype.then：实例方法，为 Promise 注册回调函数，函数形式：fn(vlaue){}，value 是上一个任务的返回结果
Promise.prototype.catch：实例方法，捕获异常，函数形式：fn(err){}, err 是 catch 注册之前的回调抛出的异常信息。
Promise.race：类方法，多个 Promise 任务同时执行，返回最先执行结束的 Promise 任务的结果，不管这个 Promise 结果是成功还是失败
Promise.all：类方法，多个 Promise 任务同时执行。如果全部成功执行，则以数组的方式返回所有 Promise 任务的执行结果。如果有一个 Promise 任务 rejected，则只返回 rejected 任务的结果。

# Q：类组件class和函数组件fun的区别（react）

# A：

函数组件看似只是一个返回值是DOM结构的函数，其实它的背后是无状态组件的思想。函数组件中，你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件，接收Props，渲染DOM，而不关注其他逻辑。
函数组件中没有this
性能。目前React还是会把函数组件在内部转换成类组件，所以使用函数组件和使用类组件在性能上并无大的差异。

# Q：Call apply bind区别

# A：都是改变函数运行时this的指向，第一个参数为this指向

call除了第一个参数以外还可以添加多个参数,apply第二个参数必须是一个数组,如果第一个参数写的是null，那么this指向的是window对象
call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，

# Q:Vue如何做的diff判断

# A:

在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较
当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。

# Q:webpack都做了哪些配置

# A:

# 1. enrty（项目入口）

# 2. output（出口文件）

# 3. module（模块的处理）

# 常用loader:

转换编译：script-loader, babel-loader,ts-loader,coffee-loader
处理样式：style-loader,css-loader,less-loader,sass-loader,postcss-loader
处理文件：raw--loader,url-loader,file-loader
处理数据：csv-loader,xml-loader
处理模板语言：html-loader,pug-loader,jade-loader,markdown-loader
清理和测试：mocha-loader,eslint-loader

# 4.plugin（loader不能做的处理都能交给plugin来做）

# 5.一些辅助开发的相关属性

devtool:打包后的代码和原始代码存在较大的差异，此选项控制是否生成以及如何生成sourcemap
devserver：通过配置devserver选项，可以开启一个本地服务器
watch：启用watch模式后，webpack将持续监听热河已经解析文件的更改，开发是开启会很方便
watchoption：用来定制watch模式的选项
performance：打包后命令行如何展示性能提示，如果超过某个大小是警告还是报错

# Q:cli3改变

# A:

选择项目插件界面更友好了。如选择 eslint 类型、是否需要 router 和 vuex 等行为。
实现了界面化创建和操作项目，使用 $ vue ui 启动教授架页面。
将常用配置项进行了封装，统一使用 vue-config.js 来进行配置。
给出 vue-cli-plugin 插件来快速改变项目目录结构和Webpack配置。

# Q:清楚浮动

# A:

特性：浮动元素影响的不仅是自己，他会影响周围元素对其进行环绕
为什么要清除浮动？（解决父元素高度坍陷问题）一个块级元素如果没有设置height,其height由子元素撑开，对子元素使用了浮动之后，子元素就会脱离文档流也就是说，父及元素中没有内容可以撑开其高度，这样父级元素height就会被忽略。这就是所谓的高度坍塌

1.给父级元素定义高度 
2.让父级元素也浮动 
3.父级定义display:table 
4.父元素设置overflow:hidden 
5.clearfix:使用内容生成的方式清除浮动
	.clearfix:after {  // :after选择器向选定的元素之后插入内容
   		    content:""; // 生成内容为空
   		    display: block; // 块级元素显示
   		    clear:both; // 清除前面元素
	}
不破坏文档流，没有副作用

1
2
3
4
5
6
7
8
9
10
11

# Q:css画三角形

# A:

.trigon{
  width: 0;
  height: 0;
  border-bottom: 50px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

1
2
3
4
5
6
7

# Q:使元素消失的方法

# A:visibility:hidden、display:none、z-index=-1、opacity：0

# Q:如何理解BFC

# A:BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

# 形成BFC的条件

浮动元素，float 除 none 以外的值
定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-block，table-cell，table-caption
overflow 除了 visible 以外的值（hidden，auto，scroll）

# BFC的特性

内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定
bfc的区域不会与float的元素区域重叠
计算bfc的高度时，浮动元素也参与计算
bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素

# 应用

两栏布局
.left-con {
    float: left;
    width: 200px;
    height: 300px;
    margin-right: 10px;
    background-color: red;
}

.right-con {
    overflow: hidden;/*创建bfc */
    height: 300px;
    background-color: purple;
}
三栏布局
.left-con,
.right-con {
    float: left;
    width: 100px;
    height: 300px;
    background-color: green;
}

.right-con {
    float: right;
}

.mid-con {
    overflow: hidden;  /*创建bfc*/
    height: 300px;
    background-color: red;
}
防止字体环绕
.left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellow;
}
p {
    background-color: green;
    overflow: hidden;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# Q:前端跨域问题

# A:

jsonp跨域(只能解决get）原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制，因为所有的src属性和href属性都不受同源策略的限制，可以请求第三方服务器资源内容

步骤：1.去创建一个script标签
      2.script的src属性设置接口地址
      3.接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
      4.通过定义函数名去接受返回的数据

1
2
3
4

2.document.domain 基础域名相同子域名不同 3.window.name 利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name 4.服务器设置对CORS的支持原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求 5.利用h5新特性window.postMessage()

iframe元素创建包含另外一个文档的内联框架（行内框架）(setTimeout进行异步加载)
      解释：浏览器中的浏览器！用于设置文本或者图形的浮动图文框或容器
      它和跨域
        1、document.domain 实现主域名相同，子域名不同的网页通信
          都设置为超域：document.domain = 'demo.com'
        2、window.postMessageht(data, url)，h5的API，启动跨域通信

1
2
3
4
5
6
7

6.webpack配置proxy代理

# Q：函数节流和防抖（解决高频事件）

# A：

防抖：短时间内多次触发同一个事件，只执行最后一次，或者在开始时执行，中间不执行
节流：节流是连续触发事件的过程中以一定时间间隔执行函数。节流会稀释你的执行频率，比如每间隔1秒钟，只会执行一次函数，无论这1秒钟内触发了多少次事件

# Q:检验方法

# A:

typeOf()是判断基本类型的Boolean,Number，symbol, undefined, String。对于引用类型：除function，都返回object null返回object。
installOf() 用来判断A是否是B的实例，installof检查的是原型。
toString() 是Object的原型方法，对于 Object 对象，直接调用 toString() 就能返回 [Object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。
hasOwnProperty()方法返回一个布尔值，指示对象自身属性中是否具有指定的属性，该方法会忽略掉那些从原型链上继承到的属性。
isProperty()方法测试一个对象是否存在另一个对象的原型链上。
valueof：所有对象都有valueof，如果存在任意原始值，他就默认将对象转化为表示它的原始值。如果对象是复合值，而却大部分对象无法真正表示一个原始值，因此默认的valueof()方法简单的返回对象本身，而不是返回原始值

# Q:手写bind

# A:原理：第一个是返回一个函数，并不会立即执行第二个是带参数（第一个参数要指向的this，后面的的参数用来传递

Function.prototype.my_bind = function(context) {
    var self = this;
    return function() {
      self.apply(context, arguments);
    };
  };
  function a() {
    console.log(this.name);
  }
  a(); // ''
  var b = {
    name: "apple"
  };
  a.bind(b)('dd'); // apple
  a.my_bind(b)('dd'); // apple

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Q:闭包

# A：

# 理解

内部函数可以访问定义他们外部函数的参数和变量，设计私有的方法和变量，避免全局变量的污染
函数嵌套函数
本质是将函数内部和外部连接起来。优点是可以读取函数内部的变量，让这些变量的值始终保存在内存中，不会在函数被调用之后自动清除

# 缺陷

常驻内存会增大内存使用量，并且使用不当容易造成内存泄漏
闭包对脚本性能具有负面影响，包括处理速度和内存消耗

# 服务器端考点

# 1.状态码

2XX（成功处理了请求状态） 200成功请求 202请求进入后台
3XX（每次请求使用的重定向不要超过5次）304 网页上次请求没有更新，节省带宽和开销
4XX（表示请求可能出错，妨碍了服务器的处理） 400 404
5XX（表示服务器在处理请求的时候发生内部错误）500服务器报错

# 2.get/post的区别

get数据是存放在url之后，以？分割url和传输数据，参数之间以&相连； post方法是把提交的数据放在http包的Body中
get提交的数据大小有限制，（因为浏览器对url的长度有限制），post的方法提交的数据没有限制
get需要request.queryString来获取变量的值，而post方式通过request.from来获取变量的值
get的方法提交数据，会带来安全问题，比如登录一个页面，通过get的方式提交数据，用户名和密码就会出现在url上

# 3.http和https的区别(Hyper Text Transfer Protocol)

http:是以安全为目标的HTTP通道，简单讲是HTTP的安全版本，通过SSL加密
https:超文本传输协议。是一个客服端和服务器端请求和应答的标准（tcp）,使浏览器更加高效，使网络传输减少

# Q:从输入url到获取页面的完整过程

# A:

查询NDS(域名解析),获取域名对应的IP地址查询浏览器缓存
浏览器与服务器建立tcp链接（三次握手）---1、c端发请求s端确认收到2、s端发链接告诉c端收到3、s端确认c端收到内容
浏览器向服务器发送http请求(请求和传输数据）
服务器接受到这个请求后，根据路经参数，经过后端的一些处理生成html代码返回给浏览器
浏览器拿到完整的html页面代码开始解析和渲染，如果遇到外部的css或者js，图片一样的步骤
浏览器根据拿到的资源对页面进行渲染，把一个完整的页面呈现出来

# Q：css3简单动画

# A：

.ani {
width: 100px;
height: 100px;
background: red;
margin: 200px auto;
position: relative;
animation: myAni 10s;
animation-iteration-count: infinite;//动画重复次数
}
@keyframes myAni{
0% {
    background: red;
    left: 0;
    top: 0;
}
25% {
    background: blue;
    left: 200px;
    top: 0;
}
50% {
    background: yellow;
    left: 200px;
    top: 200px;
}
75%{
    background: pink;
    left: 0;
    top: 200px;
}
100%{
    background: green;
    left: 0;
    top: 0;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# Q：弹性盒子

flex-direction:指定了弹性子元素在父容器中的位置

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content：内容对齐属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐

flex-start：弹性项目向行头紧挨着填充。这个是默认值
flex-end：弹性项目向行尾紧挨着填充。
center：弹性项目居中紧挨着填充。
space-between：弹性项目平均分布在该行上
space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

align-items：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

flex-wrap ：属性用于指定弹性盒子的子元素换行方式。

nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

stretch - 默认。各行将会伸展以占用剩余的空间
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

# 子元素

完美居中：margin: auto;
align-self: auto | flex-start | flex-end | center | baseline | stretch

百度面经

# Q：用过node哪些框架

Express:是一个轻量Web框架（博客平台 'Ghost' ），Express是Node.js用于Web应用的工具包，能够创建基于http的端口，处理cookie等，提供一切你可能需要建立自己的Web服务器的库包
Flatiron: 是来自Nodejitsu支持的项目，它为Node.js开发提供了很多好用资源和工具包，提供了依赖注入和反转控制等功能还有流式控制等(大型文件上传)，路由, 模板和校验等。
koa:实际初始是由Express开发和维护的一个Web框架，一个Koa应用是一个包含一组中间件生成器，类似Ruby's Rack, Connect, 等等 – 是一种基于低层次中间件层次的高级“糖”语法，提高了互用性，鲁棒性，并使得编写中间件更愉快。支持 content-negotiation, cache 刷新和代理支持。
total:是一个创建Nodejs应用的现代小型web框架，主要为可扩展可伸缩的应用程序设计，包括支持WebSockets 的完美URL路由，
SocketStream;专门为构建实时Web，由于已经将基础封装，SocketStream 能够解放你，让你关注构建你的社交或聊天应用，或多用户游戏，或者任何你需要实时流数据显示的应用，所有口味都能满足(e.g. Vanilla JS vs CoffeeScript, Stylus vs Less)

# Q：性能优化方法

尽量减少HTTP请求次数（压缩合并js，css精灵图，内联图片。src用data:url）
使用CDN（网站上静态资源即css、js全都使用cdn分发，图片亦然,因为cdn拥有众多服务器，用户请求可以请求距离他近的服务器，加快速度）
避免空的src和href
为文件头指定Expires(过期时间)或者Cache-Control头部。
可缓存的AJAX异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, $.ajax({

url: 'url',
dataType: "json",
cache: true, //如果有缓存请求缓存
success: function(son, status) {}
})

1
2
3
4
5

6.减少dns查询次数

# Q：盒子模型理解

# A：CSS css盒子模型又称框模型，包含了元素内容、内边距、边框、外边距几个要素。

# Q：ajax工作原理及优缺点

# A：通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、准备请求
xhr.open(method,url,async);
3、发送请求
xhr.send();
4、处理响应
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
    console.log(xhr.responseText);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

# 优点

页面无刷新，用户体验好。
异步通信，更加快的响应能力。
减少冗余请求，减轻了服务器负担
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

# 缺点

Ajax干掉了Back与History功能，即对浏览器机制的破坏
安全问题：AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
对搜索引擎支持较弱
破坏程序的异常处理机制
无法用URL直接访问。

# Q：js变量声明提升

# A：在预编译阶段，编译器会把所有定义的变量全部提升到最顶部，即，把变量声明的语句会自动放置到开始。换句话说，经过预编译后，在任何函数里，一开始是全部的变量声明。

# Q：js判断对象是否为数组

# A：1. instance of 2、constructor 3、 isArray

# Q：严格模式(use strict)不能使用未声明的变量

# A：

消除代码运行的一些不安全之处，保证代码运行的安全
高编译器效率，增加运行速度
为未来新版本的Javascript做好铺垫

不允许删除变量或对象
不允许删除函数
不允许变量重名
不允许使用八进制
不允许使用转义字符
不允许对只读属性赋值
不允许对一个使用getter方法读取的属性进行赋值
不允许删除一个不允许删除的属性
变量名不能使用 "eval" 字符串
变量名不能使用 "arguments" 字符串

1
2
3
4
5
6
7
8
9
10

# Q：前端缓存

# Q：箭头函数

# A：ES6新增

箭头函数是匿名函数，不能作为构造函数，不能使用new
箭头函数不绑定arguments，取而代之用rest参数...解决
箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
箭头函数没有原型属性

# Q：vue双向绑定原理

# A：

# Q：sessionStorage和localStorage区别

# A：

# Q：图片居中

# A：

# Q：合并git的commit

# A：

# Q：vuex传值

# A：

# Q：Session存储

# A：

# 松鼠拼拼

# A：

# Q:数组两元素位置互换

# A：

使用temp变量
splice

function swapArr(arr, index1, index2) {
    arr[index1] = arr.splice(index2, 1, arr[index1])[0];
    return arr;
}

璞子