美文网首页
前端常用算法

前端常用算法

作者: wxyzcctn | 来源:发表于2021-07-27 21:11 被阅读0次

1. 通过parentId生成树形结构

let data = [
        {
            id: '1-2-1',
            lable: '第1-2-1级',
            parentId: '1-2'
        },
        {
            id: '1',
            lable: '第1级'
        },
        {
            id: '1-1',
            lable: '第1-1级',
            parentId: '1'
        },
        {
            id: '2-1',
            lable: '第2-1级',
            parentId: '2'
        },
        {
            id: '4',
            lable: '第4级'
        },
        {
            id: '2-2',
            lable: '第2-2级',
            parentId: '2'
        },
        {
            id: '1-2',
            lable: '第1-2级',
            parentId: '1'
        },
        {
            id: '2',
            lable: '第2级'
        },
        {
            id: '3',
            lable: '第3级'
        },
        {
            id: '2-2-1',
            lable: '第2-2-1级',
            parentId: '2-2'
        },
    ]
  • 第一种
    function generateTree(data) {
        const tree = [];
        const parentMap = {};
        data.forEach(item => {
            parentMap[item.id] = true;
        });
        data.forEach(item => {
            if (!item.parentId) {
                // 在原始数据中不存在parentId时就是根节点,tree中首先放入这类节点
                item._root = true;
                tree.push(item);
            } else if (!parentMap[item.parentId]) {
                // 一个节点有parentId,但这个parentId对应id节点没有也作为一个根节点
                tree.push(item);
            }
            data.forEach(each => {
                // 对每一个节点遍历所有节点,找到该节点的子节点
                // 在遍历所有节点过程中,如果遍历到该节点本身直接跳过
                // 如果遍历到的节点的parentId与该节点的id相同,此节点就是该节点的子节点
                if (each.id === item.id) return;
                if (each.parentId === item.id) {
                    if (!item.children) return (item.children = [each]);
                    item.children.push(each);
                }
            });
        });
        return tree
    }
  • 第二种(时间复杂度最小)
    function createTree(data){
        const treeList = [];
        const treeMap = {};
        // 如果原始数组长度为0或数组不存在,返回树结构为[]
        if (!data || data.length === 0) {
            return treeList;
        }
        // 将原始数据的每个节点存入一个对象中,这个对象的key为节点id,value为节点自身
        for (let i = 0; i < data.length; i++) {
            treeMap[data[i].id] = { ...data[i], children: [] };
        }
        // 遍历上一步生成的节点对象,如果对象一个value的parentId存在,将该节点作为key为parentId的节点的children值
        // 如果对象一个value的parentId不存在则为根节点存入树结构数组中
        for (let key in treeMap) {
            const value = treeMap[key];
            if (value.parentId !== null && value.parentId !== '' && value.parentId !== undefined) {
                if (!treeMap[value.parentId]) continue;
                treeMap[value.parentId].children.push(value);
            } else {
                treeList.push(value);
            }
        }
        return treeList
    }

2. 实现数组的随机排序

var arr = [1,2,3,4,5,6];
function randomOrder(i,j){
  return Math.random() > 0.5 ? -1 : i
}
arr.sort(randomOrder)

3. 兼容性较强的事件侦听器函数

        const EventUtils = {
            // 视能力分别使用dom0||dom2||IE方式 来绑定事件
            // 添加事件
            addEvent: function(element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                } else {
                    element["on" + type] = handler;
                }
            },
            // 移除事件
            removeEvent: function(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                } else {
                    element["on" + type] = null;
                }
            },
            // 获取事件目标
            getTarget: function(event) {
                return event.target || event.srcElement;
            },
            // 获取 event 对象的引用,取到事件的所有信息,确保随时能使用 event
            getEvent: function(event) {
                return event || window.event;
            },
            // 阻止事件(主要是事件冒泡,因为 IE 不支持事件捕获)
            stopPropagation: function(event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;
                }
            },
            // 取消事件的默认行为
            preventDefault: function(event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            }
        };

4. 实现 flatten 函数

var arr = [1, 2, 3, [4, 5], [6, [7, [8]]]]
  • 第一种方法:使用数组的reduce方法
function flatten(arr) {
  return arr.reduce((result,item)=>{
    return result.concat(Array.isArray(item) ? flatten(item) : item)
  },[])
}

reduce包含两个参数:回调函数,传给total的初始值
求数组的各项值相加的和:

arr.reduce((total, item)=> {  // total为之前的计算结果,item为数组的各项值
    return total + item;
}, 0);
  • 第二种方法:将数组转换为字符串,然后转换为一维数组
function flatten(arr) {
  return arr.toString().split(",").map((item)=>{
    return +item
  })
}

或者(arr.join(",")能将数组多维或一维arr转换为以,分隔的字符串)

function flatten(arr) {
  return arr.join(',').split(",").map((item)=>{
    return +item
  })
}
  • 第三种方法:递归
function flatten(arr) {
  var res = [];
  for(let item of arr){
    if(Array.isArray(item)){
      res = res.concat(flatten(item))
    }else{
      res.push(item)
    }
  }
  return res
}
  • 第四种方法:扩展运算符
    es6的扩展运算符能将二维数组变为一维
[].concat(...[1, 2, 3, [4, 5]]);  // [1, 2, 3, 4, 5]
function flatten(arr) {
  while(arr.some(item=>Array.isArray(item))){
    arr = [].concat(...arr)
  }
  return arr
}

5. 实现一个sleep

sleep函数作用是让线程休眠,指定时间一到便重新唤起。

function sleep(delay){
  var start = (new Date()).getTime()
  while((new Date()).getTime() - start < delay){
    continue;
  }
}

function test(){
  console.log("11111");
  sleep(2000);
  console.log("22222");
}

test()   // 先打印出11111,2秒之后打印22222

6. 解析 URL 的查询参数为对象

let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
parseParam(url)
/* 结果
{ user: 'anonymous',
  id: [ 123, 456 ], // 重复出现的 key 要组装成数组,能被转成数字的就转成数字类型
  city: '北京', // 中文需解码
  enabled: true, // 未指定值得 key 约定为 true
}
*/
let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
let uel2 = window.location.search;      // 获取url查询字符串参数

function parseParam(url){
    let message = /.+\?(.+)/.exec(url)[1]; //   获取查询字符串
  let messArr = message.split('&'); // 获得将字符串以&分割得到的数组
  let messObj = {}; //  结果对象
  for(let item of messArr){
    if(/=/.test(item)){  // 处理有value的参数
      let [key,value] = item.split('=');
      value = decodeURI(value); //  解码
      value = decodeURIComponent(value);    //  解码
      value = /^\d+$/.test(value) ? parseFloat(value) : value;  
      //    参数值全为数字时就变为数字
      if(messObj.hasOwnProperty(key)){  //  一个参数多次出现时,参数的值变为数组
        messObj[key] = [].concat(messObj[key],value)
      } else {
        messObj[key] = value;
      }
    }else{  //  没有value的参数设为true
      messObj[item] = true;
    }
  }
  return messObj;
}

7. 模板引擎实现

var template1 = '我是{{name}},年龄{{age}},性别{{sex}}';
var data1 = {
  name: '小明',
  age: 18
}
render(template1, data1); // 我是小明,年龄18,性别undefined

function render(template,data){
  var reg = /\{\{(\w+)\}\}/g;
  const orgTem = template;
  while(true) {
    var match = reg.exec(orgTem);
//     正则的exec函数在每次匹配时是从上一次匹配的结束位置开始,
//     因此,为了保证匹配的位置不变,循环时需要保证其中的值保持不变
    if (!match) break;
    template = template.replace(match[0], data[match[1]])
  }
  return template
}

8. 转化为驼峰命名

var name = "get-element-by-id"

function changeName(name){
  var newName = name.replace(/(\-\w)/g, function(match){
    return match[1].toUpperCase()
  })
  return newName
}

changeName(name)

9. 查找字符串中出现最多的字符和个数

var str1 = "abcabcabcbbccccc";

function findMostL(str){
    let obj = {};
  for(let i = 0; i < str.length; i++){
    if(obj[str[i]]){
      obj[str[i]] += 1
    }else{
      obj[str[i]] = 1;
    }
  }
  let max = 0;
  let moreLetter = [];
  for(let key in obj){
    max = Math.max(obj[key],max)
  }
  for(let key in obj){
    if(obj[key] === max){
      moreLetter.push(key);
    }
  }
  console.log('出现次数最多的字母是:',moreLetter,'出现次数为',max);
}
findMostL(str1)

相关文章

  • 前端常用算法

    没错,作为一个菜鸟,我真的不认为前端需要用到算法。我不是朝后段喊一声,什么都有了么???(黑人问号)然而实际上,前...

  • 前端常用算法

    1. 通过parentId生成树形结构 第一种 第二种(时间复杂度最小) 2. 实现数组的随机排序 3. 兼容性较...

  • 《前端算法系列》数组去重

    虽然算法在前端开发中很少会得以使用,但是了解常用的算法,熟悉各种算法的性能和优劣,将会让你在前端的道路上走的更远。...

  • 前端常见的面试手写代码

    web 前端工程师在面试时,常常会被要去现场手写/机写代码。涉及的内容包括常用的排序算法、查找算法;JavaScr...

  • 2021.10.21 - 学习记录

    一个算法: 欧几里得算法,最大公约数 前端学习知识点:很多网站不常用table iframe这两个元素,知道原因吗...

  • 算法与数据结构

    五大常用算法之一:分治算法 五大常用算法之二:动态规划算法 五大常用算法之三:贪心算法 五大常用算法之四:回溯法 ...

  • 前端算法

    前端算法

  • 前端算法汇总

    前端算法汇总

  • SHA MD5 Hmac算法是不可逆的, 只有加密, 不能解密

    常用的加密算法:SHA、MD5、Hmac 常用的加密/解密算法: AES、DES 常用的编码解码算法: UrlDe...

  • JVM系列(四):浅谈常用四种垃圾回收算法总结!

    常用四种垃圾回收算法 常用的垃圾回收算法有四种:标记-清除算法、复制算法、标记-整理算法、分代收集算法。 1.标记...

网友评论

      本文标题:前端常用算法

      本文链接:https://www.haomeiwen.com/subject/hqdmpltx.html