前端八股文整理【1】

1、写出你知道的所有HTTP返回状态值，并说明用途（比如404：找不到页面）

题解：

• Http状态码一览表

状态码	用途
1xx	请求收到，继续处理
2xx	操作成功收到，分析，接受
3xx	完成此请求必须进一步处理
4xx	请求包含一个错误语法或不能完成
5xx	服务器执行一个完全有效请求失败

• 常用的有

状态码	用途
200	成功访问，正常访问
301	永久重定向
302	临时重定向
400	域名绑定错误（服务器上域名未绑定成功）
403	没有访问权限
404	文件或者目录不存在
500	程序或服务器错误
503	服务器超时

2、如何终止ajax请求？

题解：

<script src = "jquery-1.4.4.js"></script>
<script>
var xhr = $.ajax({type:'POST',
    url:'b.php',
    data:'',
    success:function(){
        alert('ok');
    }
})
alert(xhr);
 
console.log(xhr);
</script>
<button id="song">abort</button>
<script>
$(function(){
    $("#song").click(function(){
        alert('click');
        xhr.abort();
    })
})
</script>

使用abort()方法，可终止ajax请求。

3、target和currentTarget的区别?

题解：

• 1. target：触发事件的元素。
     currentTarget:事件绑定的元素。
• 2. 两者在没有冒泡的情况下，是一样的值，但在用了事件委托的情况下，就不一样了
• 3. 例如：

//事件委托
<ul id="ulT">
<li class="item1">fsda</li>
<li class="item2">ewre</li>
<li class="item3">qewe</li>
<li class="item4">xvc</li>
<li class="item5">134</li>
</ul>
<script type="text/javascript">
document.getElementById("ulT").onclick = function  (event) {
console.log(event.target);//li
console.log(event.currentTarget);//ul
}
</script>

currentTarget始终是监听事件者，而target是事件的真正发出者。

4、事件捕获与事件冒泡

题解：

• 事件捕获是从上到下，事件冒泡是从下到上

<div id="a">
   最外层的元素
   <div id="b">
   中间的元素
   <div id="c">
   最里面的元素
   </div>
   </div>
</div>
<script>
	document.getElementById("a").addEventListener('click', function(){
		console.log('最外层元素 捕获阶段');
	},true);
	document.getElementById("b").addEventListener('click', function(){
		console.log('中间层元素 捕获阶段');
	},true);
	document.getElementById("c").addEventListener('click', function(){
		console.log('最里层元素 捕获阶段');
	},true);
	document.getElementById("a").addEventListener('click', function(){
		console.log('最外层 冒泡阶段');
	},false);
	document.getElementById("b").addEventListener('click', function(){
		console.log('中间层 冒泡阶段');
	},false);
	document.getElementById("c").addEventListener('click', function(){
		console.log('最里层 冒泡阶段');
	},false);
</script>

点击最里面的元素后，输出的结果，如下：

上文中的true和false表示的：

• 选择true,程序采用事件捕获形式，程序由外到里执行
• 选择false,程序采用事件冒泡形式，程序由里到外执行

阻止事件冒泡：

document.getElementById("c").onclick = function(e){
	e.stopPropagation();
	console.log("c");
}

把要冒泡的代码，添加e.stopPropagation();阻止就可以完成了，在微信小程序里，把bindTap改成catchTap。

5、<div class="a"></div>写出div的样式，绘制一个三角形
题解：

.a{
 border-style:solid;
 border-0px 0px 100px 100px;
 border-color:transparent transparent blue transparent;
 0px;
 height:0px;
}

6、vue有哪些生命周期，异步请求适合在哪些生命周期？

• Vue2中生命周期
  beforeCreate ——》created ——》beforeMount ——》mounted ——》beforeUpdate ——》beforeDestroy ——》destroyed

• Vue3中生命周期
  setup() ——》onBeforeMount ——》onMounted ——》onBeforeUpdate ——》onUpdated ——》onBeforeUnmount ——》 onUnmounted ——》onErrorCaptured ——》onRenderTracked ——》onRenderTriggered ——》onActivated——》onDeactivated
  

7、一个数列1、2、3、5、8....写出js函数第n位的数是多少？
题解：

 // f(n) = f(n-1)+f(n-2)
 //方法一
 function fn(n){
 if(n==1|n==2){
 return 1;
 }
 //因为斐波那契数列格式为：1、1、2、3、5、8、13、21...,n=1和n=2的时候都是输出1
 return fn(n-1)+fn(n-2);
 //不断调用自身函数，n-1是穿进去的参数的前一次，就是最后n的前一个数字。所以n-2是最后传入参数的前两个字数。
 }
 //用函数写出斐波那契数列
 
 
 //方法二
 var n = parseInt(prompt('请输入一个数字'))；
 var a1 = 1;
 var a2 = 2;
 var a3 = 0;
 for(var i =2;i<n;i++){//因为前两个数都是1，所以要从i=2开始，就是前两个数的1+1=2,i的初始值其实是第三个数
 a3 = a1 + a2;//第三个数等于第一个数加上第二个数
 a1 = a2;//第一个数就变成了之前的第二个数
 a2 = a3;//第二个数就变成了刚刚的第三个数
 }
 console.log(a3);
 //使用for循环写出斐波那契数列

8、如何只用容积分别为5升和6升的2个空水壶，从池塘里取得3升的水？

题解：
1、先用5升的水壶装满水，倒入六升的水壶中，六升的水壶中还空出 一升水体积。

2、再用把盛五升水水壶装满水，倒入容积六升的水壶中,壶中还剩4升水。
3、把容积六升水中的水倒掉，再把容积五升的水壶倒满水，把这些水倒入容积六升的壶中，容积五升的水壶中这时刚好剩下三升水。

9、五个硬币，每个硬币和其它四个相接触