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

秒速五厘米 2022-05-08 12:42 302阅读 0赞

###   **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的三次握手** ###

### 第一次 ###

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

### 第二次 ###

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

### 第三次 ###

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

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

### **5.osi** ###

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

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

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

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

方法一

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

for(var i=0;i<box.length;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<box.length;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<data.length;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

[Link 1]: https://baike.baidu.com/item/%E5%AE%A2%E6%88%B7%E7%AB%AF
[syn]: https://baike.baidu.com/item/syn
[Link 2]: https://baike.baidu.com/item/%E6%9C%8D%E5%8A%A1%E5%99%A8
[SYN_SENT]: https://baike.baidu.com/item/SYN_SENT
[Link 3]: https://baike.baidu.com/item/%E7%AC%AC%E4%BA%8C%E6%AC%A1%E6%8F%A1%E6%89%8B
[ack]: https://baike.baidu.com/item/ack
[SYN_RECV]: https://baike.baidu.com/item/SYN_RECV
[Link 4]: https://baike.baidu.com/item/%E6%9C%8D%E5%8A%A1
[ESTABLISHED]: https://baike.baidu.com/item/ESTABLISHED
[Link 5]: https://baike.baidu.com/item/%E6%95%B0%E6%8D%AE