2018前端面试题汇总（更新中）

  1.

var name='jay'
  var  pe={
      name:'kang',
      getname:function () {
          console.log(this);
          return this.name
      }
  };
  console.log(pe.getname());
  var pe1=pe.getname;
  console.log(pe1())

输出两个console.log()

// kang

//jay

2.写出实现数组去重的方法；

最简洁的es6   set方法

var arr=[2,2,2,3,3,4,5,6,4];

var set=new Set(arr);//转换为set 去重；

arr=Array.from(set);//转换回数组；

console.log(arr);//实现数组去重；

3.请写出实现随机打乱数组的顺序的方法；

var arr = [1,2,3,4,5,6,7]
            function ranArr(arr) {
                return arr.sort(function() {                   
                    return Math.random() > 0.5 ? 1 : -1
                })
            }          
            console.log(ranArr(arr))

4.tcp的三次握手

第一次

第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号

第二次

第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；

第三次

第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

完成三次握手，客户端与服务器开始传送数据，在上述过程中，还有一些重要的概念：

5.osi

应用层——表示层——会话层——传输层——网络层——数据链路层——物理层

 6 获取字符串里面字母出现次数最多的

    var str = "abcdefgssdd";
    var obj = {};
    var letter;
    for(var i = 0,len = str.length;i         letter = str[i];
        if(!obj[letter]){//如果为obj[letter]没有值就为false
            obj[letter]=1;//把obj[letter]的值赋上个1
        
        }else{           //如果obj[letter]的值有值
            obj[letter]++;//就把值++
        
        }
    }
    var max_key,max_num=0;//         
        for(key in obj){//遍历对象里面的所有key           
    if(max_num         max_num = obj[key];//obj[key]为数字
        max_key = key;//key为字符
     }
    }
        document.write("字母："+max_key+" 次数："+max_num);

7.获取一堆name名相同的div，点击弹出显示第几个div

（本题主要考察闭包的用法，是在面试中常被问的题目，不难但是比较容易上当的题目）

方法一

var box=document.getElementsByTagname('div');

for(var i=0;i

    box[i].index=i+1//因为i是从0开始的；

   box[i].οnclick=function(){

        alert(this.index);

   }

}

方法2----------

var box=document.getElementsByTagname('div');

for(var i=0;i

    (function(i){

    box[i].οnclick=function(){

          alert(i+'1')

          }

   }(i)

}

8.abcdefghi 获取ghi怎么实现 和 ‘asdjhklzxc’ 截取’asd’

（1）'abcdefghi'.substring(6)

 ( 2)  'asdjhklzxc'.substring(0,3)

考察substring 的用法

9翻转字符串      和     删除数组的第一元素

（1）'asd'.split('').reverse.().join('')

//split('')将字符串转化为数组;  //reverse()将数组进行翻转 //join('')将数组转换为字符串

（2）var arr=[a,b,c]

       var last=arr.shift()//被删除的第一个元素

console.log(arr)//删除后的数组

10.数组去重

    var arr = [1,2,1,3,2,3,5,6,5,5] ;
        var newArr = [];
        for(var i = 0; i < arr.length; i++) {
        if(newArr.indexOf(arr[i]) == -1) {//如果找到不到就把arr[i]放到新数组newArr里
                newArr.push(arr[i]);
                    }
                }
        console.log(newArr)

#1.谈谈你对ajax的理解？（概念，特点，作用，代码）

ajax是指一种创建交互式网页应用的开发技术，改善用户体验，实现无刷效果。

优点：不需要插件的支持，优秀的用户体验，提高web程序性能，减轻服务器和带宽的负担

缺点：破环浏览器的“前进”，“后退”按钮的正常功能，是可以通过简单的插件弥补

代码：

var xhr=new XMLHttpRequest()//创建new XMLHttpRequest对象

var url="https://home.firefoxchina.cn"//准备发送请求的地址

xhr.open('get',url,true)//调用XMLHttpRequest对象的方法

xhr.onreadystatechange=function(){

if(xhr.readyState===4&&xhr.status===200){

  var data=JSON.parse(xhr.responseText).result.data;

                console.log(data);

                for(var i=0;i

                  //条件体

 

                }

        }

 xhr.send();

}

#2.什么是跨域，如何实现跨域访问？

跨域是指不同域名之间的访问。

实现：

（1）JSONP跨域：利用script脚本允许引用不同下域下的js实现的，将回调方法带入服务器，返回结果时

回调。

（2）跨域资源共享（cors）

跨域资源共享是一种网络浏览器的技术规范它为web服务器定义一种方式，允许网页从不同的域访问其资源

cors与jsonp相比

a，JSONP只能实现get请求，而cors支持所有类型的http请求。

b，使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理

c，JSONP主要被老的浏览器支持，他们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS