index

面试题总结 __123

一、简述一下你对HTML语义化的理解？

1.用正确的标签做正确的事情。

2.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

3.即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

4.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

5.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

二、HTML5、CSS3里面都新增了那些新特性？

1.HTML：

新的语义标签 ~ ~ 本地存储 ~ ~ 离线存储 ~ ~ Websocket

2.CSS:

2d，3d变换 ~ ~ Transition,animation ~ ~ 媒体查询 ~ ~ 新的单位（rem,vw，vh等）

三、css清除浮动的方式

1.最常用，最好的：

 .clearfix:after {
      content: ".";
      display:block;
      height:0;
      clear:both;
      visibility:hidden;
}
 .clearfix { zoom:1; }

2.给父元素添加：

overflow:hidden;

3.在浮动的元素最后添加一个块元素：

clear：both；

四、transition和animation的区别

transition是过渡，animation是动画。

transition只能从一种状态过渡到另外一种状态，animation可以定制复杂动画，可以定义动画的区间等。

transition必须通过一些行为才能触发（js或者伪类来触发），animation的话不需要直接就可以触发。

五、inline-block间距解决问题：

给父元素添加：font-size=0；

六、简述Ajax实现流程及优缺点

Ajax实现流程：

1.创建实例化对象：

var xhr=new XMLHttpRequest();

2.向服务器发送请求：

open()  //规定GET/POST请求的类型、URL 以及是否异步处理请求。
send()  //将请求发送到服务器.

3.监听onreadystatechange 事件

xhr.onreadystatechange=function(){  //规定当服务器响应已做好被处理的准备时所执行的任务
    if (xmlhttp.readyState==4 && xmlhttp.status==200){  //当 readyState 等于 4 且状态为 200 时，表示响应已就绪
        console.log(xhr.responseText)  //获得字符串形式的响应数据。
    }
}

Ajax优点：

1.减轻服务器的负担,按需取数据,最大程度的减少冗余请求

2.局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验

3.基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离

Ajax缺点：

1.AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.

2.AJAX只是局部刷新,所以页面的后退按钮是没有用的.

3.对流媒体还有移动设备的支持不是太好等

七、Ajax中get与post请求方式的区别

1.与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

2.无法使用缓存文件（更新服务器上的文件或数据库）

3.向服务器发送大量数据（POST 没有数据量限制）

4.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

5.传参不同，get参数拼接在url后面，post参数放在send里面，并且带有请求头信息

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

八、jsonp实现流程

动态创建script标签，src指向路径，向后端发送请求，返回回调函数的执行，以数据作为实参传入一段js脚本。

九、Ajax与jsonp区别

1.相同点：都是请求一个url

2.不同点：ajax的核心是通过创建XMLHttpRequest获取内容

jsonp的核心是动态创建script标签来调用服务器提供js脚本

十、json对象与字符串互转方法

JSON.parse()     //将数据转换为javaScript对象
JSON.stringify() //将javaScript对象转换为字符串

十一、实现add函数，add(1,2)、add(1)(2)，皆可弹出3

function add(a,b){
    if(b==undefined){
        return function(c){
            alert(a+c)
        }
    }else{
        alert(a+b)
    }
}

十二、实现add函数，add(1,3,4,5,....)，不论多少参数都能计算出参数之和

function add(){
    var res=0;
    for(var i=0;i<arguments.length;i++){
        res+=arguments[i];
    }
    return res;
}

十三、实现一种数组去重算法

//第一种方法：
var arr2=[];
for(var i=0;i<arr.length;i++){
    var flag=true;
    for(var j=0;j<arr2.length;j++){
        if(arr[i]==arr2[j]){
            flag=false;
            break;
        }
    }
    if(flag){
        arr2.push(arr[i]);
    }
}
//第二种方法：
var arr=[1,2,9,3,3,3,4,4];
var arr1=new Set(arr);
var arr3=[...arr1];
console.log(arr3)

十四、实现密码输入框失去焦点弹出密码强度规则如下：<input id='ipt>，包含

数字、大写字母、小写字母任意一种强度为弱，两种为一般，三种为强

function password(val){

    // 弱  只有数字、大写字母、小写字母其中一种
    var weak = /^[A-Z]{7,20}$|^[a-z]{7,20}$|^[0-9]{7,20}$/;
    if(weak.test(val)){
        passwordStrength='匹配到只有数字、大写字母、小写字母其中一种';
        console.log(passwordStrength+'强度：弱')
        return passwordStrength;
    }
    // 中  有数字、大写字母、小写字母其中两种 
    var middle = /^(?!d+$)(?![a-z]+$)[da-z]{7,20}$|^(?!d+$)(?![A-Z]+$)[dA-Z]{7,20}$|^[a-zA-Z]{7,20}$/;
    if(middle.test(val)){
        passwordStrength='匹配到数字、大写字母、小写字母其中两种';
        console.log(passwordStrength+'强度：中')
        return passwordStrength;
    }
    //          console.log(middle.test(InputTxt));
    // 强 数字、大写字母、小写字母全部包含
    var strong = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[^]{7,20}$/;
    if(strong.test(val)){
        passwordStrength='匹配到数字、大写字母、小写字母全部包含';
        console.log(passwordStrength+'强度：强')
        return passwordStrength;
    }
    return null;

}

十五、简述事件委托优点和原理

优点：1. 减少事件注册，节省内存。 2.简化了dom节点更新时，相应事件的更新。

原理：利用冒泡的原理，把事件加到父级上，触发执行效果。

十六、写出事件冒泡、阻止浏览器默认行为兼容处理

事件冒泡

原理：内部元素的事件会先被触发，然后再触发外部元素；

  function stopPropagation(e) {  
         e = e || window.event;  
   if(e.stopPropagation) {  //Firefox/Chrome/Opera/Safari   
         e.stopPropagation();  
    } else {  
         e.cancelBubble = true;  //ie  
    }  
}  

浏览器默认行为

   function stopPropagation(e) {  
            e = e || window.event;  
      if(e.preventDefault) {  //Firefox/Chrome/Opera/Safari   
            e.preventDefault();  
      } else {  
            e.returnValue = false;  //ie  
      }  
  } 

十七、写出获取页面滚动高度及设置页面滚动高度兼容写法

if(document.documentElement.scrollTop){
    x=document.documentElement.scrollTop;
}else{
    x=document.body.scrollTop;
}

十八、简述原型链概念

每一个对象都有_ proto_属性，向上一级寻找，指向创建它对象的prototype属性，直到找到null为止。

十九、函数题01

function fun(n,o){
    console.log(o)
    return{
        fun:function(m){
            return fun(m,n)
        }
    }
}
var a=fun(1);a.fun(2);a.fun(7);a.fun(8);
var b=fun(1).fun(3).fun(5).fun(4);
var c=fun(1).fun(1);c.fun(2);c.fun(3);
//答案
a:    undefined    1    1    1
b:    undefined    1    3    5
c:    undefined    1    1    1

二十、简述一级DOM事件与二级DOM事件的区别

DOM一级事件：对于同一个dom节点而言，只能注册一个，后边注册的同种事件会覆盖之前注册的。

DOM二级事件：1.支持同一dom元素注册多个同种事件。 2.新增了捕获和冒泡的概念。

二十一、简述前端性能优化方式

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布局慢。

二十二、函数题02

var name='global';
var obj={
    name:'local',
    say:function(){
        console.log(this.name);
    }
}

var o=obj;
o.say();
var o2=obj.say;
o2();

//答案：    local    global

二十三、var arr=[1[2,3],[4,5,[6,7,8,[9,10]]]]数组展平

function fn(arr){
    for(var i=0;i<arr.length;i++){
        if(arr[i] instanceof Array){
            fn(arr[i]);
        }else{
            console.log(arr[i])
        }
    }
}
fn(arr)；

二十四、jquery对象与DOM对象互转方式

jquery对象转为DOM对象：$().get(index) 方法

DOM对象转化为jquery对象：直接用 $() 包起来

二十五、解决get请求缓存问题的方法

在URL后面添加一个时间戳：var t = new Date().getTime();

二十六、js获取当前页面的url，并解析出路径中所携带的参数，如下：

www.baidu.com?word=javascript&browser=IE    ==>{  word:'javascript', browser:'IE'  }

答案解析：

 function showWindowHref(){

    var sHref = window.location.href;//获取当前路径

    var args = sHref.split('?');

    if(args[0] == sHref){
          return "";
     }

     var arr = args[1].split('&');

     var obj = {};

     for(var i = 0;i< arr.length;i++){
          var arg = arr[i].split('=');
          obj[arg[0]] = arg[1];
     }
        return obj;
    }
    var href = showWindowHref(); 
    console.log(href);

二十七、函数题03

    function Foo() {
        getName = function () { alert (1); }
        return this;
    }
    Foo.getName = function () { alert (2);};
    Foo.prototype.getName = function () { alert (3);};
    var getName = function () { alert (4);};
    function getName() { alert (5);}

    //请写出以下输出结果：
    Foo.getName();
    getName();
    Foo().getName();
    getName();
    new Foo.getName();

//答案：2    4    1    1    2

二十八、简述call、apply、bind的用法及区别

1.用法：

call：call(“引用对象”，”值1”,”值2”)；

apply：apply(“引用对象”，[”值1”,”值2”])；

bind：var ss=函数.bind(对象,arg1,arg2,....);

2.区别：

相同点： 第一个参数都是指定函数内部中this的指向

不同点： （1）都可以在函数调用时传递参数。call，bind方法直接传入，apply方法以数组形式传入。

（2）call，apply方法在调用之后立即执行函数，bind方法没有立即执行，需要将函数再执行一遍。有点闭包的味道。

（3）改变this对象的指向问题不仅有call，apply，bind方法，that变量来固定this的指向。

二十九、实现弹出一个字符串中出现次数最多的字符

//第一步：把字符以{x:"a",count:1}的形式插入数组
var arr=[]
for(var i=0;i<str.length;i++){
    var flag=true;
    for(var j=0;j<arr.length;j++){
        if(str[i]==arr[j].x){
            flag=false;
            arr[j].count++;
            break;
        }
    }

    if(flag){
        arr.push({
            x:str[i],
            count:1
        })
    }

}
//第二步：对数组以count值进行降序排列
var res=arr.sort(function(b,a){
    if(a.count>b.count) return 1;
    if(a.count<b.count) return -1;
    return 0
})
console.log(res[0].x+"出现次数最多:"+res[0].count+"次")

//处理并列第一问题
var arr2=[];
for(var i=0;i<res.length;i++){
    if(res[i].count==res[0].count){
        arr2.push(res[i].x);
    }
}
var s=arr2[0];
for(var i=1;i<arr2.length;i++){
    s+="、"+arr2[i];
}
console.log(s+"出现次数最多:"+res[0].count);

三十、实现offsetTop找爸爸方法

function offset(el){
    var ot=0;
    var ol=0;
    while(el){
    ot+=el.offsetTop;
    ol+=el.offsetLeft
    el=el.offsetParent;
    }
    return {
    left:ol,
    top:ot
    }
}

三十一、原生js实现获取和设置css方法

function setStyle(el,st){
    var arr=["width","height","left","top","marginTop","marginLeft","fontSize"]
    for(x in st){
        for(var i=0;i<arr.length;i++){
            if(arr[i]==x){
                st[x]=st[x]+"px";
                    break;
            }
        }
        el.style[x]=st[x];
    }
}

    setStyle(box,{
        width:100,
        height:200,
        background:"blue",
        marginTop:200
    })

三十二、封装获取变量数据类型通用方法

function getType(type){
        if(typeof type== "string"){
            return "string"
        }
        if(typeof type== "number"){
            return "Number"
        }
        if(typeof type== "boolean"){
            return "Boolean"
        }
        if(type instanceof Array){
            return "Array"
        }
        if(type instanceof Object){
            return "Object"
        }
    }

三十三、简述同源策略的概念

域名，协议，端口相同

三十四、简述数组splice方法的几种用法

语法：array.splice(index,howmany,item1,.....,itemX)

index：    该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany：  规定应该删除多少元素。必须是数字，但可以是 "0"。
item：     要添加到数组的新元素

三十五、简述js节点操作方法

1.元素节点的增删改查

创建节点/复制：

document.createElement() // 按照指定的标签名创建一个新的元素节点

clonedNode = Node.cloneNode(boolean) // 只有一个参数，传入一个布尔值，true表示复制该节点下的所有子节点；false表示只复制该节点

插入节点

parentNode.appendChild(childNode); // 将新节点追加到子节点列表的末尾

parentNode.insertBefore(newNode, targetNode);

移除节点：

parentNode.removeChild(childNode); // 移除目标节点

node.parentNode.removeChild(node); //在不清楚父节点的情况下使用

替换节点：

parentNode.replace(newNode, targetNode); //使用newNode替换targetNode

查找节点：

document.getElementByID() // 得到单个节点

document.getElementsByTagName() // 得到节点数组 NodeList

document.getElementsByName() // 得到节点数组 NodeList

document.getElementsByClassName() // 得到节点数组 NodeList

2.属性节点：

获取CSS样式：node.style.color // 可读可写

Style本身的属性和方法

node.style.cssText //获取node行内样式字符串

node.style.length //获取行内样式个数

node.style.item(0) //获取指定位置的样式

获取和修改元素样式

HTML5为元素提供了一个新的属性：classList 来实现对元素样式表的增删改查。操作如下：

node.classList.add(value); //为元素添加指定的类

node.classList.contains(value); // 判断元素是否含有指定的类，如果存在返回true

node.classList.remove(value); // 删除指定的类

node.classList.toggle(value); // 有就删除，没有就添加指定类

修改DOM特性的方法

Node.getAttribute('id') // 获取

Node.setAttribute('id') // 设置

Node.removeAttribute() // 移除

Node.attributes // 获取DOM全部特性

只读方法

getComputedStyle是window的方法。它能够获取当前元素所有最终使用的CSS属性值，但是是只读的。它有两个参数，第一个为传入的节点，第二个可以传入:hover, :blur等获取其伪类样式，如果没有则传入null。

三十六、简述cookie和webstorage的区别

共同点：都是保存在浏览器端，且同源的。区别： (1)cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 (2)cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。 (3)存储大小限制不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 (4)数据有效期不同 sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持； localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据； cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 (5)作用域不同 sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面； localStorage 在所有同源窗口中都是共享的； cookie也是在所有同源窗口中都是共享的。 (6)Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。 (7)Web Storage 的 api 接口使用更方便。

三十七、谈一下对websocket的理解

（1）WebSocket是一种客户端与服务器即时通信的双项协议，基于TCP协议，使用HTTP协议的101状态码进行协议切换，使用的TCP端口是80，可以用于绕过大多数防火墙的限制。

（2）WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端直接向客户端推送数据而不需要客户端进行请求，在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并允许数据进行双向传送。（ajax轮询，浏览器需要不断的向服务器发出请求，会占用很多的带宽和服务器资源）

三十八、