简单面试题

1.map与foreach区别、

• 共同点
  1.都是循环遍历数组中的每一项。
  2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。
  3.匿名函数中的this都是指Window。
  4.只能遍历数组。
• 不同点
  1.forEach()没有返回值。
  2.map()有返回值，可以return 出来。

2.call和apply区别

• 共同点
  调用一个对象的一个方法，用另一个对象替换当前对象
• 不同点
  apply最多只能有两个参数——新this对象和一个数组argArray
  call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表

3.五大常用浏览器及内核

1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

4.cookies，sessionStorage和localStorage的区别？

• 相同点
  都存储在客户端
• 不同点
  1.存储大小
  cookie数据大小不能超过4k。
  sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
  2.有效时间
  localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
  sessionStorage 数据在当前浏览器窗口关闭后自动删除。
  cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式
   cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
   sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

• 拓展 cookie的操作

• 设置cookie
  cookie的几个要素
  cookie的内容：采用 key=value;key=value……存储，参数名自定义
  cookie的过期时间：使用参数expires
  cookie的路径：使用参数path，"/"表示这个网站的页面，不推荐!容易产生冲突
  注意：形如“/pro/index.html”路径，在google浏览器正常，在IE浏览器得不到值

    var name = "jack";  
    var pwd = "123";  
    var now = new Date();  
    now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);//转毫秒  
    var path = "/";//可以是具体的网页  
    document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;//姓名  
    document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码 

• 读取cookie
  var data=document.cookie;//获取对应页面的cookie
• 解析cookie
  • 1.截取cookie

      function getKey(key) {  
          var data = document.cookie;  
          var findStr = key + "=";  
          //找到key的位置  
          var index = data.indexOf(findStr);  
          if (index == -1)  
              return null;  
          var subStr = data.substring(index +findStr.length);  
          var lastIndex = subStr.indexOf(";");  
          if (lastIndex == -1) {  
              return subStr;  
      } else {  
              return subStr.substring(0,lastIndex);  
      }  
      }  
  

  • 2.使用正则表达式+JSON

      function getKey(key) {  
          return JSON.parse("{\"" +document.cookie.replace(/;\s+/gim, "\",\"").replace(/=/gim, "\":\"") + "\"}")[key];  
      }  
  

• 清除cookie

    var name = null;  
    var pwd = null;  
    var now = new Date();  
    var path = "/";//可以是具体的网页  
    document.cookie= "name=" + name + ";expires=" + now.toUTCString()+ ";path=" + path;//姓名  
    document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码  

5.src与href

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

• 拓展
  <script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。

  <link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

6.link和@import的区别

• 相同点
  两者都是外部引用CSS的方式
• 不同点
  区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
  区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
  区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

7.javaScript之split与join的区别

split()用于分割字符串，返回一个数组
join()用于连接多个字符或字符串，返回值为一个字符串

8.JS阻止冒泡和取消默认事件(默认行为)

js冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。
使用event.preventDefault()可以取消默认事件

9.document.ready和onload的区别——

• 相同点
  JavaScript文档加载完成事件
• 不同点
  一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；
  二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

10.判断数据类型

1. typeof
2. instanceof
3. num.constructor==Number
4. Object.prototype.toString.call()

11.JavaScript原型，原型链 ? 有什么特点？

• 1.JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。

• 2.每个继承父函数的子函数的对象都包含一个内部属性proto。该属性包含一个指针，指向父函数的prototype。若父函数的原型对象的proto属性为再上一层函数。在此过程中就形成了原型链。

• 3.原型链实现了继承。原型链存在两个问题：a 包含引用类型值的原型属性会被所有实例共享。b 在创建子类型时，无法向超类型的构造函数中传递参数。

• 补充
  ?访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着proto这条链向上找，这就是原型链
  ?hasOwnProperty可以区分一个属性到底是自己的还是从原型中找到

• 原型的优势
  ?可以随意扩展
  ?可以重写继承的方法

12.闭包的特点：

• 闭包就是能够读取其他函数内部变量的函数。

全局变量和局部变量

1、函数内部可以读取函数外部的全局变量；在函数外部无法读取函数内的局部变量。
2、函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

闭包的缺点：

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

2）会改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

13.js数组类型中的常用方法

concat()
连接两个或更多的数组，并返回结果。
join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()
删除并返回数组的最后一个元素
push()
向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()
颠倒数组中元素的顺序。
shift()
删除并返回数组的第一个元素
slice()
从某个已有的数组返回选定的元素
sort()
对数组的元素进行排序
splice()
删除元素，并向数组添加新元素。
toSource()
返回该对象的源代码。
toString()
把数组转换为字符串，并返回结果。
toLocaleString()
把数组转换为本地数组，并返回结果。
unshift()
向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()
返回数组对象的原始值

14.列举可以哪些方面对前端开发进行优化

代码压缩、合并减少http请求，图片制作精灵图、代码优化

15.ajax详解

1.ajax?

• AJAX = 异步 JavaScript 和 XML。
• AJAX 是一种用于创建快速动态网页的技术。
• 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.ajax过程

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新

    //第一步，创建XMLHttpRequest对象
        var xmlHttp = new XMLHttpRequest();
        function CommentAll() {
        
        //第二步，注册回调函数
            xmlHttp.onreadystatechange =callback1;
            //{
            //    if (xmlHttp.readyState == 4)
            //        if (xmlHttp.status == 200) {
            //            var responseText = xmlHttp.responseText;
            //        }
            //}
        
        //第三步，配置请求信息，open(),get
            //get请求下参数加在url后，.ashx?methodName = GetAllComment&str1=str1&str2=str2
            xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?    methodName=GetAllComment", true);
            //post请求下需要配置请求头信息
            //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //第四步，发送请求,post请求下，要传递的参数放这
            xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
        }

        //第五步，创建回调函数
        function callback1() {
            if (xmlHttp.readyState == 4)
                if (xmlHttp.status == 200) {
                    //取得返回的数据
                    var data = xmlHttp.responseText;
                    //json字符串转为json格式
                    data = eval(data);
                    $.each(data,
                        function(i, v) {
                            alert(v);
                        });       
                }
        }

3.readyState生命周期

0. 当前请求未初始化 当前请求数据包已设置好但未初始化
1.建立和后台的链接open
2.请求已经发送   后台接收到请求 send
3.后台正在处理请求
4.后台已经响应，前端接收数据

4.Ajax中POST和GET的区别

Get和Post都是向服务器发送的一种请求，只是发送机制不同。

1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的。
2. 首先是"GET方式提交的数据最多只能是1024字节"，因为GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。注意这是限制是整个URL长度，而不仅仅是你的参数值数据长度。
3. GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题
   get请求和post请求在服务器端的区别:
4. 在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.

5.ajax优缺点

• (1).AJAX的优点
  <1>.无刷新更新数据。
  AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
  <2>.异步与服务器通信。
  AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
  <3>.前端和后端负载平衡。
  AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
  <4>.基于标准被广泛支持。
  AJAX 基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化 Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
  <5>.界面与应用分离。
  Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

• (2).AJAX的缺点
  <1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
  在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
  后 退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来 取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的Ajax技术解决了这个问题，在Gmail下 面是可以后退的，但是，它也并不能改变Ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐 藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
  但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，并与Ajax框架所要求的快速开发是相背离的。这是Ajax所带来的一个非常严重的问题。
  一 个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为 锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应 用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。
  <2>.AJAX的安全问题。
  AJAX 技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比 以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知 的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
  <3>.对搜索引擎支持较弱。
  对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
  <4>.破坏程序的异常处理机制。
  至 少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一 下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
  <5>.违背URL和资源定位的初衷。
  例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
  <6>.AJAX不能很好支持移动设备。
  一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。
  <7>.客户端过肥，太多客户端代码造成开发上的成本。
  编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。

6..AJAX注意点及适用和不适用场景

• (1).注意点
  Ajax 开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对 XMLHttpRequest的不恰当处理，都会使用户感到延迟，这是用户不希望看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来 告诉用户系统正在进行后台操作并且正在读取数据和内容。
• (2).Ajax适用场景
  <1>.表单驱动的交互
  <2>.深层次的树的导航
  <3>.快速的用户与用户间的交流响应
  <4>.类似投票、yes/no等无关痛痒的场景
  <5>.对数据进行过滤和操纵相关数据的场景
  <6>.普通的文本输入提示和自动完成的场景
• (3).Ajax不适用场景
  <1>.部分简单的表单
  <2>.搜索
  <3>.基本的导航
  <4>.替换大量的文本
  <5>.对呈现的操纵

7.浅谈域名的发散和收敛

当前，浏览器对同一域名的连接数是有上限的，
连接数：服务器同时进行的并行服务；
浏览器设置最大连接数的目的有二：
1、早期服务器脆弱，子啊处理高并发的时候一蹦
域名的发散（1）2000-2010 PC有线网
1）将同一个网站的不同数据分别存储在多个域名中。
2）音乐 贴吧 搜索
3）好处①提升访问速度
（2）防止DDOS攻击
PC端时代，为了解决服务器高并发压力，而产生的理念。
域名的收敛
移动端
2010--至今 移动端浏览器
2011-移动网络 2g 3g 4g 网速比有线网慢
一般移动端的网站域名个数在2-3个左右耗时最短
http请求的步骤：
1）DNS解析 时间用时最久
域名解析 顺序 com -> taobao.com -> www.taobao.com
4g网解析一个域名需要1,7s so DNS解析 时间用时最久
2）TCP三次握手
3）前后端连接后发送请求
4）后台处理请求
5）返回响应数据
6）四次挥手
7）渲染

8.工作原理

1.dns解析，2.tcp三次握手，3.ajax建立前后端连接，4.发请求，5.服务器处理请求，6.响应数据

16.十二栅格

• 原理
  十二栅格是一种响应式布局方式，它的大体思想是，将父元素的宽度等性的分成12栏，利用 @media 去给每一个元素在不同屏幕下设置为占据不同栏数宽度，
• 设置
  @media screen and (min-width: 1200px) /屏幕大于1200 大桌面/
  @media screen and (min-width: 992px) and (max-width: 1200px)/屏幕大于992 桌面/
  /屏幕大于768 平板/
  /超小屏幕768px 手机/

17.实例化，原型，构造函数关系

[站外图片上传中...(image-656bd5-1565946750119)]
三者的关系是，每个构造函数都有一个原型对象，原型对象上包含着一个指向构造函数的指针，而实例都包含着一个指向原型对象的内部指针。通俗的说，实例可以通过内部指针访问到原型对象，原型对象可以通过constructor找到构造函数。

18.处理异步的方法

promise./回调/aysnc awiat

19.跨域

• 原理同源协议
  域名 端口号 协议
• 解决跨越的方式
  1.JSONP
  2.CORS
  3.WebSocket
  4.postMessage

20.new 的时候都做了哪些？

?创建一个新的实例对象
?将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
?执行构造函数中的代码（为这个新对象添加属性）
?返回新对象。

21.继承方法

1.children.prototype=new person();
2.代码效率低，性能不好（特殊）
extend(person.prototype,children.prototype)function extend(obj1,obj2){
for(attr in obj1){
obj2[attr]=obj1[attr];
}
}

22.什么是面向对象

把客观对象抽象成属性数据或数据的相关操作，把内部细节和不相关的信息隐藏起来，把同一类数据和操作绑定在一起，封装成类，并且允许分成不同层次进行抽象，通过继承实现属性和操作的共享

• 特性
  1.封装
  ?把数据封装起来
  ?减少耦合，不该外部访问的不要让外部访问
  ?利于数据的接口权限管理
  ?es6 目前不支持，一般认为_开头的都会是私有的，不要使用
  2.继承
  继承可以摆公共的方法抽离出来，提高服用，减少冗(rong)余
  3.多态
  同一个接口可以不同实现
  ?保持接口的开放性和灵活性
  ?面向接口编程

23.什么是设计

1.按哪一种思路或者标准来实现功能
2.功能相同，可以有不同的设计方案
3.需求如果不断变化，设计的作用才能体现出来

• 2.2 SOLID 五大设计原则

24.理解作用域：

• 引擎
  从头到尾负责整个 JavaScript 程序的编译及执行
• 编译器
  负责语法分析及代码生成等脏活累活
• 作用域
  负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。

25.动画和过渡区别

• 相同点
  animation属性类似于transition，他们都是随着时间改变元素的属性值，
• 不同点
  1）动画不需要事件触发，过渡需要。
  2）过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个，不同关键帧可以循环播放
  3）过渡鼠标移出停止，动画一直执行不会受到影响
  4）过渡不需要名称，动画需要
  5）过渡只是把物体运动过程放快/慢，动画可以定义不同事件不同路径的各种效果

26.http常用状态码

• 常用
  500 内部服务器错误
  404 文件未找到
  403 禁止访问
  400 错误请求
  401 未经授权
  200 请求成功
• 不同分类
  • 1开头：（被接受，需要继续处理。）这一类型的状态码，代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束。
  • 2开头 （请求成功）这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。
  • 3开头 （请求被重定向）这类状态码代表需要客户端采取进一步的操作才能完成请求。通常，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 location 域中指明。
  • 4开头：（请求错误）这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。除非响应的是一个 HEAD 请求，否则服务器就应该返回一个解释当前错误状况的实体，以及这是临时的还是永久性的状 况。这些状态码适用于任何请求方法。浏览器应当向用户显示任何包含在此类错误响应中的实体内容。
  • 5开头：（服务器错误）这类状态码代表了服务器在处理请求 的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。除非这是一个HEAD 请求，否则服务器应当包含一 个解释当前错误状态以及这个状况是临时的还是永久的解释信息实体。浏览器应当向用户展示任何在当前响应中被包含的实体。

27.什么是javaScript

• 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JavaScript兼容于ECMA标准，因此也称为ECMAScript。
• 特点：
  一、简单性：
  二、动态性：
  三、跨平台性：
  四、安全性：

28.css3动画

@keyframes  规定动画。   3
animation   所有动画属性的简写属性，除了 animation-play-state 属性。 3

animation-name  规定 @keyframes 动画的名称。    3
animation-duration  规定动画完成一个周期所花费的秒或毫秒。 3 事件
animation-timing-function   规定动画的速度曲线。  3 ease  ease-in进入慢  ease-out出去慢  ease-in-out 进入出去慢
animation-delay 规定动画何时开始。   3  延迟
animation-iteration-count   规定动画被播放的次数。 3  infinite循环播放
animation-direction 规定动画是否在下一周期逆向地播放。   3 alternate 交替  alternate-reverse反向交替      normal正序  
animation-play-state    规定动画是否正在运行或暂停。  3 running 运行   paused 暂停
animation-fill-mode 规定对象动画时间之外的状态。(动画保持) backwards 默认回到第一帧 forwards 动画结束保持最后一帧

/* 透视距离，物体越远显示越小 */
            ！！！/* perspective: 800px; */
            /* 透视基点     水平，垂直*/
            /* perspective-origin: 186px 112px; */
 animation-fill-mode: forwards; 
        /* backwards 默认回到第一帧 */
        /* 动画结束保持最后一帧 */
transform-origin: left; 基点
 animation-delay: 1s;延迟加载

29.弹性盒子

#### 父类设置
display:flex/inline-flex
    flex:弹性布局
    inline-flex 内联块级弹性布局
控制主轴方向
    flex-direction:row/column/row-reverse/column-reverse 竖列反向
                    
控制换行
    flex-wrap:
        nowrap 不换行
        wrap 换行
        wrap-reverse

可用替换成  （控制主轴方向，控制换行）      
flex-flow:row wrap;

控制主轴排序方式(对齐)
    jistify-content
        flex-start 左对齐（靠上）
        flex-end 右对齐 （靠下）
        center 居中
        space-between 两端靠边中间平分（项目之间间隔相等）
        space-around 两侧间隔相等，（项目边距与边框间隔大一倍）

控制轴线之间的距离
    algin-content
        flex-start 左对齐（靠上）
        flex-end 右对齐 （靠下）
        center 居中
        space-between 两端靠边中间平分（项目之间间隔相等）
        space-around 两侧间隔相等，（项目边距与边框间隔大一倍）
        stretch 拉伸至父级
    align-items
        flex-start 上对齐
        flex-end  下对齐
        center 中对齐 
        stretch 不设高度或为auto是充满整屏
        baseline 根据基线  和flex-start基本一致

#### 子类设置

    flex 设置宽度比例
    flex:1/2/3/4
    order排序
    1234
    可以设置order:-1;提到前面

用弹性盒子不生效的属性
float：浮动
清除浮动
vertical-align

30.@import与link

1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。

31.数组/对象的深拷贝

• 数组深拷贝
  slice 方法实现数组的深拷贝
  concat 方法实现数组的深拷贝
  [..arr2]
• 对象
  ES6扩展运算符实现数组的深拷贝
  var obj2 = JSON.parse(JSON.stringify(obj))
  { ...obj2 }

32.遍历对象

• 1.Object.keys()
  var obj = {'0':'a','1':'b','2':'c'};
  Object.keys(obj).forEach(function(key){
  console.log(key,obj[key]);
  });
• 2.、使用for..in..遍历
• 3.使用Object.getOwnPropertyNames(obj)遍历 返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).
  var obj = {'0':'a','1':'b','2':'c'};
  Object.getOwnPropertyNames(obj).forEach(function(key){
  console.log(key,obj[key]);
  });
• 4、使用Reflect.ownKeys(obj)遍历
  返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.

33.jquery优化的方法

1. 使用#id去寻找element
2. 缓存jq对象
3. 限制直接对DOM操作
4. 采用jQuery内部函数data()来存储状态。
    存储：$("#home").data("name","value");
    调用：$("#home").data("name");
5. 在class前面使用tag
6. 更好的利用链式结构

34.vue2.0中的$router 和 $route的区别

1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
举例：history对象
router.replace({path:'home'});//替换路由，没有历史记录
2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等
我们可以从vue devtools中看到每个路由对象的不同

35.vue核心

vue有两大核心: 数据驱动 和 组件

36.在vue中监听路由变化的函数

1.通过 watch
2.通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

37.事件的阶段

-event.eventPhase

• 1捕获阶段 从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）
• 2目标阶段 触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。
• 3冒泡阶段 从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为 false，则调用该事件处理程序。

38.vue dta为什么是函数

而当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。
 vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。
上面解释了data不能为对象的原因，这里我们简单说下data为函数的原因。data为函数，通过return 返回对象的拷贝，致使每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值。

39.SPA （单页应用程序）

• 单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

40.页面生成过程

1、DNS服务器通过域名查找对应的web 服务器ip地址；
2、浏览器访问web服务器；
　 这里涉及到客户端与服务器的tcp 三次握手与四次挥手，可以参考上篇博文《TCP的三次握手(建立连接）与 四次挥手(关闭连接）》；
3、服务器处理完成返回html;
4、浏览器解析、加载页面

解析html 构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树 ：
解析：
　　1、将HTML构建成一个DOM树（DOM = Document Object Model 文档对象模型），DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
　　2、将CSS解析成CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
　　3、根据DOM树和CSSOM来构造 Rendering Tree（渲染树）。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。

4.有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。
　　5.下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置 layout render tree。
　　6.再下一步就是绘制，即遍历render树，并使用浏览器UI后端层绘制每个节点。

41.html渲染过程

1．解析HTML文件，创建DOM树
2．解析CSS,形成CSS对象模型
3．将CSS与DOM合并，构建渲染树（renderingtree）
4．布局和绘制

42.性能优化中重绘、重排：

（1）Reflow（回流/重排）：当它发现了某个部分发生了变化影响了布局，渲染树需要重新计算。
（2）Repaint（重绘）：改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排；
Reflow要比Repaint更花费时间，也就更影响性能。所以在写代码的时候，要尽量避免过多的Reflow。

reflow的原因：

（1）页面初始化的时候；
（2）操作DOM时；
（3）某些元素的尺寸变了；
（4）如果 CSS 的属性发生变化了。

43.defer、async 区别

defer、async都是异步下载，但是执行时刻不一致；

• 相同点：
  加载文件时不阻塞页面渲染；
  使用这两个属性的脚本中不能调用document.write方法；
  允许不定义属性值，仅仅使用属性名；
• 不同点：
  html的版本html4.0中定义了defer，html5.0中定义了async；这将造成由于浏览器版本的不同而对其支持的程度不同；
  每一个async属性的脚本都在它下载结束之后立刻执行，同时会在window的load事件之前执行，所以就有可能出现脚本执行顺序被打乱 的情况；
  每一个defer属性的脚本都是在页面解析完毕之后，按照原本的顺序执行，同时会在document的DOMContentLoaded之前执行

44.vue常用修饰符

• 一。v-model的修饰符
  1..lazy 当焦点离开文本框时
  2.number
  3.trim
  该修饰符用来自动过滤字符串前后的空字符。
• 二、v-on的修饰符
  .stop
  .prevent
  .one 该修饰符表示绑定的事件只会被触发一次
  .self 该指令只当事件是从事件绑定的元素本身触发时才触发回调

45.react生命周期??

46.vue路由钩子

• 全局路由钩子： beforeEach afterEach

    router.beforeEach((to, from, next) => {
    //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
    console.log('beforeEach')
    console.log(to,from)
    //
    next()
    })
    //
    router.afterEach((to, from) => {
        //会在任意路由跳转后执行
    console.log('afterEach')
    })

• 单个路由钩子：
  只有beforeEnter，在进入前执行，to参数就是当前路由

     routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

• 路由组件钩子：

` beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

47.获取数据类型的方法

typeof
instanceof
num.constructor==Number
Object.prototype.toString.call()

48.bfc 块格式化上下文

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

• 特点
  根元素或包含根元素的元素
  浮动元素（元素的 float 不是 none）
  绝对定位元素（元素的 position 为 absolute 或 fixed）
  行内块元素（元素的 display 为 inline-block）
  表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  overflow 值不为 visible 的块元素
  display 值为 flow-root 的元素
  contain 值为 layout、content或 strict 的元素
  弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  网格元素（display为 grid 或 inline-grid 元素的直接子元素）
  多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
  块格式化上下文包含创建它的元素内部的所有内容.

49.跨域

1.什么是跨域

    由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况：
    网络协议不同，如http协议访问https协议。
    端口不同，如80端口访问8080端口。
    域名不同，如qianduanblog.com访问baidu.com。
    子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。
    域名和域名对应ip,如www.a.com访问20.205.28.90.

2.跨域请求资源的方法：

(1)、porxy代理

• 定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
• 实现方法：通过nginx代理；
• 注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

• 定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。
• 使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下：

    res.writeHead(200, {
        "Content-Type": "text/html; charset=UTF-8",
        "Access-Control-Allow-Origin":'http://localhost',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
    });

(3)、jsonp

• 定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。
• 特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。
  实例如下：

    <script>
        function testjsonp(data) {
        console.log(data.name); // 获取返回的结果
        }
    </script>
    <script>
        var _script = document.createElement('script');
        _script.type = "text/javascript";
        _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
        document.head.appendChild(_script);
    </script>

• 缺点：
  　　1、这种方式无法发送post请求（这里）
  　　2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合 超时时间来判定。

50.隐藏内容

• display:none
• visibility:hidden
• overflow:hidden

    <div style="display:none;">我不占地儿，你看不见我；</div>
    <div style="visibility:hidden;">我占了地儿，你也看不见我；</div>
    <div style="width:120px; height:20px; overflow:hidden;">我占的地儿太多了你就看不见我的尾巴了。。。。。</div>

51.移动端前端适配方案

2.Flex弹性布局
3.rem + viewport 缩放
4、rem实现

什么函数永远不会去查找原型

object.hasOwnProperty(proName)

52.js字符串操作

concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。

indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。

charAt() – 返回指定位置的字符。

lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 。

match() – 检查一个字符串是否匹配一个正则表达式。

substr() 函数 -- 返回从string的startPos位置，长度为length的字符串

substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。

slice() – 提取字符串的一部分，并返回一个新字符串。

replace() – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。

search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。

split() – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。

length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。

toLowerCase() – 将整个字符串转成小写字母。

toUpperCase() – 将整个字符串转成大写字母。

53.操作节点

1）创建新节点

createDocumentFragment() //创建一个DOM片段
　　createElement() //创建一个具体的元素
　　createTextNode() //创建一个文本节点

2）添加、移除、替换、插入
　　appendChild() //添加
　　removeChild() //移除
　　replaceChild() //替换
　　insertBefore() //插入

3）查找
　　getElementsByTagName() //通过标签名称
　　getElementsByName() //通过元素的Name属性的值
　　getElementById() //通过元素Id，唯一性

54.写出3个使用this的典型应用

1）、在html元素事件属性中使用，如：

<input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

（2）、构造函数

    function Animal(name, color) {
    　　this.name = name;
    　　this.color = color;
    }

（3）、input点击，获取值

<input type="button" id="text" value="点击一下" />
<script type="text/javascript">
    var btn = document.getElementById("text");
    btn.onclick = function() {
        alert(this.value);    //此处的this是按钮元素
    }
</script>

(4)、apply()/call()求数组最值

var  numbers = [5, 458 , 120 , -215 ]; 
var  maxInNumbers = Math.max.apply(this, numbers);  
console.log(maxInNumbers);  // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 
console.log(maxInNumbers);  // 458

54.比较typeof与instanceof？

• 相同点
  JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。

• 不同点
  typeof的定义和用法：返回值是一个字符串，用来说明变量的数据类型。
  Instanceof定义和用法：instanceof 用于判断一个变量是否属于某个对象的实例。

  (1)、typeof 一般只能返回如下几个结果：number,boolean,string,function,object,undefined。

  (2)、typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错。

  (3)、对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。

  a instanceof b?alert("true"):alert("false"); //a是b的实例？真:假

55.全局变量和局部变量

• 特点
  1、函数内部可以读取函数外部的全局变量；在函数外部无法读取函数内的局部变量。
  2、函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

56.谈谈垃圾回收机制方式及内存管理

一.回收机制
1、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

2、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

二。垃圾回收策略：标记清除(较为常用)和引用计数。
标记清除：-

定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。

到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。

引用计数：

定义和用法：引用计数是跟踪记录每个值被引用的次数。

基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

57.在JavaScript中实现继承的方法：

• 面向对象的基本特征有：封闭、继承、多态。

• 在JavaScript中实现继承的方法：

1. 原型链（prototype chaining）
2. call()/apply()
3. 混合方式(prototype和call()/apply()结合)
4. 对象冒充

58.从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存

59.数组的结构赋值和对象的区别

• 解构赋值，也称“模式匹配”，即赋值的左右两边模式相同，则等号右边的值赋给左边的变量。
  数组的解构赋值：严格按照顺序；
  对象的解构赋值：找同名属性，顺序不重要：

60.Promise概念和常用api

• 概念
  Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
• 作用
  Promise 是异步编程的一种解决方案，主要用来解决回调地域的问题，可以有效的减少回调嵌套。
• 特点
  (1)对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
  (2)一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。
• 缺点
  (1)无法取消Promise，一旦新建它就会立即执行，无法中途取消。和一般的对象不一样，无需调用。
  (2)如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
  (3)当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）
• 基本Api
  (1)new Promise
  (2)PromiseObj.then(resolveFn,rejectFn)
  resolveFn：就是Promise对象成功的回调处理函数，指向 resolve
  rejectFn：就是Promise对象失败的回调处理函数
  (3)Promise.all()
  (4)PromiseObj.catch()
  (5)PromiseObj.resolve()
  将一个值，数字，字符串...转换为Promise对象
  (6)PromiseObj.reject()

-链接
https://blog.csdn.net/songlf521/article/details/55670977

61.数组对象

• 属性
  constructor 返回对创建此对象的数组函数的引用。
  length 设置或返回数组中元素的数目。
  prototype 使您有能力向对象添加属性和方法。

• 方法
  concat() 连接两个或更多的数组，并返回结果。

  join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

  pop() 删除并返回数组的最后一个元素。

  shift() 删除并返回数组的第一个元素

  push() 向数组的末尾添加一个或更多元素，并返回新的长度。

  unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

  reverse() 颠倒数组中元素的顺序。

  slice() 从某个已有的数组返回选定的元素

  sort() 对数组的元素进行排序

  splice() 删除元素，并向数组添加新元素。

  toSource() 返回该对象的源代码。

  toString() 把数组转换为字符串，并返回结果。

  toLocaleString() 把数组转换为本地数组，并返回结果。

  valueOf() 返回数组对象的原始值

62.你所了解到的Web攻击技术

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

63.js基本类型与包装类的区别

• 基本类型：Undefined,Null,Boolean,Number,String
• 基本包装类型 boolean string Number

    //我们平常写程序的过程：
    var str = 'hello'; //string 基本类型
    var s2 = str.charAt(0); //在执行到这一句的时候 后台会自动完成以下动作 ：
    （ 
    var _str = new String('hello'); // 1 找到对应的包装对象类型，然后通过包装对象创建出一个和基本类型值相同的对象
    var s2 = _str.chaAt(0); // 2 然后这个对象就可以调用包装对象下的方法，并且返回结给s2.
    _str = null;  //    3 之后这个临时创建的对象就被销毁了， str =null; 
    ） 
    alert(s2);//h 
    alert(str);//hello    

1.引用类型和基本包装对象的区别:生存期
引用类型所创建的对象，在执行的期间一直在内存中，而基本包装对象只是存在了一瞬间。
2.添加属性或方法
基本包装对象的原型下面添加，每个对象都有原型

    //给字符串添加方法  要写到对应的包装对象的原型下才行
    var str = 'hello';
    String.prototype.last= fuction(){ 
        return this.charAt(this.length);
    }; 
    str.last(); // 5 执行到这一句，后台依然会偷偷的干这些事
    ｛ 
        var _str = new String('hello');// 找到基本包装对象，new一个和字符串值相同的对象，
        _str.last();  // 通过这个对象找到了包装对象下的方法并调用 
        _str =null; //  这个对象被销毁
    ｝

64.严格模式

ECMAScript 5的严格模式是采用具有限制性JavaScript变体的一种方式，从而使代码显示地 脱离“马虎模式/稀松模式/懒散模式“（sloppy）模式。

• 特点
  1.严格模式通过抛出错误来消除了一些原有静默错误。
  2.严格模式修复了一些导致 JavaScript引擎难以执行优化的缺陷：有时候，相同的代码，严格模式可以比非严格模式下运行得更快。
  3.严格模式禁用了在ECMAScript的未来版本中可能会定义的一些语法。
• 开启
  'use strict'

65.预处理与预编译

• js执行的两个阶段
  编译阶段: 编译阶段就是我们常说的JavaScript预解释（预处理）阶段，在这个阶段JavaScript解释器将完成把JavaScript脚本代码转换到字节码
  执行阶段: 在编译阶段JavaScript解释器借助执行环境把字节码生成机械码，并从上到下按顺序执行
  栈内存：用来提供一个供JS代码执行的环境，即作用域（全局作用域/私有的作用域）
  堆内存：用来存储引用数据类型的值。对象存储的是属性名和属性值，函数存储的是代码字符串。
• 预编译
  预解释:JavaScript代码执行之前，浏览器首先会默认的把所有带var和function的进行提前的声明或者定义
• 预处理
  1. 预处理阶段将变量保存在window域中，会扫描用var操作符声明的变量以及用函数声明的方式声明的函数指针。因此会产生变量提前和函数声明提前的效果。
  2. 如果声明发生冲突。那么在预处理的时候遵循两个规则：a. 先扫描函数，再扫描var声明的变量；b. 如果与之前的声明发生冲突的是函数，则覆盖；如果是var声明的变量，则忽略

66.touches targetTouches changedTouches

touches：当前屏幕上所有触摸点的列表；
targetTouches：当前对象上所有触摸点的列表；
changedTouches：涉及当前（引发）事件的触摸点的列表：

67.外边距重叠

• 什么是外边距重叠
  margin-collapse

• 重叠结果
  注意他只发生在垂直上下的位置，左右位置无效果，两个值取最大的那个，小数被包在里面；
  当都为负数的时候，取绝对值大的那个，
  两个外边距一正一负的时候，结果是相加的值；

• 外边距不重叠的情况。

  水平margin永远不会重合
  设置了overflow属性(visible除外)的元素和它的子元素之间的margin不会重叠
  设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，和子元素之间也不重叠
  设置了display:inline-block的元素，垂直margin不会重叠，和子元素之间也不重叠
  根元素(如html)与body的margin不会重叠

• 防止外边距重叠的方法。

  元素绝对定位postion:absolute;一般用在内层元素
  内层元素 加float:left;或display:inline-block;
  外层元素用padding增加边距
  外层元素设置overflow:hidden;
  内层元素透明边框border:1px solid transparent;

68.超出省略

xxx{
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

69.json Xml区别

• 定义介绍
  (1).XML定义
  扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。
  XML是标准通用标记语言 (SGML) 的子集，非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

  (2).JSON定义
  JSON(JavaScript Object Notation)一种轻量级的数据交换格式，具有良好的可读和便于快速编写的特性。可在不同平台之间进行数据交换。JSON采用兼容性很高的、完全独立于语言文本格式，同时也具备类似于C语言的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)体系的行为。这些特性使JSON成为理想的数据交换语言。
  JSON基于JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一个子集。

• 优缺点
  (1).XML的优缺点
  <1>.XML的优点
  　　A.格式统一，符合标准；
  　　B.容易与其他系统进行远程交互，数据共享比较方便。
  <2>.XML的缺点
  　　A.XML文件庞大，文件格式复杂，传输占带宽；
  　　B.服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；
  　　C.客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；
  　　D.服务器端和客户端解析XML花费较多的资源和时间。

  (2).JSON的优缺点
  <1>.JSON的优点：
  　　A.数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
  　　B.易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取；
  　　C.支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
  　　D.在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；
  　　E.因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。
  <2>.JSON的缺点
  　　A.没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；
  　　B.JSON格式目前在Web Service中推广还属于初级阶段。

• 3.XML和JSON的优缺点对比
  (1).可读性方面。
  JSON和XML的数据可读性基本相同，JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，XML可读性较好些。
  (2).可扩展性方面。
  XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。
  (3).编码难度方面。
  XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。
  (4).解码难度方面。
  XML的解析得考虑子节点父节点，让人头昏眼花，而JSON的解析难度几乎为0。这一点XML输的真是没话说。
  (5).流行度方面。
  XML已经被业界广泛的使用，而JSON才刚刚开始，但是在Ajax这个特定的领域，未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous Javascript and JSON)了。
  (6).解析手段方面。
  JSON和XML同样拥有丰富的解析手段。
  (7).数据体积方面。
  JSON相对于XML来讲，数据的体积小，传递的速度更快些。
  (8).数据交互方面。
  JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
  (9).数据描述方面。
  JSON对数据的描述性比XML较差。
  (10).传输速度方面。
  JSON的速度要远远快于XML。

• https://www.cnblogs.com/SanMaoSpace/p/3139186.html

70.简述异步与同步

同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

71.什么叫优雅降级和渐进增强？

• 概念
  渐进增强 progressive enhancement：
  针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

  优雅降级 graceful degradation：
  一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

• 区别：
  a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
  b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
  c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

72.浏览器访问一个网站所经历的步骤？

页面加载---》DNS解析--》 发起tcp请求----浏览器向服务器发起http三次握手--》发起http请求--》服务器处理收到请求--》浏览器收到http的响应--》浏览器渲染--》网页面静态资源加载

73.vue生命周期

新增了激活和禁用activated 与created类似 在组件上面包裹一层keep-alive组件
Deactivated 与destory类似 不会被创建和销毁
在最早发请求的时候在created时候发请求
UpDated
Mounted
大致：创建、查找与处理（找到组件并渲染）、挂载（插入）、更新（重新渲染并插入）、销毁（卸载所有）

详细：1.1.创建vue对象，初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。注意看下：此时还是没有el选项，到created实例对象已经完成了配置，dom还没有渲染
2.created之后，，实例对象开始对参数进行解析，el选项。此时el为undefined, 如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期 ，进入编译过程；继续找template如果有在template模板上编译render函数，如果没有模板，在outhtml上编译render函数，如果template与render都没有，则生命周期结束。
3.挂载部分mounted,此时增添 el成员，替换dom元素，
4.更新 更新回调，将旧的数据替换新的数据，在虚拟的dom中重新渲染，updated更新后钩子， data发生改变，真正dom结构被彻底替换，页面发生变化，
5.销毁部分：开始销毁vue实例之前会提示是否删除，销毁所有的属性，最后销毁完毕，生命周期结束

74.前端鉴权：值得是什么？

1.http base authentication（基本授权）
2.Session-cookie
3.Token验证（基于JWT Jwt实际上是一个字符串，他是由三部分组成的，头部，载荷，签名）
4.OAuth(开发授权)

75.伪类数组转为数组的方法两种：

Array.prototype.slice.call(伪数组)
Array.from(伪数组)

76.Es6数组的方法

filter:过滤 返回的是一个条件为真的数组，不操作原数组
map: 映射；把一个数组映射为另一个新数组；一个参数；
Reduce 收敛 两个参数；reduce(callback，prev) 返回一个数值
特点：1.return 后面的值会作为下一次的prev

77.JS打开新窗口防止被浏览器阻止的方法：

第一种、使用原生javascript的window.open()方法（大部分情况下会被浏览自阻止）
第二种、模拟表单(form)提交，原理是指定表单的action为想要打开的URL地址，target设置为"_blank"
第三种、模拟超链接(<a>)被点击

78.Websocket (聊天软件或者单机游戏 )

WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据.
HTML5带来的新协议，通过类似HTTP的请求建立连接。主要目的是可以获取服务端的推送。
原来的方式可能是使用long poll（即不中断连接一直等待数据），或者是ajax轮询的方式（每隔一段时间发送请求，建立连接，询问是否有新的数据）。这两种方式的缺点在于long poll的阻塞，以及ajax轮询的冗余连接。
WebSocket的设计思想有点类似于回调，在发送请求升级服务端的协议并收到确认信息后，服务端一有新的信息/数据就会主动推送给客户端，至于要一次HTTP握手便可以建立持久连接

79.网页布局大致分为三种

1.早期使用的table布局；2.使用div+css布局3.bootstrap提供扥栅格布局系统

80.vue组件封装过程？

1.使用vue.extend()创建组件2.使用vue.component()方法注册组件3.如果子组件需要使用数据，可以在props中接收定义4.子组件修改好数据后，想把数据传递给父组件，可以使用emit方法
Vue组件的功能：
能把页面抽离成多个 相对独立的模块
实现代码块的复用，提高开发效率和代码质量，使代码更易维护
Vue 的定义：
组件component是vue.js最强大的功能之一
组件可以扩展html元素，封装可复用的代码
在较高层面上，组件是自定义元素，vue。Js的编辑器为他添加了特殊功能
组件也可以用is特性进行扩展的原生的html元素
Vue组件也是vue实例，可以接收相同的选项对象，提供相同的生命周期钩子

异步组件实现的本质是2次渲染，先渲染成注释节点，当组件加载成功后，在通过forceRender重新渲染;
高级异步组件可以通过简单的配置实现loading resolve reject timeout 4种状态

81.jq迭代器

$.each（）典型的迭代，通过each我们可以额外传入function，然后来对所有的item进行迭代操作；迭代器的特点：封装实现，然后迭代器的聚合对象不用关心迭代的过程，从而符合SRP原则。
Jq的链式调用：jq的方法都是挂载在原型上的。如果我们每次在内部方法返回this，也就是返回实例对象，那么我们就可以继续调用原型上的方法了，节省代码量提高效率

82.阻止a标签跳转

# / ：javascript; / return false / preventdefault

83.对象的属性

①hasOwnProperty 查看某一属性是否为对象的私有属性
②isPrototypeOf 当前对象是否为该对象的原型
③propertyIsEnumerable 对象属性是否可枚举（遍历），如果是私有属性就可以，如果是继承属性就不可以
④toLocalString toString 将其类型转为字符串
⑤valueOf 获取对象的原始值
⑥proto 是一个非标准属性
⑦getPrototypeOf(对象) 标准 获取原型

84.数组降维

Apply/concat/双层for循环

85.Bom对象的方法？

Location History navigator screen document window

86.js延迟加载的方法？

async/defer
动态创建DOM方式
按需异步载入js
setTimeout

87.defer与async的区别？

标签中如果不加defer或async,就同步执行 ;
加async《script async src=‘aaa.js’/》外部js文件会和当前代码同时加载并执行;
上述代码中将async换为defer,外部js文件的加载就会和当前代码同时执行，但是等当前代码;执行完，才能执行外部js;

88.ajax有什么缺点

1.数据类型需要手动转换
2.操作繁复
3.对移动设备兼容性不好
4.原生js各大浏览器兼容性不好
5.无数据刷新重载页面

89.promise和async的区别

·async/await是写异步代码的新方式，以前的方法有回调函数Promise。
·async/await是基于Promise实现的，它不能用于普通的回调函数。
·async/await与Promise一样，是非阻塞的。
.async/await代码更简洁 代码没有回调

90.减少页面加载时间的方法？

减少http请求/减少本地图片/压缩代码/域名的发散/减少DOM操作/懒加载

91.jq的优化方法？

设置入口函数/尽量缩短链式编程的链/$(‘div.aa’)在class前面加标签名，查找块/限制对DOM的操作/总是用#id去寻找element/缓存jq对象

91.jq对象和dom对象的区别？

jq里面可以隐士迭代 链式调用 $(‘对象’)
Dom只能用操作js的方法

92.Vue的钩子函数 ？

beforeEach afterEach beforeRouterleave beforeRouterUpdata beforeRouterEnter beforeEnter

93.css3的函数有哪些？

Animation() rotate() skew() url() rgba()

94.js的内置对象、本地对象、宿主对象？

Js的内置对象：Math\global 不用new
Js的本地对象：需要new的 Object/Date/数组/字符串/函数/布尔 需要new实例
Js的宿主对象：window\bom对象\dom对象
Global整个js无主的值和属性，都是global对象的属性，
parseInt parseFloat isNan NaN undefined Object Number String
global对象只是一个概念，因此不可见

95.一个网页的渲染过程？

DNS解析（在网址上写入域名，传到DNS服务器，缓存中如果有的话通过迭代进行查询，咩有再向服务器请求，最后转为IP地址，）
发起tcp/ip 请求 执行三次握手过程
浏览器发送http请求
负载均衡 判断请求什么数据，从而使用对应的服务器来响应数据
服务器响应
四次挥手
渲染

96.es6新增的内容

箭头函数、Set let const、解构赋值、扩展运算符、promise、async/await、class类（继承）、reduce、Map、map、filter

97..vue自定义指令的方法、钩子函数以及参数？

自定义指定方法：directive\directives
1)全局指令
组件页面里面 <input v-focus=’’>
Main.js文件中写
Vue.directive(‘focus’，{
inserted:function(el){
el.focus()
}
})
2）局部指令
组件里面
export default{
directives：{
focus:{
inserted:function(el){
el.focus()
}
}
}
钩子函数：bind\inserted\update\componentUpdated\unbind

98.js-什么是立即执行函数？有什么作用？

1.创建一个匿名函数并执行
2.创建一个独立的作用域，避免全面局污染

99.纯函数

• 作用
  纯函数就是其中一种,它也是函数式编程中一部分。那它为什么可以起到减少bug的作用呢
• 原则
  变量都只在函数作用域内获取, 作为的函数的参数传入
  不会产生副作用(side effects), 不会改变被传入的数据或者其他数据
  相同的输入保证相同的输出(same input -> same ouput)

100.jquety动画xi

$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下0值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

101.自定义事件

1. Event() 构造函数, 创建一个新的事件对象 Event

2. CustomEvent() 创建一个自定义事件
　　3. document.createEvent() 创建一个新的事件（Event），随之必须调用自身的 init 方法进行初始化。
https://www.cnblogs.com/shapeY/p/7923353.html

102.单页面应用和多页面应用区别

103.ajax和flash区别

Ajax的优势
1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发 
可搜索性 
普通的文本网页会更有利于SEO。文本内容是搜索引擎容易检索的，而繁琐的swf字节码却是搜索引擎不愿触及的。虽然Google等一些大型的搜索引擎可以检索SWF内部的内容，但是仍然有很多麻烦存在。 
开放性 
Flash常年以来被Macromedia看的很死。包括Flex、FMS等辅佐技术一直都需要昂贵的安装、维护费用。而JS则没有这样的麻烦。没有人愿意承担法律和版权的风险。 
费用 
Flash开发是很昂贵的，因为FlashIDE等环境都是要收费的．而Ajax则不同．虽然有一些便宜的生成swf的工具，但是他们的工能实在无法满足复杂需求。 
易用性 
Ajax程序有更好的易用性。由于中间有一层Flashplayer代理层，因此许多辅助功能无法被Flash灵活利用。而且Flash在一些方面有着不好的口碑。比如弹出广告、比如恶意代码。 
（awflasher.com个人认为这八成是乱上xx网站造成的） 
易于开发 
人们开发复杂的Ajax和Flash应用程序时，都会借助一些高级的开发工具。普遍来说，Ajax的开发包比Flash简便、容易。

Ajax的劣势
（1）AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性. 
（2）AJAX只是局部刷新,所以页面的后退按钮是没有用的. 
（3）对流媒体还有移动设备的支持不是太好等

Flash的优势
1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度 
多媒体处理 
Flash在音频、视频等多媒体领域相比HTML有绝对的优势。现在几乎所有的网站都包含有Flash内容。 
兼容性 
兼容性好：由于通过了唯一的FlashPlayer“代理”。人们不必像调试JS那样，在不同的浏览器中调试程序。 
矢量图型 
这是Flash最大的优势，同样处在这一领域的SVG、Canvas element以及Direct完全不能与Flash相比。 
客户端资源调度 
Flash能够更容易的调用浏览器以外的外部资源。比如摄像头、麦克风等。然而这是普通的HTML无法完成的。但是这也许是一个缺点

Flash的优势
（1）二进制格式 
（2）有效性交互差 
（3）flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间 
（4）商用体验表现能力差 
（5）成本高 
（6）不适合企业网站 
（7）必须插件支持 
（8）更新维护复杂 
（9）可扩展性差 
（10）搜索引擎不友好

104.箭头函数与普通函数的区别

105.$冲突

106.浏览器样式兼容

CSS常见兼容性问题及解决方案：

1. 上下margin重合问题：
   问题描述：相邻的margin-left和margin-right是不会重合的，但是相邻的块级元素margin-top 和margin-bottom会产生重合。

解决方案：统一设置margin-top或者 Marin-bottom，不要混合使用。

2.超链接访问后，hover样式不显示：

问题描述：同时设置a:visited和a:hover样式后，超链接访问后，hover的样式不显示，

问题原因：标签中的样式顺序出现了错误。

解决方案：将他们的样式排序为 a:link , a:visited , a:hover , a:active .

3.行内元素上下margin及padding不拉开元素间距的问题：

问题描述：行内元素的margin和padding属性很奇怪，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。

解决方案：将行内元素display设置为block即可解决

4.不同浏览器的标签默认的外间距和内间距不同

问题描述：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：在CSS文件开头用通配符*来设置各个标签的内外边距是0。

{

margin: 0px;

padding:0px;

}

5.ul在浏览器中不同表现，具有默认边距在不同浏览器中显示的位置不同：

问题描述：在IE中，ul的默认边距是margin，在Firefox中，ul的默认边距是padding。

解决方案：设置其属性 padding：0px ; Margin : 0px;

6.按钮默认大小不一：

问题描述：不同浏览器的默认按钮大小可能不同。

解决方案：用a标签来模拟按钮，添加样式；如果按钮是一张背景图片，那么直接给按钮添加背景图；

7.图片间默认又间距问题：

问题描述：几个img标签（行内标签）放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

解决方案：使用float属性为img布局

8.双倍浮动问题：

问题描述：块状元素float后，有添加了横向的margin，在IE6下比设置的值要大。

解决方案：给float标签添加display：inline，将其转换为行内元素

9.设置较小高度的容器（小于10px），在IE6下不识别小于10px的高度

问题描述：IE8之前的浏览器都会给标签一个最小默认的行高的高度，一般会出现在设置小圆角背景标签里。

解决方案：给容器添加overflow：hidden；或者设置行高line-height 小于你设置的高度。

10.容器不扩展问题：

问题描述：div嵌套结构中，外层的高度并没有随着子容器的高度自动扩展，却是形成了一条线。

问题原因：因为当子容器成为浮动元素后，并脱离了文档流，父容器认为自己内容为空而导致的。

解决问题：在容器的末尾加入个清理浮动的div。 在网页中的任何地方，当遇到容器不扩展时，只需加入以下代码段，便能修复问题。

https://cloud.tencent.com/developer/news/323781

逻辑分析题

1.判断一个字符串中出现次数C最多的字符，统计这个次数

    var str = 'asdfssaaasasasasaa';
    var json = {};
    for (var i = 0; i < str.length; i++) {
        if(!json[str.charAt(i)]){
        json[str.charAt(i)] = 1;
        }else{
        json[str.charAt(i)]++;
        }
    };
    var iMax = 0;
    var iIndex = '';
    for(var i in json){
        if(json[i]>iMax){
            iMax = json[i];
            iIndex = i;
        }
    }        
    console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

2.编写一个方法 去掉一个数组的重复元素

    方法一：

var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
   if( !obj[arr[i]] ){
      obj[arr[i]] = 1;
      tmp.push(arr[i]);
   }
}
console.log(tmp);
结果如下： [0, 2, 3, 4]

 方法二：

var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
    if(arr2.indexOf(arr[i]) < 0){
        arr2.push(arr[i]);
    }
}
console.log(arr2);
结果为：[2, 3, 4, 5, 6]

 方法三：

var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
return self.indexOf(element) === index;
});
console.log(arr2);

结果为：[2, 3, 4, 5, 6]