前端面试题总结（应届菜鸡一枚）

ajax部分

• ajax 是异步JavaScript和XML(全称是Asynchronous Javascript And XML)；通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

  (曾经有面试题让我写ajax全拼，/(ㄒoㄒ)/~~奈何第一个单词不会写。唉)

• 有一家笔试题要求手写ajax请求了，基本代码如下：

var xml = window.XMLHttpRequest ? new XMLHttpRequest() : new  ActiveXObject("Microsoft.XMLHTTP");	/*创建一个AJAX对象*/
var url = 'a.html';/*设置要访问的url地址*/
xml.open(“get”,url,true);/*确定即将连接的网址及方式,发起同步请求*/
xml.send(null）；/*发送请求*/
xml.onload = function (){ /*当AJAX请求成功后执行这个函数*/
   con.innerHTML = JSON.parse(xml.responseText）;/*对服务器返回的数据进行处理*/
}		

fetch部分

• fetch 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
• Fetch 常见坑
  Fetch 请求默认是不带 cookie 的
  服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。

ajax和fetch的区别

• fetch只对网络请求报错，对404或500都当做成功的请求，需要封装去处理
• fetch在服务端默认不会带或者接受cookie，需要添加配置项。

fetch(url, {
  credentials: ’same-origin'
})

• 使用fetch时，我们没有办法原生监测请求的进度
• ajax的话感觉jquery封装的差不多，可以开箱即用（吼吼~~），fetch的话可能需要自己做一些处理

老生长谈型问题es6

• es6新增了字符串模板，可以让我们在拼接字符串时。使用( ` )取代字符串相加的模式，并且可以保留所有的空格和换行，使拼接后的字符串更加的美观。
• 数组—解构赋值；es6可以直接使用如下方法赋值,这样当变量多时，不用写很多的let,并且解构赋值支持默认值。

let [a,b,c] = [1,2,3]

• 数组—扩展运算符，可以取代arguments对象和apply方法，轻松获取未知参数个数情况下的参数集合。扩展运算符还可以轻松方便的实现数组的复制和解构赋值。

let a = [2,3,4,5]; let b = [...a]）

• 数组方法的添加；添加了find()，copyWithin(), includes(), fill(),flat()等方法，可方便的用于字符串的查找，补全,转换等。
• 函数—箭头函数；。箭头函数是ES6核心的升级项之一，箭头函数里没有自己的this,这改变了以往JS函数中最让人难以理解的this运行机制。主要优化点:
  （1）箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象
  （2) 箭头函数不能用作构造函数，因为它没有自己的this，无法实例化。
  (3) 也是因为箭头函数没有自己的this,所以箭头函数 内也不存在arguments对象。（可以用扩展运算符代替）
• 函数—函数的形参可以给默认值；

function es6Fn (x, y = 'default') {
    console.log(x, y);
}

• 函数—双冒号；新增双冒号运算符，取代了bind,call和apply;

x::fn1;
//等同于
fn1.bind(x);
foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

• var和es6中的let和const的区别

项目	声明类型	变量提升	重复声明（同一作用域）	作用域
var	变量、常量	是	是	全域/或函数作用域
let	变量	否	否	块级
const	常量	否	否	块级

• 对象属性变量式声明。ES6可以直接以变量形式声明对象属性或者方法，ES6对象也可以像数组解构赋值那样，进行变量的解构赋值。
• 引入了promise;他的主要作用是用来解决JS异步机制里，回调机制产生的“回调地狱”，只是封装了异步回调形式，使得异步回调可以写的更加优雅，可读性更高，而且可以链式调用。
• for…of可以遍历数组和对象；for…in仅仅可以遍历对象。
• import；
  import引入的模块是静态加载（编译阶段加载）而不是动态加载（运行时加载）。
  import引入export导出的接口值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

值得用es6去优化的地方

• 常用箭头函数来取代var self = this;的做法。
• 常用let取代var命令。
• 常用数组/对象的结构赋值来命名变量，结构更清晰，语义更明确，可读性更好。
• 在长字符串多变量组合场合，用模板字符串来取代字符串累加，能取得更好地效果和阅读体验。
• 用Class类取代传统的构造函数，来生成实例化对象。
• 在大型应用开发中，要保持module模块化开发思维，分清模块之间的关系，常用import、export方法。

数组易混淆的几个方法（要牢记啊！！！！）

• pop是删除数组最后一位
• push是在数组最后一位插入一个新元素
• unshift是在数组开头添加一个或更多元素
• shift是将数组开头的元素删除
  （分组记，pop和push是一组；unshift和shift对应着记）

HTTP状态码有哪些，分别代表什么意思？

如果是1开头的代表请求已被接受，需要继续处理
如果是2开头这一类型的状态码，代表请求已成功被服务器接收、理解、并接受
如果是3开头这类状态码代表需要客户端采取进一步的操作才能完成请求
如果是4开头这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理
如果是5开头这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理

闭包相关

• 定义：当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。
• 闭包的好处有：
  1.缓存
  2.面向对象中的对象
  3.实现封装，防止变量跑到外层作用域中，发生命名冲突
  4.匿名自执行函数，匿名自执行函数可以减小内存消耗
• 闭包的坏处：
  1.内存消耗
  2.性能差

冒泡排序优化写法

• 冒泡排序算法的原理如下：
  1.比较相邻的元素。如果第一个比第二个大，就交换他们两个。
  2.对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
  3.针对所有的元素重复以上的步骤，除了最后一个。
  4.持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。

//初始版本冒泡排序（基础版）

function bubbleSort(array){
        var len = array.length,temp = 0,i,j;
	    //temp保存交换的值
		for( i=0;i<len;i++){
			for( j=0;j<len-i-1;j++){
				if(array[j]>array[j+1]){
					temp=array[j];
					array[j]=array[j+1];
					array[j+1]=temp;
				}
			}
		}
		return array;
	}

//进阶版写法（吼吼~~要考虑时间复杂度和空间复杂度,涉及到了数据结构与算法~~呜呜~~知道自己不足了~~以后还是要多学习~~）
	
function bubbleSortBetter(array){
		var n=array.length-1,temp=0,i;
		while(n!=0){
			var Off=true,//该值用来判断不发生交换时把n置为0;
				len=n;//保存n的值,避免与n冲突。
			for( i=0;i<len;i++){
				if(array[i]>array[i+1]){
					temp=array[i];
					array[i]=array[i+1];
					array[i+1]=temp;
					Off=false;
					n=i;//记录最后一次发生交换的值;
				}
			}
			if(Off)n=0;
		}
		return array;
	}

面试感想

奉劝正在学前端的弟弟妹妹们，不要仅限于前端，后台也要有所涉及，数据结构与算法还是要学的。互联网行业好多公司对于技术的要求还是挺高的，基础的话,还是要好好看，好多公司面试题都还是很基础的。面试前一定要多刷题（吼吼~~）因为有些原理或者方法你不常用的话，可能会忘，或者说的有些许偏差，题还是要看的。公司还是比较关注你的基础理论的学习成果的。互勉吧！！