前端面试题总结

Posted 2021-10-10 老张在线敲代码

1 描述箭头函数的特点。

箭头函数的this是静态的，始终指向声明函数时的作用域
箭头函数不能作为构造函数的实例化对象
箭头函数不能使用arguments变量

2 列举数组的迭代方法。

forEach()：没有返回值，只是针对每个数组项调用指定的函数(callbackfn)
every(): 测试数组的所有元素是否符合指定函数的条件，只要有有一个元素不符合，返回的都会是false
some(): 和every()方法类似，不同的是，some()方法在调用指定的函数callbackfn指定的条件符合就会返回true，不符合则返回false。
filter(): 每个数组项调用指定的函数，条件为true的将返到一个新数组中
map(): 每个数组项调用指定的函数，返回每次函数调用的结果组成一个新数组

3 vue内置组件有哪些？

slot:插槽组件，可以指派name作为具名插槽，或者向外暴露属性，供外部调用成为作用域插槽
component：通过is属性动态显示一个组件
transition：过渡动画组件
transition-grop：多个过度动画需要使用这个来作为一组处理
keep-alive：当组件被移除或被替换，不会立即销毁组件，而是将其缓存起来，再次调用不需要重新渲染，同时不会触发mounted，而是变为触发actived钩子

4. 什么是同源策略？

所谓同源是指"协议+域名+端口"三者相同
同源策略是为了安全，确保一个应用中的资源只能被本应用的资源访问。否则，岂不是谁都能访问。

5.什么是ajax? ajax的步骤？

ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。
如何使用ajax?
第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。
var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，比如IE5或IE6
xhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。
第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttpreques

6.xml和json的区别

· JSON相对于XML来讲，数据的体积小，传递的速度更快些
· JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
· XML对数据描述性比较好；
· JSON的速度要远远快于XML；

7. px和em的区别

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；
em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

8.从地址栏输入url到显示页面，都经历了什么？

1、首先，在浏览器地址栏中输入url。
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器。
7、浏览器收到HTTP响应。
8、读取页面内容，浏览器渲染，解析html源码。
9、生成Dom树、解析css样式、js交互。
10、客户端和服务器交互。
11、ajax查询。

9.为什么vue实例中data是一个函数

组件的data写成一个函数，数据以函数返回值形式定义，
这样每复用一次组件，就会返回一分新的data，
类似于给每个组件实例创建一个私有的数据空间，
让各个组件实例维护各自的数据。而单纯的写成对象形式，
就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

10. 什么是伪类？什么是伪元素？

伪类：用于选择处于 特定状态 的元素，比如鼠标悬浮状态（ :hover ）。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
伪元素：以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，产生的效果是把不存在的元素硬选出来