前端一些算法&日常实践

头像
小猿张
    阅读 5 分钟

    前端拖拽

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin:0;
      padding:0;
    }
    .box{
      background-color: aquamarine;
      width: 100px;
      height: 100px;
      position: absolute;
      top:0;
      left:0;
      cursor: move;
    }
  </style>
</head>
<body>
 <div class="box" id='box'>
     
 </div>
</body>
<script>

  // 鼠标移动过快，鼠标会脱离拖拽的盒子，在盒子外面鼠标移动无法触发盒子的mousemove，盒子不会移动，
  let dom = document.getElementById('box')
  console.log('dom',dom);
  dom.addEventListener('mousedown', down)
  function down(e){
    this.initialScreenX = e.screenX;
    this.initialScreenY = e.screenY;
    this.CLickX = e.clientX;
    this.ClickY = e.clientY;
    this.BoxX = this.offsetLeft;
    this.BoxY = this.offsetTop;
    this._MOVE = move.bind(this)
    this._UP = up.bind(this);
    document.addEventListener('mousemove', this._MOVE);
    document.addEventListener('mouseup', this._UP);
    // this.setCapture();
  }
  function move (e){
    let curBoxX = e.clientX - this.CLickX + this.BoxX;
    let curBoxY = e.clientY - this.ClickY + this.BoxY;
    if(curBoxX < 0){
      curBoxX = 0
    } 
    if(curBoxY < 0){
      curBoxY = 0
    } 
    dom.style.left = curBoxX  + 'px';
    dom.style.top = curBoxY + 'px';
  }
  function up(e){
     document.removeEventListener('mousemove', dom._MOVE)
     document.removeEventListener('mouseup', dom._UP)
    //  this.releaseCapture();
  }
</script>
</html>

    大数相加

    function add(str1,str2){
  let num1 = str1.split('').reverse();
  let num2 = str2.split('').reverse();
  console.log(num1, num2)
  let nextNum = 0;
  let total = [];
  for(let i = 0;i < num2.length;i++){
    let curNum = 0;
    if(num1[i]){
      curNum = Number(num1[i]) + Number(num2[i]) + Number(nextNum);
      if(curNum >= 10){
         nextNum = String(curNum)[0];
         total.push(String(curNum)[1]);
      } else {
        nextNum = 0;
        total.push(curNum)
      }
    } else {
      curNum = Number(num2[i]) + nextNum;
      if(curNum >= 10){
        nextNum = String(curNum)[0];
        total.push(String(curNum)[1]);
      } else {
        nextNum = 0
        total.push(curNum)
      }
    }
  }
  return total.reverse().join('');
}

let d = add(
             "123456789123456789123456789123456789123456789123456734",
"1241519123456789123456789123456789123456789123456789123451234567891")

    数组去重

    去重
let arr = [12, 23, 12, 15, 25, 23, 25, 14,16];

let a = Array.form(new Set(arr))
let b = [...new Set(arr)]


let newArr = []; // 第一种方案
// 拿出当前项和后面的进行比较，只需要length -1 项和后面比较
for(let i = 0; i < arr.length - 1;i++){
  let item = arr[i];
  args = arr.slice(i+1); // 当前项后的所有数据
  if(args.indexof(item) > -1){
    // 如果当前项目包含可以删除，也可以放入新数组
    // 第二种
    // arr.splice(i,1);
    // splice 原来数组改变，如果i++，则会数组塌陷
    // 性能不好，当前项删除，后面索引都要改变
    // i--;

    //第三种
    // arr[i] = null;

    // arr[i] = arr[arr.length -1];
    // arr.length --;
    // i--;

  } else {
    // newArr.push(item)
  }
}

// arr.filter(item => item !== null);

// 对象键值对, 那数组的每项向新容器中存，如果有把当项干掉
// let obj = {}
// for(let i = 0; i < arr.length; i++){
//   let item = arr[i];
//   if(typeof obj[item] !== 'undefined'){
//     arr[i] =  arr[arr.length - 1];
//     arr.length--;
//     i--;
//     continue;
//   }
//   obj[item] = item;
// }
// console.log(arr);

    排序

    冒泡排序
    image.png

    
function Bubble(arr){
  let temp = null;
  for(let i = 0; i < arr.length-1;i++){
    for(let j = 0;j < arr.length-1-i;j++){
      if(j[i] > j[i+1]){
        // 当前项大于后一项
        temp = j[i];
        j[i] = j[i+1]
        j[i+1] = temp;
      }
    }
  }
  return arr;
}

    插入排序（扑克牌）
    image.png

    function insert(arr){
// 1、准备一个新数组，用来存储抓到手里的牌，开始先抓一张牌进来
let handle = [arr[0]];
// 2、从第二项开始依次抓牌，一直到台面上的牌抓光
for( let i= 1; i< arr.length;i++){
 // a 是新抓的牌
 let a = arr[i];
 // 和 handle手里的牌依次比较
 for(let j = handle.length -1;j >= 0;j--){
   // 每一次要比较手里的牌, 从大到小比较
   let b = handle[j];
   // 如果当前新牌A比要比较的牌B大了，把A放到B的后面;
   if( a > b){
     handle.splice(j+1,0,a);
     break;
   }
   //已经比到第一项， 我们把新牌放到手中最前面即可
   if(j == 0){
    handle.unshift(a)
   }
 }
} 
 return handle
}

    快速排序（中间值，大右小左，依次递归，最后合并）

    function quick(arr){
 // 4、结束递归，当arr中小于等于一项，则不用处理
 if(arr.length <= 1){
   return arr
 }
 // 1、找到数组中的中间项，在原有的数组中把他移除 
 let middleIndex = Math.floor(arr.length/2);
 let middleValue = arr.splice(middleIndex,1)[0];
// 2、准备左右两个数组，循环剩下数组中的每一项，比当前项小的放在左边数组中，反之放到右边的数组中
 let arrLeft = [];
 let arrRight = [];
 for(let i = 0; i< arr.length;i++){
  let item = arr[i];
  item < middleValue? arrLeft.push(item) : arrRight.push(item); 
 }
// 3、递归方式让左右两边的数组持续这样的处理，一直到左右两边都排好序了，（最后让左边+ 中间+ 右边拼接成为最后的结果）
return quick(arrLeft).concat(middleValue, quick(arrRight));
}

    输入一个正数N，输出所有和为N的连续正数序列

    例如： 输入15
    结果: [[1,2,3,4,5], [4,5,6],[7,8]]

    function out(num){
  let middleValue = Math.ceil(num / 2)
  let arr = [];
  let curNum = [];
  let total = 0;
  for(let i = 1;i <= middleValue;i++){
    for(let j = i; j <= middleValue;j++){
       curNum.push(j)
       total = curNum.reduce((x,y) => x + y)
       if(total >= num){
          if(total === num){
            arr.push(curNum)
          }
          curNum = [];
          total = 0
          break;
       }
    }
  }
  return arr
}
out(15)

    接雨水

    给定n个非负整数表示每个宽度为1的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水
    示例：
    输入： height = []

    html
    小猿张
    3 声望0 粉丝
    « 上一篇
    操作DOM的方法
    下一篇 »
    react 路由

    引用和评论

    推荐阅读
    头像
    Hybird混合开发

    小猿张阅读 1.1k

    头像
    Html&Css测试试题（简单版）

    云绮棠兮赞 2阅读 11.9k

    头像
    刷新iframe的几个方法，管你跨不跨域

    lllllxt_in_sf阅读 9.3k

    头像
    在线考试答题系统（Web+H5+小程序）开发方案与实现附源代码

    行走的打火机阅读 6.2k

    头像
    语义化 HTML (Semantic HTML)

    Mitchell_C阅读 2.6k

    头像
    使用canvas如何实现一个音乐频谱？

    smallStone赞 1阅读 1.6k

    头像
    vue3组件跨层级数据传递provide/inject

    兔子先森赞 1阅读 613

    0 条评论
    得票最新