前端工程实践及一些算法

ElonMuscle
262 阅读5分钟

FE-工程与实践部分

  * { /deep/ { @import "@/path/to/style.scss" } }
  * {
      ::v-deep { 
        .subVDomClass { 
          //... 
        }
      }
    }

FE-算法部分

  • 不含Array对象的深拷贝objectDeepClone,无递归,含数组的对象其数组类型会发生变化，若要保持数组类型不变见deepClone

function objectDeepClone(json) {

    var result = Array.isArray(json) ? [] : {}
    //原始数据栈
    var stack = [json];
    //目标数据栈
    var mirrorStack = [result];

    while (stack.length > 0) {

        //   // 深度优先       数据出栈
        //   var item = stack.pop();
        //   var targetItem = mirrorStack.pop();

        //   广度优先
        var item = stack.shift();
        var targetItem = mirrorStack.shift();

        for (var key in item) {
            var val = item[key]
            if (typeof val !== 'object') {
                //然后一个个的引用对象的值修变成基本数据类型
                targetItem[key] = val;
            } else {
                //数据入栈
                stack.push(val);
                //   console.log(key,targetItem)

                targetItem[key] = Array.isArray(val) ? [] : {};


                //先建立引用对象
                mirrorStack.push(targetItem[key]);
            }
        }
    }
    return result;
}
  
function deepClone(obj) { 
 function clone(node) { let result ={};
        for (var prop in node){
            if (node[prop] instanceof Object) {
                result[prop] = deepClone(node[prop]);
            } else {
                result[prop] = node[prop];
            }
        }
        return result;
    }
    if( Array.isArray(obj)){
        return obj.map(v=> deepClone(v))
    } else if( obj instanceof Object ){
        return clone(obj)
    } else{
        return obj
    }
}
  • 遍历树-需求:处理组织结构数据中组织的一些属性，如删除空组织，更改组织中的属性键名 。以下实现为非递归、原始数据有损(直接操作)方式
function walkTree(json) { 
    //原始数据栈
  var stack=[json]
  while(stack.length>0) { 
    //数据出栈
    var item = stack.pop();
    //console.log(JSON.stringify(item))
    var children = item.children;
    if(children!=null){
      //do sth...
      for (let child of  children)
      //数据入栈
      stack.push(child);
      }
      else{
        //do sth...
      }
  } 
}

//递归无损方式
const process= function (node) {
  let result = {}
  result.title = node.orgName
  result.id = node.id
  result.pid = node.pid
  result.expanded = true
  if(node.children!=null&&node.children.length>0){
    result.children = node.children.map(item=> process(item))
  } 
  return result
}
  • 扁平化JSON
function flatten(json) { 
    let  result={}
    //原始数据栈
    var stack=[json]
    while(stack.length>0) { 
      //数据出栈
      var item = stack.pop(); 
      for(let k of Object.keys(item)){
        let  sub=item[k]
        if(typeof sub=="object" && !Array.isArray(sub)){    
            let tempObj={}      
            for(let subk of Object.keys(sub)){
                tempObj[k+'.'+subk]=sub[subk]
                //数据入栈
                stack.push(tempObj); 
            }           
        }else{
          result[k] = sub
        }    
      }
  } 
  return result
}
//flatten({a:{b:{c:1},a:{b:11},c:[1,2]},b:{c:3},c:3}) ->  {"c":3,"b.c":3,"a.c":[1,2],"a.a.b":11,"a.b.c":1}

参考

  1. segmentfault-TheWalkingFat-JS算法之深度优先遍历(DFS)和广度优先遍历(BFS)
  2. github-Advanced-Frontend-高级前端进阶-前端面试
  3. sobird.me-面试题之-深拷贝
avatar
文章
阅读
粉丝