前端面试题目总结（点点滴滴，想起来就记录下）

time ：20210524
//代码单词写错了，大家理解，都是直接在模板上手敲的
1.a+b+c = 6,用fn(1)(2)(3)求？
//运用到闭包
function fn(a){
	return function(b){
		return function(c){
			console.log(a+b+c);
		}
	}
}
fn(1)(2)(3);

2.将"https://baidu.com?name='zhansan'&age=12",处理为{name:'zhansan',age:12}
function objData(address){
	let obj = {};
	let arr = address.split("?")[1];//["name='zhansan'&age=12"]
	let arr1 = arr.split("&");//['name'='zhansan','age'=12]
	arr1.forEach(item=>{
		obj[item.split("=")[0]] = item.split("=")[1];
	})
	return obj;
}
objData("https://baidu.com?name='zhansan'&age=12");

3.事件冒泡和事件委托（代理）
<div id="parentId" οnclick= "parentFn">
	<div id="childId" οnclick="childrenFn()">晴天</div>
</div>

<ul id="parentUl">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
<script>
//事件冒泡
	function parentFn(){
		alert("父级事件触发");
	}
	function childrenFn(){
		alert("子级事件触发");
		stopBubble();//阻止事件冒泡
	}
	function stopBubble(e){
		//如果提供事件对象，不是IE浏览器
		if(e && e.stopPropagation){
			e.stopPropagation();
		}else{
			event.cancelBubble = true;
		}
	}
//事件委托（代理）	
//原始做法
let parentUl = document.getElementById("parentUl");
li = parentUl.getElementsByTageName("li");
li.forEach(item=>{
	item.onclick = function(){
		this.style.backgroundColor = "red";
		alert(this.innerHTML);
	}
})
//事件委托（代理）利用事件冒泡原理
let parentUl = document.getElementById("parentUl");
parentUl.onclick = function(e){
	let target = e.target || e.srcElement;
	if(target.nodeName.toLowerCase()=="li"){
		target.style.backgroundColor = "red";
	}
}
//事件委托可以节约大量内存，减少事件注册；
//当新增对象的时候，不用在对其事件进行绑定；

4.利用argument进行数组求和
//1.箭头函数没有argument,有rest;
//2.普通函数才有argument
fun sum(d){
	let sum = 0;
	for(let i=0;i<argument.length;i++){
		sum += argument[i];
	}
	return sum;
}
console.log(sum(1,2,3));//6
//3.利用argument求fn(5)的阶乘(补充)
 arguments 的主要用途是保存函数参数， 但这个对象还有一个名叫 callee 的属性，返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文，这有利于匿名函数的递归或者保证函数的封装性。
 function callee(n){
 	if(n==1){
 		return 1;
 	}else{
 		return n+argument.callee(n-1);
	}
 }
 console.log(callee(4));//10
//现在已经不推荐使用arguments.callee()；
原因：访问 arguments 是个很昂贵的操作，因为它是个很大的对象，每次递归调用时都需要重新创建。影响现代浏览器的性能，还会影响闭包。(借鉴的大佬csdn说法)

5.一维数组转化为二维数组
function changeArrGroup(arr,newSplitArrLength){
	let changeIndex = 0;
	let secondArr = [];
	while(newSplitArrLength<arr.length){
			secondArr.push(arr.slice(changeIndex,changeIndex+=newSplitArrLength));
	}
	return secondArr;
}	
console.log(changeArrGroup([1,2,3,4,5,6],2));

6.将函数的属性和方法进行拷贝，实现类的继承
function Person(name){
	this.name = name;
	this.say = function(){
		console.log(this.name);
	}
}
function Student(){
	Person.aplly(this,argument);
}
let student = new Studetn("可可");
student.say();//可可
7.运用支付场景，多次调用执行一次
function once(fn){
	let done = false;
	return function(){
		if(!done){
			done = true;
			fn.apply(this,argument);
		}
	}
}
let pay = once(function(money){
	console.log(`支付了${money}`)
})
pay(10);

8.在浏览器输入一个地址URL发什么?(有赞)https://www.jianshu.com/p/800abe3e0d60

9.闭包考点（面试完了回忆起来笔试题目）有赞
function a(callback){
	let u = 0;
	return (i=>{
		u++;
		return callback(i+u);
	})
}
let test = a(x=>{
	return x+1;
})
console.log(test(0));
console.log(test(0));
10.v-if和v-show如果要一起使用应该怎么处理；（深圳宏电。。。）
11.用css要实现0.5px怎么实现；
12.两个图片在一行，怎么解决图片和另外一张图片之间空隙
13.vue中v-mode用原生js怎么实现
14.vue中watch和computer具体使用场景，watch监听中立即执行什么场景下才有用，监听对象上的属性需要怎么操作
15.webpack打包优化有哪些方面
16.js中ajax请求和vue中axios请求有什么区别，具体说下
17.
</script>