前端面试题 2024

Array.prototype.unique2 = function()

{

var n = {},r=[]; //n为hash表，r为临时数组

for(var i = 0; i < this.length; i++) //遍历当前数组

{

if (!n[this[i]]) //如果hash表中没有当前项

{

n[this[i]] = true; //存入hash表

r.push(this[i]); //把当前数组的当前项push到临时数组里面

}

}

return r;

}

Array.prototype.unique3 = function()

{

var n = [this[0]]; //结果数组

for(var i = 1; i < this.length; i++) //从第二项开始遍历

{

//如果当前数组的第i项在当前数组中第一次出现的位置不是i，

//那么表示第i项是重复的，忽略掉。否则存入结果数组

if (this.indexOf(this[i]) == i) n.push(this[i]);

2.js操作获取和设置cookie

//创建cookie

function setCookie(name, value, expires, path, domain, secure) {

var cookieText = encodeURIComponent(name) + ‘=’ + encodeURIComponent(value);

if (expires instanceof Date) {

cookieText += ‘; expires=’ + expires;

}

if (path) {

cookieText += ‘; expires=’ + expires;

}

if (domain) {

cookieText += ‘; domain=’ + domain;

}

if (secure) {

cookieText += ‘; secure’;

}

document.cookie = cookieText;

}

//获取cookie

function getCookie(name) {

var cookieName = encodeURIComponent(name) + ‘=’;

var cookieStart = document.cookie.indexOf(cookieName);

var cookieValue = null;

if (cookieStart > -1) {

var cookieEnd = document.cookie.indexOf(’;’, cookieStart);

if (cookieEnd == -1) {

cookieEnd = document.cookie.length;

}

cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));

}

return cookieValue;

}

3.ajax 有那些优缺点?如何解决跨域问题?

（Q1）

优点：

（1）通过异步模式，提升了用户体验.

（2）优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.

（3）Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

（4）Ajax可以实现动态不刷新（局部刷新）

缺点：

（1）安全问题 AJAX暴露了与服务器交互的细节。

（2）对搜索引擎的支持比较弱。

（3）不容易调试。

（Q2）jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面。

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

（1）原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。

（2）原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

5.GET和POST的区别，何时使用POST？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，

也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

然而，在以下情况中，请使用 POST 请求：

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

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

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

6.请解释一下 JavaScript 的同源策略

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。

指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制？

我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

7.Flash、Ajax各自的优缺点，在使用中如何取舍？

Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。

Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。

共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

8.什么是闭包？

闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：

（1）作为一个函数变量的一个引用，当函数返回时，其处于激活状态。

（2） 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

简单的说，Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

9.javascript里面的继承怎么实现，如何避免原型链上面的对象共享

用构造函数和原型链的混合模式去实现继承，避免对象共享可以参考经典的extend()函数，很多前端框架都有封装的，就是用一个空函数当做中间变量

10.ajax过程

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

jQuery四种事件绑定方式.bind(),.live(),.delegate(),on()的区别

参考： http://blog.csdn.net/helloliuhai/article/details/19987509

个人理解：

事件委托指的就是目标自身不处理事件，委托给其父元素或祖先元素，甚至是根元素（document）

bind 的优点和缺点

优点：

这个方法提供了一种在各种浏览器之间对事件处理的兼容性解决方案

非常方便简单的绑定事件到元素上

.click(), .hover()…这些非常方便的事件绑定，都是bind的一种简化处理方式

对于利用ID选出来的元素是非常好的，不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时，handler可以立即被执行(相对于后面的live, delegate)实现方式

缺点：

它会绑定事件到所有的选出来的元素上

它不会绑定到在它执行完后动态添加的那些元素上

当元素很多时，会出现效率问题

当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题

.live() 的优点和缺点

优点：

这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给所有的元素挨个绑定

那些动态添加的elemtns依然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上

你可以在document ready之前就可以绑定那些需要的事件

缺点：

从1.7开始已经不被推荐了，所以你也要开始逐步淘汰它了。

Chaining没有被正确的支持

当使用event.stopPropagation()是没用的，因为都要到达document

因为所有的selector/event都被绑定到document, 所以当我们使用matchSelector方法来选出那个事件被调用时，会非常慢

当发生事件的元素在你的DOM树中很深的时候，会有performance问题

.delegate() 的优点和缺点

优点：

你可以选择你把这个事件放到那个元素上了

chaining被正确的支持了

jQuery仍然需要迭代查找所有的selector/event data来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素。

可以用在动态添加的元素上

缺点：

需要查找那个那个元素上发生了那个事件了，尽管比document少很多了，不过，你还是得浪费时间来查找。

注：.delegate() 比 .live() 好

.On()的优点和缺点

优点：

提供了一种统一绑定事件的方法

仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()

缺点：

也许会对你产生一些困扰，因为它隐藏了一前面我们所介绍的三种方法的细节。

结论：

用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上

不要再用.live()了，它已经不再被推荐了，而且还有许多问题

.delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。

我们可以用.on()来代替上述的3种方法

如何理解闭包？

1.闭包的概念

各种专业文献上的“闭包”（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

2.闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

跨域请求资源的方法有哪些？

1.单向跨域 jsonp

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
QFj-1715894623810)]

[外链图片转存中…(img-CLdYLMVB-1715894623810)]

[外链图片转存中…(img-edXWwV1F-1715894623810)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！