结构整合算法

数组数据扁平转树形结构

 const data = [
        { id: "01", name: "张大大", pid: "", job: "项目经理" },
        { id: "02", name: "小亮", pid: "01", job: "产品leader" },
        { id: "03", name: "小美", pid: "01", job: "UIleader" },
        { id: "04", name: "老马", pid: "01", job: "技术leader" },
        { id: "05", name: "老王", pid: "01", job: "测试leader" },
        { id: "06", name: "老李", pid: "01", job: "运维leader" },
        { id: "07", name: "小丽", pid: "02", job: "产品经理" },
        { id: "08", name: "大光", pid: "02", job: "产品经理" },
        { id: "09", name: "小高", pid: "03", job: "UI设计师" },
        { id: "10", name: "小刘", pid: "04", job: "前端工程师" },
        { id: "11", name: "小华", pid: "04", job: "后端工程师" },
        { id: "12", name: "小李", pid: "04", job: "后端工程师" },
        { id: "13", name: "小赵", pid: "05", job: "测试工程师" },
        { id: "14", name: "小强", pid: "05", job: "测试工程师" },
        { id: "15", name: "小涛", pid: "06", job: "运维工程师" }
      ];

  let newArr = [];
      data.forEach(item => {
        if (item.pid === "") {
          newArr.push(item);
        }
        const child = data.filter(data => data.pid === item.id);
        if(child.length === 0) return
        item.child = child
      });
      console.log(newArr);

// 递归写法
   function terrData (list, rootValue) {
      const arr = []
      list.forEach(item => {
        if (item.pid === rootValue) {
          const child = this.terrData(list, item.id)
          console.log(child)
          if (child.length) {
            item.child = child
          }
          arr.push(item)
        }
      })
      return arr
    }

 防抖节流

    div.addEventListener('click', fn(()=>{
       console.log(123);
     }))
     function fn(fn1) {
       let tiem = null
       return function() {
         clearInterval(tiem)
         tiem = setTimeout(()=>{
           fn1()
         },1000)
       } 
     }

 div.addEventListener(
        "click",
        fn(() => {
          console.log(123);
        })
      );

      function fn(fn1) {
        let tiem = null;
        return function() {
          if (tiem) {
            return;
          }
          tiem = setTimeout(() => {
            fn1();
            tiem = null;
          }, 1000);
        };
      }

  冒泡排序

function bubbleSort(arr) {

    var len = arr.length;

    for (var i = 0; i < len - 1; i++) {

        for (var j = 0; j < len - 1 - i; j++) {

            if (arr[j] > arr[j+1]) {       // 相邻元素两两对比

                var temp = arr[j+1];       // 元素交换

                arr[j+1] = arr[j];

                arr[j] = temp;
            }
        }
    }
    return arr;
}

浅拷贝

        // 浅拷贝
        let obj = {
            uname: '张三丰',
            age: 22,
            sex: '男'
        }
        let newObj = {}
        for (let k in obj) {
            newObj[k] = obj[k]
        }
        obj.uname = '阿飞'
        console.log(newObj, obj);
        // 方法
        Object.assign(newObj, obj)

深拷贝

        let a = {
            uname: '张三丰',
            age: 22,
            sex: '男',
            color: ['red', ',asdasd'],
            message: {
                idnex: 1,
                score: 99
            }
        }
        let b = {}

        function kaobei(newObj, obj) {
            for (let k in obj) {
                if (obj[k] instanceof Array) {
                    newObj[k] = [] // 定义一个空数组
                    kaobei(newObj[k], obj[k]) // 递归  遇见数组 就递归  直到遇见简单类型赋值
                } else if (obj[k] instanceof Object) {
                    newObj[k] = {}
                    kaobei(newObj[k], obj[k]) // 递归
                } else {
                    newObj[k] = obj[k]
                }
            }
        }
        kaobei(b, a)
        console.log(a, b);

拖拽

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script>
        window.addEventListener("load", function() {
            let div = document.querySelector('div')

            function move(e) {
                let X = e.clientX - divX
                let Y = e.clientY - divY

                if (X < 30) {
                    X = 0;
                } else if (X > document.documentElement.clientWidth - div.offsetWidth) {
                    X = document.documentElement.clientWidth - div.offsetWidth;
                }


                if (Y < 0) {
                    Y = 0
                } else if (Y > document.documentElement.clientHeight - div.offsetHeight) {
                    Y = document.documentElement.clientHeight - div.offsetHeight
                }


                div.style.top = Y + 'px'
                div.style.left = X + 'px'

            }
            let divX
            let divY

            div.addEventListener("mousedown", function(e) {
                divX = e.offsetX
                divY = e.offsetY
                document.addEventListener('mousemove', move)

            })

            div.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move)
            })


        })
    </script>
</head>

<body>
    <div>

    </div>
</body>

数组查重

methods1(arr) {
  return Array.from(new Set(arr))
},