分享一些在日常开发过程中的常用方法，如：深拷贝，防抖与节流

1. 深拷贝/浅拷贝

（1）浅拷贝

 用等号' = '就是浅拷贝，复制的是指针，指向同一个堆地址

（2）深拷贝

第一种：Object.assign 可以实现一层的深拷贝，对于两层以上的就不适用了

let obj1={
	a:20,
	b:{
           c:"ccc"
	}
}
let obj2 = Object.assign({}, obj1)

obj1.a=30
console.log(obj2.a); // 20

obj1.b.c='ddd'
console.log(obj2.b.c); // ddd

第二种: JSON.parse和JSON.stringify，可以实现多层嵌套的深拷贝

let obj1={
			id:3,
			age:{
				age2:{
					age3:18
				}
			}
		}
let obj2=JSON.parse(JSON.stringify(obj1))
obj1.age.age2.age3=30

console.log(obj1.age.age2.age3); //18
console.log(obj2.age.age2.age3); //30

第三种：对于数组可以用...展开运算符可以对单层数组中的基本数据类型进行深拷贝

let arr1=[1,{b:{c:{d:20}}},{e:20}]
let arr2=[...arr1]

arr1[0]=10
console.log(arr2[0]);//1

arr1[1].b.c.d=50
console.log(arr2[1].b.c.d); //50

// 对于对象，哪怕是一层都不能进行深拷贝
arr1[2].e=100
console.log(arr2[2].e); // 100

第四种: 比较完美的深拷贝方法，递归实现对象或数组的深拷贝；

function newCopy(newobj,oldobj){
		for(var k in oldobj){
			//k代表oldobj对象中的每一个键名 item就是每一个键名的值
			let item=oldobj[k]
			//判断是否是数组(判断类型时数组也是obj所以要写在前面)
			if(item.constructor===Array){
				newobj[k]=[]
				newCopy(newobj[k],item)
			} else if(item.constructor===Object){//判断是否是对象
				newobj[k]={}
				newCopy(newobj[k],item)
			} else{//判断是否是简单类型
				newobj[k]=item
			}
		}
	}
  newCopy(r,obj) // r：用于储存深拷贝后的对象或数组 obj：需要进行深拷贝的对象或者数组

2. 防抖与节流

（1）防抖

<input type="" name="" id="input1" value=""/>
let tel1 =document.querySelector("#input1")
	tel1.addEventListener("input",ant(demo,1000))
	function ant(fn,num){
		let timeOut=null
		return function(args){
			if(timeOut) clearTimeout(timeOut)
			timeOut=setTimeout(fn,num)
		}
	}
	function demo(){
		console.log("防抖");
	}

（2）节流

<input type="" name="" id="input2" value=""/>
let tel2 =document.querySelector("#input2")
	tel2.addEventListener("input",throttle(handle, 500))
	function throttle(fn, delay) {
                 let flag = true;
		 return function() {
			    if(!flag) return;
			     flag = false;
			       etTimeout(() => {
			          fn.apply(this, arguments);
			          flag = true;
			        }, 500)
			    }
			}
	// 处理函数
	function handle() {
	    console.log("节流");
	}

3.数组中的对象去重,碰到相同的键值对进行去重处理。

ar arr = [{name: 't',id: 5}, {name: 't',id: 8}, {name: 'b',id: 3}, {name: 'c',id: 4},
	 {name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];
			let duplicateRemoval = () => {
			    let map = new Map();
			    for (let item of arr) {
			        if (!map.has(item.name)) {
				    //有这个判断就是保留第一个属性，去除后面重复的
				    //没有这个if判断就是碰到重复的进行覆盖
			            map.set(item.name, item);
			        }
			    }
				
			    return [...map.values()];
			}
			let newArr = duplicateRemoval();
                        
			console.log(newArr);
                        /*
			newArr：[
				{name: "t", id: 5},
				{name: "b", id: 3},
				{name: "c", id: 4},
				{name: "d", id: 7}
			]
			*/

4.CSS实现小三角(点击旋转180度)

<div class="main"></div>

<style type="text/css">
	.main {
	         width: 0;
		 height: 0;
		 border-left: 15px solid transparent;
		 border-right: 15px solid transparent;
		 border-bottom: 15px solid red;
		 transition: 0.5s;
	}
	.active{
	         transform: rotate(180deg);
	}
</style>

<script>
	  //让三角顺时针旋转180度
	  let _click=document.querySelector(".main")
	  let show=false
	  _click.onclick=function(){
		if(show){
			show=false
			_click.className="main"
		} else{
			show=true
			_click.className="active main"
		}
	}
</script>

5.数组去重，用的比较多的就是Set

// Set只是类似数组，并不是一个真正的数组，不能调取数组的方法，所以要拷贝一下
let arr = [1,1,1,2,2,3,3,3]
let arr2=[...new Set(arr)]
console.log(arr2);