防抖、节流数组去重例子

最新推荐文章于 2024-07-19 12:58:53 发布

驴驴。

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量123

点赞数

分类专栏： ES6 文章标签： javascript es6

本文链接：https://blog.csdn.net/Hfffs/article/details/120536191

版权

防抖节流数组去重前端性能优化 JavaScript

关键词由CSDN通过智能技术生成

ES6 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

防抖

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖</title>
</head>

<body>
  <input type="text">
  <script>
    // 防抖：高频触发事件，只想要最后一次事件处理程序内部的执行结果
    const input = document.querySelector('input')
    input.oninput = debounce(function () {
      console.log(this.value);
    }, 1000)

    // 封装防抖函数
    function debounce(fn, delay) {
      let timer;
      return function () {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          // 业务代码执行地
          fn.call(this)
        }, delay)
      }
    }
  </script>
</body>

</html>

节流

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节流</title>
  <style>
    body {
      height: 2000px;
    }
  </style>
</head>

<body>
  <script>
    // 节流：控制高频事件的触发次数
    window.onscroll = throttle(function () {
      console.log('滚动了', this);
    }, 1000)

    function throttle(fn, delay) {
      let flag = true;
      return function () {
        if (flag) {
          setTimeout(() => {
            fn.call(this)
            flag = true
          }, delay)
        }
        flag = false
      }
    }
  </script>
</body>

</html>

数组去重

数组去重
1.for循环去重
数组前一项不等于后一项，把后一项删除，再把后一项下标-1
var arr=[1,2,1,2,3,4,3];
let unique=(arr)=>{
    //数组的前一项
    for(let i=0;i<arr.length;i++){
        //数组的后一项
        for(let j=i+1;j<arr.length;j++){
            if(arr[i]===arr[j]){
                arr.splice(j,1);//移除重复元素
                j--;//修正下标
            }
        }
    }
}
unique(arr)
console.log(arr)
2.利用indexof去重
找不到的元素就添加到新的数组
let arr=[1,2,1,2,3,4,3];
let unique = (arr) => {
    let res = [];
    for (let i = 0; i < arr.length; i++){
        //找不到的元素就添加到新的数组
        //在新数组找arr[i]这个元素的下标，如果找不到就arr[i]这个元素添加到新数组
        if((res.indexOf(arr[i])) === -1 ){
            res.push(arr[i]);
        }
    }
    return res;//调用unique()这个函数拿到的是函数的返回值，调用unique拿到的是这个函数的代码块
}
console.log(unique(arr))；
3.利用includes去重
新数组不包含这个元素就把这个元素添加到新数组里
var arr=[1,2,3,2,1,3,4,'1','hello','1']
let unique=(arr)=>{
    let res=[]
    for(i=0;i<arr.length;i++){
        //新数组不包含arr[i]这个元素就把arr[i]这个元素添加到新数组里
        if(!res.includes(arr[i])){
            res.push(arr[i])
        }
    }
    return res
}
console.log(unique(arr))


4.let arr1=[1,2,3,4,5,1,2,3]
var set=new Set(arr1);
console.log(set);
let [...a]=set;
console.log(a)

驴驴。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖、节流数组去重例子

防抖<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防抖&lt
复制链接

扫一扫