前端算法1

创建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('
'+i+'
');
}
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);

数组去重

方法一：

function reap(arr) {
    let newArr=[];
    for(let i=0;i<arr.length;i++){
        if(newArr.indexOf(arr[i])=== -1){
            newArr.push(arr[i]); 
        }
    }
    return newArr;
}
reap([1,2,3,4,1,2,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 驼峰格式

function toCamel(str) {
    let arr = str.split("-");
    let newstr ='';
    for (var i = 1; i < arr.length; i++) {
      var str = arr[i];
      var upper = str[0].toUpperCase();
      str = str.replace(str[0], upper);
      arr[i] = str;
    }
    for(let i=0;i<arr.length;i++){
        newstr += arr[i];
    }
    return newstr;
}

console.log(toCamel('font-size'));

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)');