前端算法1

川长思鸟来 2023-02-27 10:44 11阅读 0赞

**创建DOM**

第一种：

for(let i=0;i<1000;i++){ 
      var el = document.createElement('p');
      el.innerHTML = i;
      document.body.appendChild(el);
    }

第二种：

let html =[];
    for(let i=0;i<100;i++){ 
     html.push('<p>'+i+'</p>');
    }
    document.body.innerHTML = html.join('');

**if else优化**

const mod= new Map(
     [
    	['phone',100],
    	['age',20],
    	['time',899]
     ]
    );
    
    const pric = (name)=>{ 
       return mod.get(name);
    }
    pric('age');

**includes优化**

const arr= [1,2,3,4,5,6];
    function verif(id){ 
      if(arr.includes(id)){ 
        return '包含'
      }else{ 
        return '不包含'
      }
    }
    
    verif(3);

**数组去重**

方法一：

方法二 ：

[...new Set([1,2,3,4,5,1,2,3])]

**节流函数**  
持续触发 scroll 事件时，并不立即执行 handle 函数，当 1000 毫秒内没有触发 scroll 事件时，才会延时触发一次 handle 函数。

function debounce(fn, wait) { 
      let timeout = null
      return function () { 
        if (timeout !== null) clearTimeout(timeout)
        timeout = setTimeout(fn, wait)
      }
    }
    function handle() { 
      console.log(Math.random())
    }
    window.addEventListener('scroll', debounce(handle, 1000))

**转换成驼峰形式**

css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式

**RGB转换成16进制**

function colorRGBtoHex(color) { 
        var rgb = color.split(',');
        var r = parseInt(rgb[0].split('(')[1]);
        var g = parseInt(rgb[1]);
        var b = parseInt(rgb[2].split(')')[0]);
        var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        return hex;
    }
    toHexString('rgb(100,200,100)');