前端面试题

JavaScript基础部分

1. `js` 字符串操作函数

indexOf() -返回字符串中一个字符第一处出现的索引。如果没有匹配项，返回 -1。
chartAt() -返回指定位置的字符。
lastIndexOf() -返回字符串中最后出现的索引，如果没有匹配项，返回 -1。
match() - 检查一个字符串是否匹配一个正则表达式。
substr() - 函数 ---返回从string 的starPos 的位置，长度为length的字符串。
substring() -返回字符串的一个字符，传入参数是其实位置和结束位置。
slice() -提取字符串的一部分，并返回一个新的字符串。
replace() -用老查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。
search() -执行一个正则表达式匹配查找。如果查找成功，返回匹配的索引值，否则返回-1.
split() – 通过将字符串划分成字符，将一个字符串做成一个字符串数组。
length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
toLowerCase() – 将整个字符串转成小写字母。
toUpperCase() – 将整个字符串转成大写字母。

2. 使用this的典型应用

在html元素事件属性中的使用，如：

<input type="button" onclick="showInfo(this)" value="点击一下"/>

构造函数

function animal(name,color){
	this.name = name;
	this.color = color;
}

input 点击，获取值

<input type="button" id="text" value="点击一下"/>
<script>
	var btn = document.getElementById("text")
	btn.onclick = function(){
		alert(this.value) //此时的this是按钮元素
	}
</script>

apply ( ) / call ( ) 求数组最值

var num = [5,13,31,3,221,150,-130]
var maxNum = Math.max.apply(this,num)
console.log(maxNum) //221
var num = Math.max.call(this,5,467,120,-87)
console.log(num) //467

3. typeof与instanceof

相同点

javascript中typeof和instanceof常用来判断一个变量是否为空，或者是什么类型的。

typeof：返回字符串，用来说明变量数据类型。

typeof 细节：
```
 		1. typeof 一般只能返回如下几个结果： number，boolean，string，function，object，undefined。
             		2. typeof 来获取一个变量是否存在，如：if（typeof a != undefined）{ alert("ok") }  如果a不存在（未声明）会报错。
            		3. 对于Array，Null等特殊对象使用typeof一律返回object，这正是typeof局限性。
```
instanceof: 用于判断一个变量是否属于某个对象的实例。

instanceof 细节：
```
  1. 得到的结果为 ‘N’, 这里的 instanceof 测试的 object 是指 js 语法中的 object，不是指 dom 模型对象。
```
```
if (window instanceof Object){ 
	alert('Y')
} else {  
	alert('N');
	}  // 'N'
```
4. 如何理解闭包
- 定义和用法：当一个函数的返回值是另一个函数，返回的那个函数如果调用了其父函数内部的其他变量，如果返回的这个函数在外部被执行，就产生闭包。
- 表现形式：使函数外部能够调用函数内部定义的变量。
实例：

根据作用域链的规则，底层作用域没有声明的变量，会向上一级找，没找到就一直找，直到window的变量，没有就返回undefined。
```
var count = 10; //全局作用域
function add(){
	var count = 0; //局部作用域
	return function(){
		count +=1; //函数内部作用域
		alert(count)
	}
}
var s = add()
s()  // 输出1
s()  // 输出2
```
- 变量作用域
  
  全局/局部作用域变量
  
  特点：
  1. 函数内部可以读取函数外部的全局变量；在函数外部无法读取函数内的局部变量。
  2. 函数内部声明变量的时候，一定要使用var命令。如果不用，等于声明一个全局变量。
- 闭包的注意点
  1. 滥用闭包，会造成内存泄漏：由于闭包会使的函数中的变量被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页性能问题，在IE中导致内存泄漏。解决方法是：在退出函数之前，将不使用的局部变量全部删除。
  2. 会改变父函数内部变量的值。所以如果你把父函数当作对象（object）使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这是一定小心，不要随便改变父函数内部变量的值。

5. 什么是跨域？跨域请求资源的方法有那些？

什么是跨域
- 网络协议不同：如http协议访问https
- 端口不同：如80端口访问8080端口
- 域名不同：baidu.com 访问xinlang.com
- 子域名不同：a.baidu.com访问b.baidu.com
- 域名和域名对应ip：baidu.com访问20.205.28.90
跨域请求资源的方法
- porxy代理
定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

实现方法：通过nginx代理。

注意：如果你代理的是https协议请求，那么你的proxy首先需要信任该证书或者忽略证书检查，否则你的请求无法成功。
- CORS [ Cross-Origin Resource Sharing ]
定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。

使用方法：一般需要后端人员在处理请求的时候，添加允许跨域的相关操作：

例子：
```
res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});
```
- jsonp 不是真正的ajax
定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同事资源加载到页面后会立即执行（没有阻塞的情况下）

特点：获取的数据一般是json格式

Ajax是页面无刷新请求数据操作。

实例：
```
<script>
	function testJsonp(data){
		console.log(data.name) //获取返回结果
	}
</script>
<script>
    var _script = document.createElement('script');
    _script.type = "text/javascript";
    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
    document.head.appendChild(_script);
</script>
```
缺点：
1. 这种请求无法发送post请求
2. 确定请求失败不容易，大多是框架的实现都是结合超时事件来判定。

6. 开发过程中遇到的内存泄露情况，如何解决的？

定义和用法：

内存泄漏是指一块被分配的内存即不能用，又不能回收，直到浏览器进程结束。

内存泄漏的几种情况

当页面中元素被移除或替换时，若元素绑定的事件仍没有被移除，在IE中不会做出恰当处理，此时要手工移除事件，不然会存在内存泄漏。

实例如下：（存在问题）

<div>
	<input type-"button" value ="点我" id="btn"/>
</div>
<script>
	var btn = document.getElementById('btn')
	btn.onclick = function(){
        document.getElementById('btn').innerHTML = '等一等'
    }
</script>

解决方案：

<div>
	<input type-"button" value ="点我" id="btn"/>
</div>
<script>
	var btn = document.getElementById('btn')
	btn.onclick = function(){
		btn.onclick = null;
        document.getElementById('btn').innerHTML = '等一等'
    }
</script>

由于函数内部定义函数，并且内部函数 -- 事件回调的引用外暴了，形成闭包，闭包可以维持函数内局部变量，使其得不到释放。

实例如下： (存在问题)

function bindEvent(){
	obj.onclick = function(){
	//
	}
}

解决方案

function bindEvent(){
	var obj = docunemt.createElement('div');
	obj.onclick = function (){
		//
	}
	obj = null
}

7. javascript 面向对象中继承实现？

面向对象的基本特征有：封闭、继承、多态。

javascript中的实现继承的方法：

原型链（prototype ）

function teacher(name){
    this.name = name;
}
teacher.prototype.sayName = function(){
    console.log("name is "+this.name);
}
var teacher1 = new teacher("xiaoming");
teacher1.sayName();
 
function student(name){
    this.name = name;
}
student.prototype = new teacher()
var student1 = new student("xiaolan");
student1.sayName();
//  name is xiaoming
//  name is xiaolan

call ( ) / apply ( )

function teacher(name,age){
	this.name = name;
	this.age = age;
	this.sayhi = function(){
		alert('name:'+name+", age:"+age);
	}
}
function student(){
	var args = arguments;
	teacher.call(this,args[0],args[1]);
	// teacher.apply(this,arguments);
}
var teacher1 = new teacher('xiaoming',23);
teacher1.sayhi();

var student1 = new student('xiaolan',12);
student1.sayhi();

// alert: name:xiaoming, age:23
// alert: name:xiaolan, age:12

混合方式（以上两种的结合）

function teacher(name,age){
	this.name = name;
	this.age = age;
}
teacher.prototype.sayName = function(){
	console.log('name:'+this.name);
}
teacher.prototype.sayAge = function(){
	console.log('age:'+this.age);
}

function student(){
	var args = arguments;
	teacher.call(this,args[0],args[1]);
}
student.prototype = new teacher();

var student1 = new student('xiaolin',23);
student1.sayName();
student1.sayAge();
// name:xiaolin
// age:23

对象冒充

function Person(name,age){
	this.name = name;
	this.age = age;
	this.show = function(){
	console.log(this.name+", "+this.age);
	}
}

function Student(name,age){
	this.student = Person; //将Person类的构造函数赋值给this.student
	this.student(name,age); //js中实际上是通过对象冒充来实现继承的
	delete this.student; //移除对Person的引用
}

var s = new Student("小明",17);
s.show();

var p = new Person("小花",18);
p.show();
// 小明, 17
// 小花, 18

8. javascript相关程序计算题

判断一个字符串中出现次数最多的字符，统计次数

var str = 'abcdefghijkassaasasessa';
var json = { };
for (var i = 0; i<str.length; i++){
	if(!json[str.charAt(i)]){
		json[str.charAt(i)] = 1;
	}eles{
		json[str.charAt(i)]++
	}
}
var iMax = 0;
var iIndex = '';
for(var i in json){
	if(json[i]>iMax){
		iMax = json[i]
		iIndex = 1
	}
}
console.log('出现次数最多的是：'+iIndex+'出现'+iMax+'次数')

数组去重

方法一：

var arr = [0,1,2,3,2,5,6]
var obj = {};
var tmp = [];
for(var i=0;i<arr.length;i++){
	if(!obj[arr[i]]){
		obj[arr[i]] = 1;
		tmp.push(arr[i])
	}
}
console.log(tmp) // [0,1,2,3,5,6]

方法二：

var arr = [2,3,5,5,6,6,5,3,14],
arr2 =[];
for(var i=0; i<arr.length; i++){
	if(arr2.indexOf(arr[i])<0){
		arr2.push(arr[i])
	}
}
console.log(arr2) //[2,3,5,6,14]

方法三：

var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
return self.indexOf(element) === index;
});
console.log(arr2);//[2,3,4,5,6]

9. $(document).ready()方法和window.onload有什么区别？

window.onload方法是在网页中所有元素完全加载到浏览器后才执行（包括元素的所有管连文件）
$(document).ready()方法可以在DOM载入就绪时就对其进行操作，并调用执行绑定的函数。

10. jQuery中get和post请求的区别？

相同点：都是异步请求的方式来获取服务端的数据

异同点：

请求方式不同。

参数传递方式不同。get 参数在url后，用户可见。 post 作为http消息的实体内容发给服务器，用户不可见。

数据传输大小不同。get方式传输的数据大小不能超过2kb ，post大的多

安全问题。get请求会被浏览器缓存，因此有安全问题。

11. 数组操作方法?

push（）尾部添加
pop（）尾部删除
unshift（）头部添加
shift（）头部删除

12. 事件委托是什么？

利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行。

13. 组值事件的默认行为/冒泡？

冒泡阻止
- IE：ev.cancelBubble = true ;
- 非IE：ev.stopPropagetion()
默认行为
- return false
- ev.preventDefault()

14. "=="和"==="区别？

前者会自动转换类型，再判断是否相等
后者不会自动转换类型，直接去比较

15. 看下面代码，给出输出结果。

for(var i = 1; i <= 3; i++){  //建议使用let 可正常输出i的值
  setTimeout(function(){
      console.log(i);   
  },0); 
};
// 答案：4 4 4。
// 原因：Javascript事件处理器在线程空闲之前不会运行。

16. new操作符具体干了什么？

创建一个空对象，并且this变量引用该对象，同时继承课该函数的原型。
属性和方法被加入到this引用的对象中
新创建的对象由this所引用，并且最后隐士的返回this

17. 冒泡排序算法？

// 冒泡排序
var array = [5,4,3,2,1]
var temp = 0
for(var i = 0;i<array.length; i++){
	for(var j = 0; j<array.length-i; j++){
		if(array[i]>array[j+1]){
			temp = array[j +1]
			array[j+1]=array[j]
			array[j]=temp
		}
	}
}

18. 如何深度克隆？

19. forEach和map的区别

20. 浅拷贝和深拷贝

HTML & CSS 基础部分

1. 什么是盒子模型？

包含：内容（content）、内边距（padding）、边框（border）、外边距（margin）

2. 实现垂直居中?

<div class="app">
	<div class="content"></div>
</div>

// css1
.app{
    position:relative;
    width:500px;
    height:500px;
    border:1px solid red;
}
.content{
    position:absolute;
    width:200px;
    height:200px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    border:1px solid green;
}

3. px和em和rem的区别

px值时固定单位
em不是固定单位，会继承父元素的字体大小

1em = 16px 12px = 0.75em 10px = 0.625em

4. 同步异步的区别是什么？

同步时阻塞式，异步是非阻塞式；

同步指一个进程再执行某个请求的时候，若请求需要一段事件返回信息，进程会一直等下去，直到收到返回信息才继续执行下去。

异步指进程不需要一直呆下去，而是继续执行下面操作，不管其他进程的状态。当由消息返回时系统会通知进程处理，这样可以提高效率。

5. sessionStorage、localStorage和cookie之间的区别?

共同点

用于浏览器端存储的缓存数据

不同点

存储内容是否发送到服务端：当设置了cookie后，数据会发送到服务端，造成一定的宽带浪费，web storage，会将数据保存到本地，不会造成宽带浪费。

数据存储大小不同：cookie数据不超过4kb，适用于会话标识；web storage 数据存储可以达到5M

数据存储有效期不同：cookie只设置了cookie过期时间之前一直有效，即使关闭窗口或浏览器。session storage，仅在关闭浏览器之前有效。local storage，数据存储永久有效。

作用域不同：cookie和local storage使在同源通窗口中共享；sessionstorage不在不同的浏览器窗口共享，即使是同一个页面。

6. web Storage与Cookie相比存在的优势？

1. 存储空间大；

2. 存储内容不会发送给服务器：设置了cookie 内容会随着请求一并发送给服务器，造成带宽浪费。web存储本地不会与服务器发生交互。
3. 更多丰富易用的接口：setitem getitem removeitem clear  cookie 需要自己封装
4. 独立存储空间：

7. 请指出document ready和document load的区别？

共同点：都代表的是页面文档加载时触发；
异同点：
- ready事件触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件）
- onload事件触发，表示页面包含图片等文件在内的所有元素都加载完成。

开发及性能优化

1. 规避JavaScript多人开发函数重名问题？

命名空间
封闭空间
js模块化mvc
对象化

2. 减少页面加载时间的方法？

压缩css，js文件
合并js，css文件，减少http请求
外部js，css文件放在最底下
减少dom操作，尽量能用变量代替不必要的dom操作

3.你了解的web攻击技术？

XSS（跨站点脚本攻击）
SQL(注入)
CSRF(跨站点请求伪造)

4. 如何提高页面性能优化？

同2

5. 如何优化图像？图像格式的区别？

不用图片，css3代替
使用svg替代位图
使用惬当的图片格式
按照http协议设置合理的缓存
使用字体图标webfont ，css sprites
用css和js实现预加载

2020 前端经典面试题总结

前端面试题

JavaScript基础部分

1. js 字符串操作函数

2. 使用this的典型应用

3. typeof与instanceof

4. 如何理解闭包

5. 什么是跨域？跨域请求资源的方法有那些？

6. 开发过程中遇到的内存泄露情况，如何解决的？

7. javascript 面向对象中继承实现？

8. javascript相关程序计算题

9. $(document).ready()方法和window.onload有什么区别？

10. jQuery中get和post请求的区别？

11. 数组操作方法?

12. 事件委托是什么？

13. 组值事件的默认行为/冒泡？

14. "=="和"==="区别？

15. 看下面代码，给出输出结果。

16. new操作符具体干了什么？

17. 冒泡排序算法？

18. 如何深度克隆？

19. forEach和map的区别

20. 浅拷贝和深拷贝

HTML & CSS 基础部分

1. 什么是盒子模型？

2. 实现垂直居中?

3. px和em和rem的区别

4. 同步异步的区别是什么？

5. sessionStorage、localStorage和cookie之间的区别?

6. web Storage与Cookie相比存在的优势？

7. 请指出document ready和document load的区别？

开发及性能优化

1. 规避JavaScript多人开发函数重名问题？

2. 减少页面加载时间的方法？

3.你了解的web攻击技术？

4. 如何提高页面性能优化？

5. 如何优化图像？图像格式的区别？

6. 浏览器是如何渲染页面的？

vue面试题

1. vue中data和props的区别？

2. data为什么是一个函数？

3. vue组件之间的通信？

1. `js` 字符串操作函数