周老师突击大厂面试题记录

VUE

对于双向绑定的理解（vue2.0 对比 vue3.0）
首先
vue2.0 双向绑定使用的是 Object.defineProperty
具体代码

	// vue 2
		var obj = {
			name:''
		}
		
		//深拷贝
		let newobj = JSON.parse(JSON.stringify(obj))
		
		Object.defineProperty(obj,'name',{
			get(){
				return newobj.name
			},
			set(newval){
				newobj.name = newval;
				NAME.innerHTML = newval
				INPUT.value = newval
			}
		})

弊端 需要进行深拷贝 如果有多个属性就需要遍历

vue 3.0 使用

		//obj 是需要监听的对象
		obj = new Proxy(obj,{
			//target就是obj对象   key是属性  value 是新值
			set(target,key,value){
				target[key] = value
				//双向绑定修改页面
				NAME.innerHTML = value
				INPUT.value = value
			},
			get(target,key){
				//返回值
				return target[key]
			}
		})

对比vue2.0 他不再需要遍历每个属性 也不用进行深拷贝

跨域问题

在2013年以前基本没有跨域问题，那时候前后端还没有分离，前端代码和后端都部署在一个服务器上，之后因为前后端分离才需要解决跨域问题。

首先解决跨域问题是方法是JSONP

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">

因为 script 是不存在跨域问题的 所以JSONP的玩法就是

<script src="http://test.com/list?callback=func">
func(data){
	//data就是返回的数据
	console.log(data)
}

给服务器传func方法
服务器会准备数据存在func({这里是准备的数据})
发送回去
JSONP的弊端

1. 只能发送GET
2. 不安全
3. 有缓存
4. 大小限制小

之后也有用iframe解决跨域

然后现在用的就是cors后端解决跨域
开发的时候用proxy解决跨域但是打包后就没有webpack
所以就需要用nginx

前端算法基础

1. 数组去重（索引塌陷性能不好）

// 数组去重
		var arr = [2,2,3,2,7,9,0,9,5,6];
		// 算法的方法
		for(var i =0;i<arr.length-1;i++){
			var temp = arr[i];
			for(var j=i+1;j<arr.length;j++){
				if(temp==arr[j]){
					arr.splice(i,1);
					i--;
				}
			}
		}
		console.log(arr)

2. es6中的new Set()方法

		var arr = [2,2,3,2,7,9,0,9,5,6];
		// 直接用es6的方法
		//new set()得到的是一个类对象
		let newarr =[...new Set(arr)];

3. 运用类 中 属性名不能重复的方法去重

// 类 处理
		var obj = {}
		arr.forEach(v=>{
			//判断是不是已经有了那个属性
			if(!obj.hasOwnProperty(v)){
				//属性名和值都是V
				obj[v]=v
			}
		})
		var newarr = [];
		for(key in obj){
			newarr.push(Number(key))
		}
		
		console.log(newarr)

冒泡排序

两两比较 10个元素需要比9次

// 冒泡排序
		var arr = [2,2,3,2,7,9,0,9,5,6];
		for(var i=0;i<arr.length-1;i++){
			for(var j = 0;j<arr.length-1-i;j++){
				if(arr[j]>arr[j+1]){
					var temp = arr[j];
					arr[j] = arr[j+1];
					arr[j+1] = temp;
				}
			}
		}
		console.log(arr)

sort排序

	// sort
		var arr = [2,2,3,2,7,9,0,9,5,6];
		arr.sort((a,b)=>a-b)
		console.log(arr)

选择排序

从左到右 每次找到最小的 交换到前面来

		// 选择排序
		var arr = [2,2,3,2,7,9,0,9,5,6];
		for (var i = 0; i < arr.length - 1; i++) {
			// 记录最小值
			var index = arr[i];
			for (var j = i + 1; j < arr.length - 1; j++) {
				if (index > arr[j]) {
					var temp = index;
					index = arr[j];
					arr[j] = temp;
				}
			}
			arr[i] = index
		}

		console.log(arr)

插入排序

像扑克摸牌一样 抽一张牌对比手上的牌 如果找都手上的一张牌比摸得牌大就把这张牌插入 找到的下标前面

		// 插入排序
		var newarr = [];
		newarr.push(arr[0]);
		for(var i=1;i<arr.length;i++){
			// 找到需要在哪里插入
			var index = newarr.findIndex((v)=>arr[i]<v)
			if(index==-1){
				index= newarr.length
			}
			newarr.splice(index,0,arr[i])
		}
		console.log(newarr)

快速排序

找中轴 抽离出来 剩下的数比中轴大的放右边 小的放左边
左递归 右递归

		// 快速排序
		function quick(arr){
			// 找中轴
			if(arr.length<=1) return arr
			var centre = arr.length/2
			var leftarr = [];
			var rightarr = [];
			let centeitem = arr.splice(centre,1).join('');
			arr.forEach(v=>{
				if(v>centeitem){
					rightarr.push(v)
				}else{
					leftarr.push(v)
				}
			})
			return quick(leftarr).concat(centeitem,quick(rightarr))
		}
		
		console.log(quick(arr))

ES6扁平化处理

// 扁平化处理ES6
		var arr1 = [1, 2, [3, 4]];
		console.log(arr1.flat(Infinity))

变成字符串

		var arr1 = [1, 2, [3, 4]];
		// console.log(arr1.flat(Infinity))
		console.log(arr1.toString().split(','))

循环 判断里面的原生V是不是数组

		var arr1 = [1, 2, [3, 4]];
		// console.log(arr1.flat(Infinity))
		while(arr1.some(v=>Array.isArray(v))){
			arr1 = [].concat(...arr1)
		}
		console.log(arr1)