前端js编程题总结

1.数组扁平化

下面的数据多层树状结构处理成只有一层children的结构

data = [
  {
    name: "About",
    path: "/about",
    children: [
      {
        name: "About US",
        path: "/about/us"
      },
      {
        name: "About Comp",
        path: "/about/company",
        children: [
          {
            name: "About Comp A",
            path: "/about/company/A",
            children: [
              {
                name: "About Comp A 1",
                path: "/about/company/A/1"
              }
            ]
          }
        ]
      }
    ]
  }
]
// 处理后的结构
[
  {
    name: "About",
    path: "/about",
    children: [
      {
        name: "About US",
        path: "/about/us"
      },
      {
        name: "About Comp",
        path: "/about/company",
        
      },
      {
        name: "About Comp A",
        path: "/about/company/A"
      },
      {
         name: "About Comp A 1",
         path: "/about/company/A/1"
      }
    ]
  }
]

代码实现：

//递归遍历实现
    var recursiveFunction3 = function(){
        var aa=[]
        var cc=[]
        const getStr = function(data){
            data.forEach(item => {
            aa.push({
                name: item.name,
                path: item.path
            })
            if(item.children?.length){
                let children=getStr(item.children)
            }
        })
        }
        getStr(data)
        cc.push({
                name: aa[0].name,
                path: aa[0].path,
                children:aa.slice(1)
        })
        // console.log(cc)
    }
    recursiveFunction3()

代码基于上个基础优化：

var recursiveFunction4 = function(){
        var aa=[]
        const getStr = function(data){
            data.forEach(item => {
            aa.push({
                name: item.name,
                path: item.path
            })
            if(item.children?.length){
                let children=getStr(item.children)
            }
        })
        }
        getStr(data[0].children)
        //...展开运算符  因为前两项数据没变直接拿来用了拷贝 然后把最后一项children替换掉
        aa= [{...data[0],children:aa}]
        console.log(aa)
    }
    recursiveFunction4()//基于recursiveFunction3()优化

还有一种方案借鉴大佬的，代码如下:

//写了一个可自由定义扁平化层级的代码，level代码不扁平的层级
function flatTree(data, level = 0, index = 0){
    let result = [], obj;
    data.forEach(item => {
        result.push(obj = {
            name: item.name,
            path: item.path
        })
        
        if(item.children?.length){
            let children = flatTree(item.children, level, index + 1)
            if(level > index){
                obj.children = children
            }else{
                result = result.concat(children)
            }
        }
    })
    return result
}

降维数组

//利用[].concat.apply实现降维  
    var arr=[[1,2],[3,4]];
    function Jw(obj){
        console.log(Array.prototype.concat.apply([],obj))
            return Array.prototype.concat.apply([],obj);
    }
    Jw(arr);
//如果concat方法的参数是一个元素，该元素会直接插入新数组中；如果参数是一个数组，该数组的各个元素将被插入到新数组中
    function reduceDimension(arr){
        let ret = [];
        for(let i=0;i<arr.length;i++){
            ret=ret.concat(arr[i])
        }
        console.log(ret)
        return ret;
    }
    reduceDimension(arr)  
//递归
    function reduceDimension(arr){
        let ret = [];
        let toArr = function(arr){
            arr.forEach(function(item){
                item instanceof Array ? toArr(item) : ret.push(item);
            });
        }
        toArr(arr);
        console.log(ret)
        return ret;
    }
    reduceDimension([1, 2, [3, 4, [5, 6]]])   
//flat
    let list = [1, 2, 3, [4, [5]]];
    let res = list.flat(Infinity)
    console.log(res) // [1, 2, 3, 4, 5]    

排序

升序降序排序函数sortNumber

const arr1 = [6,1,2,3,4];
function sortNumber(a,b){
     return b-a;
}
arr1.sort(sortNumber);
console.log(arr1)// [6, 4, 3, 2, 1]

按照flag排序，为true的在前面显示

//其实这个和上边的原理是一样的等同，只是简写了
const arr2 = [
            { id: 10, flag: true },
            { id: 5, flag: false },
            { id: 6, flag: true },
            { id: 9, flag: false }
];
const r = arr2.sort((a, b) => b.flag - a.flag);
console.log(r);
// [
//     { id: 10, flag: true },
//     { id: 6, flag: true },
//     { id: 5, flag: false },
//     { id: 9, flag: false }
// ]