前端常见的面试题整理（一）

前端常见的面试题整理（一）

持续更新中~~~

1. get与post 通讯的区别

• Get 请求能缓存,Post 不能
• Post 相对 Get 安全一点点,因为Get 请求都包含在 URL 里,且会被浏览器保存历史纪录,Post 不会,但是在抓包的情况下都是一样的.
• Post 可以通过 request body来传输比 Get 更多的数据,Get 没有这个技术
• URL有长度限制,会影响 Get 请求,但是这个长度限制是浏览器规定的,不是 RFC 规定的
• Post 支持更多的编码类型且不对数据类型限制

2. src 和 href的区别？

• src 是指向外部资源的位置，指向的内容会嵌套到文档中当前标签所在的位置；当浏览器解析到该元素时就会暂停其他资源的下载和处理。
• href 是指向网络资源所在位置(超链接)，用来建立和当前元素或文档之间的连接；当浏览器解析到该元素的时候，就会并行下载资源，不会停止与当前文档的处理。

3. 前端最常用的三种存储方式

• cookies：优点-(兼容性好，请求自带cookie方便)；缺点-(大小只有4K,自动请求头加入cookie浪费流量)。
• localstorage：操作方便，永久性存储（除非手动删除），大小为5M。
• sessionstorage：与localstorage基本类似，区别是sessionstorage当页面关闭之后会被清理，而且他不能在所有同源窗口中共享，是回话级别的存储方式

4. 简单解释一下js中的变量提升问题

js引擎的工作方式：先解析代码，获取所有被声明的变量，然后一行行的运行。

示例：

console.log(a) 		//输出：undefined

var a = 1

function b() {
	console.log(a)
}

b() 	// 输出：1

上面代码的实际执行顺序是这样的：

第一步：引擎将 var a = 1 拆解为 var a = undefined 和 a = 1 ，并将 var a = undefined 放到最顶端， a = 1 还在原来的位置，代码可以拆解为：

var a = undefined

console.log(a)	 // undefined

a = 1

function b() {
	console.log(a)
}

b() // 1

第二步：执行代码，js是从上往下一行行执行的，所以就导致了当前的结果，这便叫做变量提示。

5. 理解闭包吗？(闭包是还是你么？闭包有什么作用？)

闭包是什么：

• 官方解释：闭包是函数和声明该函数的词法环境的组合。
• 个人理解：闭包 = 【函数】和【函数体内可以访问的变量总和】
• 示例如下：

(function() {
	var a = 1;
	function add() {
		var b = 2
		var sum = b + a
		console.log(sum); // 3
	}
	add()
	}
)()

// add 函数本身，以及其内部可访问的变量，即 a = 1 ，这两个组合在⼀起就被称为闭包。

闭包的作用：

闭包的最大作用就是隐藏变量，闭包的一大特性是内部行数总是可以访问其所在外部函数中声明的参数和变量。基于此可以实现私有变量、特权变量、存储变量。

6. javaScript的作用域链理解

本质：JavaScript在执行过程中会创造可执行上下文，可执行上下文中的词法环境中含有外部词法环境的引用，可以通过这个引用获取外部词法环境的变量、声明等，这些引用串联起来一直指向全局词法环境，故形成了作用域链。

注：作用域链只能由里往外找，不能由外往里找，这也是“闭包”实现原则。到此，如果能理解作用域链，则闭包也就不难理解了。

作用域链详解请移步理解JavaScript中的作用域链

7. js中的数据类型有哪些？

JavaScript中的数据类型主要分为两大类，一类是原始类型,一类是复杂(引用)类型。

• 原始类型：boolean、undefined、null、number、string、symbol、BigInt(ES10中开始引入)
• 复杂类型：Object

8. null 与 undefined的区别是什么？

• null：表示为空，代表此处不应该有值的存在；一个对象可以是null，代表是一个空对象，而null本身也是一个对象。

---

• undefined：表示不存在，JavaScript是⼀⻔动态类型语⾔，成员除了表示存在的空值外，还有可能根本就不存在（因为存不存在只在运⾏期才知道），这就是undefined的意义所在。

9. 对原型链的理解？

简单认识一下原型

var Person = function(msg){
	this.msg = msg
}

var person1 = new Person("xiaoming")；

person1.constructor === Person	//true
Person === Person.prototype.constructor	//true
person1.__proto__ === Person.prototype	//true
person1.__proto__.contructor == person1.constructor	//true

关系图如下：

• 蓝色是构造函数
• 绿色是构造函数实例出来的对象
• 橙色是构造函数的prototype，也是构造函数实例出来的对象的原型

  特别注意：prototype与__proto__的区别，prototype是函数才有的属性，而__proto__是每一个对象都有的属性。

认识原型链

通过上图可以了解到person1的原型链是：

person1 ---> Person.prototype ---> Object.prototype ---> null

事实上，函数也是一个对象，所以原型链的关系会复杂一些

Person ---> Function.prototype ---> Object.prototype --->null

清晰的关系图如下：

特别注意：所有函数的原型都是Function.prototype，包括Function构造函数和Object构造函数（如图中的标红部分）

10. JavaScript的基本类型和复杂类型分别存储在哪里

• 基本类型存储在栈中，但是一旦被闭包引用则成为常住内存，存储在内存堆中。
• 复杂类型会存储在内存堆中。

11. GET 和 POST 有什么区别？

• 数据传输方式不同：GET请求通过URL传输数据，而POST的数据通过请求体传输。
• 安全性不同：POST的数据因为在请求体内，所以有一定的安全性保证，而GET的数据在URL中，通过历史记录，缓存很容易查到信息。
• GET刷新、后退等浏览器操作请求是无害的，POST可能重复提交表单。

12. PUT 和 POST 都是给服务器发送新增资源，有什么区别？

• PUT方法是幂等，连续调用一次或者多次的效果相同(无副作用)，而POST方法是非幂等的。
• PUT的URI指向的是具体的单一资源，而POST可以指向资源集合。