关于javascript:前端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]]])       

排序

升序降序排序函数 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}
// ]