10个JavaScript常见高级必背知识点

1、防抖

定义：在事件被触发n秒后再次执行回调，如果在这n秒内又被触发，则重新计时。

function debounce（fn，time）{
   let timer
   return function（）{
     clearTimeout（timer）
     let args = arguments
     timer = setTimeout（（）=>{
       fn.apply(this,args)
     },time）
   }
}

2、节流

定义：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

function throttle（fn，time）{
   let timer = null
   return function（）{
     if（timer）retuen
     timer = setTimeout（（）=>{
       fn.apply(this,arguments)
       timer = null
     },time）
   }
}

3、高阶函数

定义：接收/或返回另外一个函数的函数被称为高阶函数。常见的像数组的map、reduce、filter这些都是高阶函数

//简单的高阶函数
function add（x，y，fn）{
   return fn（x） + fn（y）
}

function fn（num）{
   return Math.abs（num）
}

add（-5，6，fn）；//11

4、函数柯里化

定义：函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收与余下参数且返回结果的新函数的技术。

函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。

示例：

//普通的add函数
funciton add（x，y）{
   return x + y
}

//柯里化后
function curryingAdd（x）{
  return function （y）{
    return x + y
  }
}

add（1，2）  // 3
curryingAdd（1）（2）  // 3

实现：

function curry(func){
  return function curried(...args){
    if(args.length >= func.length){
       return func.apply(this, args)；
    }else(
     return function(...args2){
       return curried,apply(this, args.concat(args2));
     }
   }
  }；
}

//用例
function sum(a,b,c){ 
   return a + b + c；
}
let curriedsum = curry(sum);
console.1og(curriedsum(1，2，3));   //6，仍然可以被正带调用
console.l0g(curriedsum(1)(2,3));   // 6，对第一个参数的柯里化
console.log(curriedsum(1)(2)(3));  //6，全柯里化

5、数组去重

①Set去重

const arr=[1,1,2,2,3,3,4,4,5,5]
const res = Array.from(new set(arr));
console.log(res); // [1,2,3,4,5]

②filter去重

const removeRepeat(arr)=>{
   return arr,filter((item, index) => arr.indexof(item, 0) === index)
}；

 ③includes去重

const removeRepeat(arr) => {
  let repeatArr =[];
  for(let i= 0,len = arr.length; i < len; i++) {
    if(!repeatArr.includes(arr[i])) repeatArr.push(arr[i])
  }
  return repeatArr;
}；

6、数组扁平化

①flat方法

const arr =[1,[2,[3,[4，5]]]，6]
function flatten(arr){
   return arr.flat(Infinity)// 嵌套深度
}
console.log(flatten(arr));  //[1,2,3,4,5,6]

②toString

function flatten(arr){
  return arr.tostring().split(',').map(item => parseFloat(item))
}
console.log(flatten(arr));

③正则

function flatten(arr){
  let str= soN.stringify(arr).replace(/(\[I\])/g,'');
  str ='['+ str + ']'j
  arr = JSON.parse(str)j
  return arr
console.log(flatten(arr))

④循环递归

function flatten(arr){
  let result = [];
  for (let i = 0; i < arr.length; i++){
    if(Array.isArray(arr[1])){  // 是数相就递日调用上面的扁平化一层的代码
       result = result.concat(flatten(arr[i]))};
    } else {  //不是数组，直接通过push版加到返回值数相
       result.push(arr[i])
    }
  }
  return result
}
console.log(flatten(arr));

7、深拷贝

8、getBoundingCilentRect

 9、IntersectionObserve

10、自定义事件

 

更多干货🎁

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 
以上内容技术相关问题😈欢迎一起交流学习🔥嘉vx+18634371151