手写小练习

节流防抖 ：当函数绑定一些持续性的事件时，resize，click，mousemove，键盘输入等等。如果每一次触发都要执行一次函数，这样资源请求太频繁。

防抖：就是指触发时间后n秒才执行函数，如果在n秒内再次执行函数，重新计算函数执行事件
节流：就是指连续触发时间在n秒中会执行一次

防抖函数：

function dobounce（fn,delay）{
let timer 
return function(...args){
if(timer){
     clearTimeout(timer)
     }
timer = setTimeout(() =>{
fn.apply(this,args)
    },delay)
  }
}

节流：

function   thirottle(fnm,delayu){
  let last = 0
  return function(...args){
  const new = date.now()
  if(now - last >delay){
     last = now 
     fn.apply(this,args)
    }
  }
}

深拷贝：

const cloneObj = JSON.parse(JSON.stringify(obj)

sort 排序

const arr = 【3,2,5,1,4】
arr.sort((a,b) 
console.log(arr)

冒泡排序：

function bubbleSort(arr){
    let leng = arr.length 
    for (let i =0;i<leng -1;i++){
    for (let j = 0;j<leng-1-i;j++){
    if(arr【j】>arr[j+1]】{
        let num = arr[j]
        arr[j] = arr[j+1]
        arr[j+1] =num
       }
      }
    }
 return arr
}

数组去重set

const newarr = [...new Set(arr)]
或者
const newArr = Array.from(new Set(arr))

使用css绘制三角形

上三角：
div{
            width: 0px;
            height: 0px;
            border-top:20px solid red;
            border-bottom:20px solid rgb(0,0,0,0);
            border-left:20px solid rgb(0,0,0,0);
            border-right:20px solid rgb(0,0,0,0);
        }

下三角：

.box2{
            width: 0px;
            height: 0px;
            border: 20px solid transparent;
            /* border-top:20px solid transparent;
            border-bottom:20px solid rgb(0,0,0,0);
            border-left:20px solid rgb(0,0,0,0);
            border-right:20px solid rgb(0,0,0,0); */
            border-bottom: 20px solid red;
        }

让盒子居中

position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;

先设置绝对定位，然后定位在页面的高50%和左边的50%。但是注意这时候，盒子自身有大小。所以就必须再移动盒子自身长度的一半，把盒子完全居中

indexOf 去重

const newArr= arr.filter(item,index) =>arr.indexOf(item) ===index