面试

1..TCP的三次握手和四次挥手

#三次握手

第一次握手： 客户端发送一个SYN码给服务器，要求建立数据连接；

第二次握手： 服务器收到SYN同时自己也发送一个SYN包（标志）；叫SYN+ACK（确认包）；发送给客户端，可以建立连接

第三次握手： 客户端再次发送ACK向服务器，服务器验证ACK没有问题，则建立起连接；

#四次挥手

第一次挥手： 客户端发送FIN(释放报文)报文，通知服务器数据已经传输完毕；

第二次挥手: 服务器接收到之后，通知客户端我收到了FIN,发送ACK(确认)给客户端，此时服务器处于关闭等待状态,但是服务器再次发送数据，客户端仍然接受得到。

第三次挥手： 服务器已经传输完毕，再次发送FIN(释放报文)通知客户端，数据已经传输完毕

第四次挥手： 客户端接收到服务器的释放报文后,需要发送ACK确认报文,进入TIME_WAIT状态；服务器和客户端关闭连接

2.简述一下src与href的区别

src，表示的是引入文件，目的是要把文件加载到html页面中去，

href，表示的是超文本引用，指向网络资源所在位置，

3.防抖与节流

防抖：函数防抖一般是指对于在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时。

节流: 触发函数事件后，短时间 间隔内无法连续调用，只有上一次函数执行完后，过了规定的时间 间隔，才能进行下一次的函数调用，一般用于http请求。

4.说说 http 和 https 的区别

https：是以安全为目标的HTTP通道，简单讲是HTTP的安全版本，通过SSL加密

http：超文本传输协议。是一个客服端和服务器端请求和应答的标准（tcp）,使浏览器更加高效，使网络传输减少

5.让元素隐藏有几种方法

   第一：opacity: 0; [əʊˈpæsəti]

   第二：display: none;
   
   第三：overflow: hidden;

   第四：visibility ：hidden
   
   第五：Position
   
  # display:none和visibility:hidden两者的区别
  1.如果给一个元素设置了display: none，占据的空间消失。 
  
  
 2. 给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间

  
 3. visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

6. 严格模式‘use strict’

   在代码中出现表达式-"use strict"; 意味着代码按照严格模式解析，这种模式使得Javascript在更严格的条件下运行。
   
   好处：
   
   消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
   消除代码运行的一些不安全之处，保证代码运行的安全；
   提高编译器效率，增加运行速度；
   为未来新版本的Javascript做好铺垫。
   
   坏处：
   
   1.同样的代码，在"严格模式"中，可能会有不一样的运行结果；
   
   2.一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行
   

7.浏览器的内核

IE: trident内核  [ˈtraɪdnt]

Firefox：gecko内核

Safari:webkit内核   [səˈfɑːri]

Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核  [ˈɒprə]

Chrome:Blink(基于webkit，Google与Opera Software共同开发)   [krəʊm] 

8.闭包

1.闭包的概念：闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包最常用的方式就是在一个函数内部创建另一个

函数。用一句简单来说就是：闭包是将函数内部和函数外部连接起来的桥梁，函数的作用域及其所有变量都会在函数执行结束

后被销毁。但是，在创建了一个闭包以后，这个函数的作用域就会一直保存到闭包不存在为止。

2.作用：封装私有变量，块级作用域，实现JS的模块

坏处： 由于闭包会携带包含它的函数的作用域，因为会比其他函数占用更多内容，过度使用闭包，会导致内存占用过多。

9.深浅拷贝

 //  一般要深拷贝和浅拷贝的是数组或者对象那么,深拷贝有分一层拷贝和全部拷贝。

//浅拷贝：
var obj={name:"xie",age:'19'}
var obj2=obj  //浅拷贝
#//对象浅拷贝第一层

    <script>
        var obj = {
            name: "xiewucheng",
            age: '18s',
            objchi: {
                wu: "18",
                name: 'wujingjing'
            }
        }
     var obj2={a:obj.name,b:obj.age,c:obj.objchi}

     obj2.a=100        //改变了
     obj2.c.wu="我想改变你,此时并不行，没有改变"  //改变不了拷贝过来的第二层对象
     console.log(obj)
     console.log(obj2)
     console.log(obj==obj2)//false
     


第二种方式：  运用扩张运算符
        var obj = {
            name: "xiewucheng",
            age: '18s',
            objchi: {
                wu: "18",
                name: 'wujingjing'
            }
        }
     var obj2={...obj}//扩张运算符
     obj2.name='fff'
     console.log(obj)
     console.log(obj2)

    </script>
#对象深拷贝，
//原理：转为字符串，之后转为对象就好

<script>
        var obj={
            name:"xiewucheng",
            age:'18s',
            objchi:{
                wu:"18",
                name:'wujingjing'
            }
        }
        var obj1=JSON.stringify(obj) //转为字符串
        var obj2=JSON.parse(obj1)//转对象
        obj2.name='xiwwu'  //修改，与前面毫无关系，那就是深拷贝
        console.log(obj)
        console.log(obj2)
        console.log(obj==obj1)  //false
        
        </script>


#数组浅拷贝

var arr=[1,2,3,4,5]
var arr1=arr
arr1[0]=8
console.log(arr)  //都变了
console.log(arr1)//都变了


#数组深拷贝第一层
var arr=[1,2,3,4,5,{name:"xiewucheng",age:"18s"}]
var arr1=arr.slice(0)//  从0位到最后一位
arr1[0]=8//可以改
arr1[5].name="xie"//都改变了，没有深拷贝
console.log(arr) 
console.log(arr1)
#数组深拷贝
var arr=[1,2,3,4,5,{name:"xiewucheng",age:"18s"}]
var arr1=JSON.stringify(arr)
var arr2=JSON.parse(arr1)
arr1[0]=8//可以改
arr2[5].name="xie"//可以改, arr没有跟着改变
console.log(arr) 
console.log(arr2)

10.原型和原型链

 原型:

1.每一个函数都有一个prototype属性,指向了它的原型

2.每一个实例有一个__proto__属性,这个属性指向了它的原型,原型上还有__proto__,指向了它父类的原型,一直到Object.prototype为止,所有Object的原型,是一个对象的终极原型

3.访问实例的一个属性,会先从实例内部查找,若没有,就到它的原型去查找,还没有,就继续向父一级原型查找,一直查找到

Object.prototype位置,若有,就返回,没有在返回undefined

11.继承

1.原型继承

概念：

原型继承，就是将父类对像的方法和属性给子类的原型。子类的构造函数中不拥有这些方法和属性。

原型继承的缺点：

父类的引用类型属性会被所有子类实例共享，任何一个子类实例修改了父类的引用类型属性，其他子类实例都会受到影响
    
2.借用构造函数继承
优点：
避免了引用类型属性被所有实例共享
可以向父类传参

缺点：

方法必须定义在构造函数中

每创建一个实例都会创建一遍方法

3.组合继承（原型继承和借用构造函数继承的组合）

特点：1、可以继承父类原型上的属性，可以传参，可复用。

　　　2、每个新实例引入的构造函数属性是私有的。
   
 缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。

4.寄生式继承

　优点：没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。
 
  缺点：没用到原型，无法复用。

5.寄生组合式继承

这是es5最好的继承方式，集合了所有继承方式的优点于一身。

6、es6的继承方式

27号

12.什么是事件冒泡？什么是事件捕获？

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。


捕获型事件：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

13.get/post的区别

get 一般用于获取数据

get请求如果需要传递参数，那么会默认将参数拼接到url的后面；然后发送给服务器；

get请求传递参数大小是有限制的；是浏览器的地址栏有大小限制；

get安全性较低

get 一般会走缓存，为了防止走缓存，给url后面每次拼的参数不同；放在?后面，一般用个时间戳


post 一般用于发送数据

post传递参数，需要把参数放进请求体中，发送给服务器；

post请求参数放进了请求体中，对大小没有要求；

post安全性比较高；

post请求不会走缓存；

14.数组的排序

冒泡排序、快速排序、选择排序

15.浏览器重绘与重排的区别？

重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素

重绘: 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变

16.请指出document.onload和document.ready两个事件的区别

页面加载完成有两种事件，

一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），

二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

17.常用的几种布局方式

固定布局

流式布局（自适应布局）

弹性布局（伸缩布局）

定位布局

浮动布局

响应式布局（媒体查询）

18CSS 优先级算法如何计算

通配符选择器 0

标签选择器 1

类选择器 10

id 选择器 100

行内选择器1000

! important 修改样式的优先级为最高


如果优先级相同，则选择最后出现的样式。

继承得到的样式的优先级最低

19img的alt与title有何异同

alt:图片不能显示出来的时候显示文字。title:鼠标移入时显示的提示文本

20 js异步加载的方式有哪些？

<script> 的 defer 属性，HTML4 中新增  [dɪˈfɜː(r)]

<script> 的 async 属性，HTML5 中新增

<script>标签打开defer属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。

defer 和 async 的区别在于: defer要等到整个页面在内存中正常渲染结束，才会执行；

async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。defer是“渲染完再执行”，async是“下载完就执行”。

21.CSS3 有哪些新特性？

1.RGBA 和 透明度

2.background-image background-origin(content-box/padding-box/border-box) background-size 

3.background-repeat  [rɪˈpiːt] 



4.word-wrap（允许长单词换行到下一行）word-wrap：break-word   [ræp]

6.font-face 属性：定义自己的字体   [feɪs]



7.圆角（边框半径）：border-radius 属性用于创建圆角

8.边框图片：border-image: url(border.png) 30 30 round

9.盒阴影：box-shadow: 10px 10px 5px #888888

5.文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）


10.媒体查询：定义两套 css，当浏览器的尺寸变化时会采用不同的属性

22.call、apply有什么区别？call,aplly和bind的内部是如何实现的？

call 和 apply 的功能相同，区别在于传参的方式不一样:，apply的实现和call很类似，但是需要注意他们的参数是不一样的，apply的第二个参数是数组或类数组.

bind 和 call/apply 有一个很重要的区别，一个函数被 call/apply 的时候，会直接调用，bind()会创建一个函数，函数体内的this会被绑定到传入bind()第一个参数的值，

23.说下ES6中的class

ES6 class 内部所有定义的方法都是不可枚举的;

ES6 class 必须使用 new 调用;

ES6 class 不存在变量提升;

ES6 class 默认即是严格模式;

ES6 class 子类必须在父类的构造函数中调用super()，这样才有this对象

24..什么是事件代理/事件委托？

事件代理/事件委托是利用事件冒泡的特性，将本应该绑定在多个元素上的事件绑定在他们的祖先元素上，尤其在动态添加子元素的时候，可以非常方便的提高程序性能，减小内存空间。

25.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？

png 是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。

jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在 www 上，被用来储存和传输照片的格式。

gif 是一种位图文件格式，以 8 位色重现真色彩的图像。可以实现动画效果.

webp 格式是谷歌在 2010 年推出的图片格式，压缩率只有 jpg 的 2/3，大小比 png 小了 45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和 opera 支持。

26router 的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而

$router 是“路由实例”对象包括了路由的跳转方法，钩子函数等

27. 前后端如何通信

28. Form表单（最原始的）
    
    Ajax : 短连接
    
    Websocket : 长连接，双向的。
    

28网页制作会用到的图片格式有哪些????

png-8，png-24，jpeg，gif，svg。

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。科普一下Webp：WebP格式，谷歌（google）开发

的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间
。
Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%， svg：可缩放的矢量图形

29 CSS 引入方式有哪些？link 和 @import 的区别？

外部样式表（链接式、导入式）

链接式和导入式的区别： 

3.页面加载

页面加载时，会被同时被加载，而@import引用的css会等到页面被加载完的时候再加载

4.兼容性。

@import只有在IE5以上才能被识别，

30.ES6新的特性有哪些？

新增了块级作用域(let,const)

提供了定义类的语法糖(class)

新增了一种基本数据类型(Symbol) [ˈsɪmbl]

新增了变量的解构赋值

函数参数允许设置默认值，引入了rest参数，新增了箭头函数

对象和数组新增了扩展运算符

ES6 新增了模块化(import/export)

ES6 新增了 Set 和 Map 数据结构

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例   [ˈprɒksi]

ES6 新增了生成器(Generator)和遍历器(Iterator)

31..Cookie 的利弊有哪些？

*优势：**保存客户端数据，分担了服务器存储的负担

缺点：

1.数量和长度的有限制。每个特定的域名下最多生成 20 个 cookie（chorme 和 safari 没有限制）

32.new的原理是什么？通过new的方式创建对象和通过字面量创建有什么区别？

创建一个新对象。

将构造函数的作用域赋值给新对象，即this指向这个新对象.

如果构造函数中没有返回其它对象，则返回构造函数中返回的对象。

28号

33.VUE 和 REACT 有什么区别？

react 整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在 react 中，是单向数据流；


vue 的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立 Watcher 来监听，当属性变化的时候，响应式的更新对应的虚拟 dom。

数据绑定: vue实现了数据的双向绑定 , react数据流动是单向的

34.一个页面从url敲入地址到页面显示的全过程

1.浏览器地址栏输入url
2.浏览器会先查看浏览器缓存--系统缓存--路由缓存，如有存在缓存，就直接显示。如果没有，接着第三步
3.域名解析（DNS）获取相应的ip
4.浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手
5.握手成功，浏览器向服务器发送http请求，请求数据包
6.服务器请求数据，将数据返回到浏览器
7.浏览器接收响应，读取页面内容，解析html源码，生成DOm树
8.解析css样式、浏览器渲染，js交互
9.请求页面中需要的js脚本和图片或者样式表

35..移动端的性能优化

1、首屏加载和按需加载，懒加载

2、资源预加载

3、图片压缩处理，使用base64内嵌图片

4、合理缓存dom对象
 
5、 尽量使用事件代理，避免直接事件绑定

7、不滥用web字体，不滥用float（布局计算消耗性能），减少font-size声明

8、使用viewport固定屏幕渲染，加速页面渲染内容

9、使用touchstart代替click（click 300毫秒的延迟）

36.

         var str="hello world";
        console.log(str.split('').reverse().join(""));   

        //split将字符串分割成字符串数组，reverse() 方法用于颠倒数组中元素的顺序。，join("")将数组再转换成字符串

37.vue 路由的两种模式

hash ——即地址栏 URL 中的#符号（此 hsah 不是密码学里的散列运算） hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history ——利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法

//[ˈɪntəfeɪs]  //  [pʊʃ steɪt]   // [rɪˈpleɪs] replace

12、1号

38.跨域的几种方式

jsonp 跨域(优点:简单方便,缺点:只能使用 get 请求,不支持 post 请求)
nginx 的反向代理(少用) apach tomact
window.name(少用)
axios 反向代理,
cors(跨域资源共享)修改服务器端修改包的头部信息,
iframe 跨子域(不常用）
fetch  [fetʃ]    

39.移动端的兼容问题

1.给移动端添加点击事件会有300S的延迟 如果用点击事件，需要引一个fastclick.js文件，解决300s的延迟 一般在移动端用ontouchstart、ontouchmove、ontouchend

2.移动端点透问题,touchstart 早于 touchend 早于click,click的触发是有延迟的，这个时间大概在300ms左右， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上 尽量都使用touch事件来替换click事件。

3.设置缓存 手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。[kæʃ] 

4.禁止手机中网页放大和缩小。

使用viewport让页面禁止缩放。 

5.上下拉动滚动条时卡顿、慢

40.前端有哪些页面优化方法?

减少 HTTP 请求次数

合理设置 HTTP缓存

资源合并与压缩

将外部脚本置底

多图片网页使用图片懒加载。

在js中尽量减少闭包的使用

尽量合并css和js文件

尽量使用字体图标或者SVG图标，来代替传统的PNG等格式的图片

减少对DOM的操作

在JS中避免“嵌套循环”和 “死循环”

尽可能使用事件委托（事件代理）来处理事件绑定的操作

41.为什么 0.1 + 0.2 != 0.3 ?

1、存储原理
在计算机中数字无论是整数还是浮点数都是以多位二进制的方式进行存储的。

42.数组去重

....1.使用Es6去重
console.log(Array.from(new Set(arr)))
console.log(Array.from(new Set(['a','b','b'])))

2.利用for嵌套for，然后splice去重（ES5中最常用）
var arr=['a','b','b','b','c','c','e']
function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                    arr.splice(j,1);
                    j--;//第一个b跟第二个b比较一样就进删除，第三个b就代替了第二个b的位置，j就直接去下一项比较了，
                    //这样不精确，所以要回头再比较一次，所以j--
                }
            }
        }
        return arr;
}
console.log(unique(arr))

3.filter

var arr=['a','b','b','b','c','c','e']
function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;  //方法indexOf("o",5)中的5应该是查找的起始位置吧
    //默认是从0开始，这道题的巧妙之处就是item去arr里面找，找到了返回下表，当循环到第二b的时候，依旧是从
    //第一个开始找，找到第一个b的时候就返回下表，第一个跟index的下标不一样所以就不会返回。从而达到去重。


  });
}
console.log(unique(arr))

4.Map数据结构去重

function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 数组用于返回结果
  for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) {  // 如果有该key值
      map .set(arr[i], true); 
    } else { 
      map .set(arr[i], false);   // 如果没有该key值
      array .push(arr[i]);
    }
  } 
  return array ;
}

43.JS中常见的异步任务

定时器、
ajax、
事件绑定、
回调函数、
async await、
promise。

45.react 性能优化是哪个周期函数

shouldComponentUpdate 这个方法用来判断是否需要调用 render  [ˈrendə(r)] 方法重新描绘 dom.因为 dom 

的描绘非常消耗性能， 如果我们在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的

提高性能

46.为什么 css 放在顶部而 js 写在后面

1.浏览器预先加载css后，可以不必等待HTML加载完毕就可以渲染页面了

2.其实HTML渲染并不会等到完全加载完在渲染页面，而是一边解析DOM一边渲染。

3.js写在尾部，主要是因为js主要扮演事件处理的功能，一方面很多操作是在页面渲染后才执行的。另一方面可以节省加载时间，使页面能够更加的加载，提高用户的良好体验

47.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。  

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致

小结：图片懒加载、图片预加载、图片压缩

48.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari:webkit内核

Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核  

Chrome:Blink(基于webkit，Google与Opera Software共同开发)

49.如何用webpack来优化前端性能？

用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。

1.压缩代码 

2.利用CDN加速

3.提取公共第三方库

50.typeof运算符和instanceof运算符以及isPrototypeOf()方法的区别

function Car(year) {
  this.make = year;
}
var auto = new Car(1998);

console.log(auto instanceof Car); //[ˈinstəns f:c]
//instanceof 用一个对象的协议类型确定它是否是一个类的实例，或者是一个结构函数。
//它返回一个布尔值，用以确定是否一个对象是一个指定类的实例。

 console.log(typeof Car);
 //判断是什么类型的数据
 
 var monkey = {
 hair: true,
 feeds: 'bananas',
 breathes: 'air'
};

function Human(name) {
 this.name = name;
}
Human.prototype = monkey; 

console.log(Human.prototype) 

var george = new Human('George');

 console.log(monkey.isPrototypeOf(george))   
 //每个对象中都会有一个 isPrototypeOf()方法，这个方法会告诉我们当前对象是否
 //是另一个对象的原型

51.for of , for in 和 forEach,map 的区别

for … of只遍历当前对象不会遍历原型链，可以使用的范围包括数组、Set（集合） 和 Map（映射） 结构、某些类似数组的对象

for...in循环：遍历对象自身的和继承的可枚举的属性, 不能直接获取属性值。可以中断循环。


for … in会遍历对象的整个原型链,性能非常差不推荐使用,而for … of只遍历当前对象不会遍历原型链

 let arr = [1, 2, 3];
for (let i in arr) {
    console.log(i,arr[i])
}
let obj = {
    name: 'wuxiaodi',
    age: 18,
};
for (let i in obj) {
    console.log(i,obj[i])
    
    
    for…of是遍历数组的value
    
let arr = [1, 2, 3];
for (let i of arr) {
    console.log(i)
}

52.说下 setState 这个方法

1.setState通过一个队列机制实现state更新，当执行setState时，会将需要更新的state很后放入状态队列,而不会立即更新this.state，队列机制可以高效地批量更新state。如果不通过setState而直接修改this.state的值,那么该state将不会被放入状态队列中。当下次调用setState并对状态队列进行合并时，就会忽略之前修改的state，造成不可预知的错误.

2.同时，也利用了队列机制实现了setState的异步更新，避免了频繁的重复更新state

3.同步更新state: 假设setState之后,执行了一个操作

53.说下基于 Token 的身份验证：（最简单的 token: uid 用户唯一的身份识别 + time 当前事件戳 + sign 签名）

用户通过用户名和密码发送请求
服务器端验证
服务器端返回一个带签名的 token，给客户端
客户端储存 token，并且每次用于发送请求
服务器验证 token 并且返回数据 每一次请求都需要 token

54new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？

1.字面量创建对象，不会调用 Object构造函数, 简洁且性能更好;


2。new Object() 方式创建对象本质上是方法调用，涉及到在proto中遍历该方法

55.说下页面的重构

在不改变外部行为的前提下，简化结构、添加可读性

56.react 中的 key

帮助我们跟踪哪些项目已更改、添加、从列表中删除，key 是独一无二的，可以让我们高效的去定位元素，并且操作它

57.React 的请求应该放在哪个生命周期中?

如果在componentWillMount里面获取数据，fetch data会执行两次，一次在服务器端一次在客户端。

目前官方推荐的异步请求是在componentDidmount中进行.

58.HTTP 的缓存的过程是怎样的？

1.客户端向服务器发出请求，请求资源

2.服务器返回资源，并通过响应头决定缓存策略

3.客户端根据响应头的策略决定是否缓存资源

4.在客户端再次请求且命中资源的时候，此时客户端去检查上次缓存策略，根据策略的不同、是否过期等判断是
  直接读取本地缓存还是与服务器协商缓存

59请解释 JSONP 的工作原理，以及它为什么不是真正的 AJAX

   JSONP 工作原理： HTML 中的 script 标签可以加载并执行其他域的 javascript, 不受浏览器同源策略的限制，所以我们可以通过 script 标来动态加载其他域的资源。

不是真正的 AJAX

实际上 Ajax 与 JSONP 有着本质上的不同。Ajax 的核心是通过 XMLHttpRequest 获取数据，而 JSONP 的核心则是动态添加<script>标签来加载其他域的资源。

60.有哪些常见的Loader ？

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件

url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去

source-map-loader：加载额外的 Source Map 文件，以方便断点调试

image-loader：加载并且压缩图片文件

babel-loader：把 ES6 转换成 ES5

css-loader：加载 CSS，支持模块化、压缩、文件导入等特性

style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。

eslint-loader：通过 ESLint 检查 JavaScript 代码

61.ajax原理 / 缺点

什么是ajax:
ajax是异步的javascript和xml，它是一种不需要重新加载整个页面，就可以更新局部网页的一种技术

原理：
1.通过XMLHTTPrequest向服务器发送请求
2.拿到数据之后，使用JavaScript去更新页面

//自己的   依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行数据交互。

//自己的  客户端发送请求，请求交给xhr，xhr把请求提交给服务器，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据渲染到页面上

缺点：
1、ajax干掉了Back和History功能，就是对浏览器机制的破坏
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、违背了url和资源定位的初衷。

62.vuex

状态管理模式

state => vuex的基本数据，用来存储变量   [steɪt]

getters => 从基本数据派生的数据，相当于state的计算属性  [ˈgɛtəz]

mutations => 更改数据的方法，是同步！ 

actions => 像一个装饰器，包裹mutations，让同步变成异步

modules => 模块化Vuex

63. VUE 的钩子函数有哪些？

    1.beforeCreate   //
    
    2.created //  [kriˈeɪtɪd]
    
    3.mounted  //[ˈmaʊntɪd]   挂载完毕
    
    4.computed   //[kəmˈpjuːtɪd]
    
    5.watch   //  [wɒtʃ]
    

64. react 的工作原理是什么？

    arr.split().reverse().join('')
    

    65.V-model 的原理是什么？

原理 通过 Observer [əbˈzɜːvə(r)] 来监听自己的 model 数据变化，通过 Compile [kəmˈpaɪl] 来解析编

译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁 ，达到数据变化->视图更新
```

##### 66.理解VUE双向数据绑定原理

```
1.vue能实现数据和视图的双向绑定，核心是利用 ES5的Object.defineProperty()方法

2.Object.defineProperty()里有get 方法和 set方法，d当我们获取这个对象的属性的时候就会触发get方法。修改这个对象的时候就会触发set方法
```

Vue的响应式，核心机制是观察者模式。数据发生改变时，通知观察者，观察者做出响应，比如更新视图。

1.当一个Vue实例创建时，Vue会便利data选项的属性，用Object.defineProperty将他们转getter/setter。

2.每个组件实例都有响应的watcher程序实例，当data的属性被访问或者修改的时候，会通知wather重新计算，更新关联   组件

​

ie合模型

 border-box ( IE盒模型 )

阻住冒泡

w3c的方法是e.stopPropagation( )   

虚拟doem

虚拟doem指的是用js的对象的形式，来模仿页面doem的嵌套循环

http 协议的理解

1.超文本的传输协议，
2.基于 TCP/IP 通信协议来传递数据
3.http 请求信息,request： 请求行,header：请求头部、 空行和请求数据

状态码

2XX（成功处理了请求状态）
      200 服务器已经成功处理请求，并提供了请求的网页
      201 用户新建或修改数据成功
      202 一个请求已经进入后台
      204 用户删除成功
  3XX（每次请求使用的重定向不要超过5次）
      301 永久性定向。该状态码表示请求的资源已被分配了新的URI，以后应使用资源现在所指的URI。
      302 临时性重定向。
      304 网页上次请求没有更新，节省带宽和开销
  4XX（表示请求可能出错，妨碍了服务器的处理）
      400 服务器不理解请求的语法
      401 用户没有权限（用户名，密码输入错误）
      403 用户得到授权（401相反），但是访问被禁止
      404 服务器找不到请求的网页，
  5XX（表示服务器在处理请求的时候发生内部错误）
      500 服务器遇到错误，无法完成请求
      503 服务器目前无法使用（超载或停机维护）