优雅的使用javascript递归画一棵结构树示例代码

function factorial(n) {
 if (n === 1) return 1;
 return n * factorial(n - 1);
}

factorial(5) // 120

function factorial(n, total) {
 if (n === 1) return total;
 return factorial(n - 1, n * total);
}

factorial(5) // 120

function sumArray(arr, total) {
 if(arr.length === 1) {
  return total
 }
 return sum(arr, total + arr.pop())
}

let arr = [1,2,3,4];
sumArray(arr, arr[1]) // 10

// 斐波那契数列
function factorial1 (n) {
 if(n <= 2){
  return 1
 }
 return factorial1(n-1) + factorial1(n-2)
}

// 尾递归优化后
function factorial2 (n, start = 1, total = 1) {
 if(n <= 2){
  return total
 }
 return factorial2 (n -1, total, total + start)
}

function clone(target) {
 if (typeof target === 'object') {
  let cloneTarget = Array.isArray(target) "htmlcode">

n =1; result = 1 --> 1
n =2; result = 2 --> 11 2
n =3; result = 3 --> 111 12 21
...
如果第一步走1个台阶，由以上规律可以发现剩下的台阶有n-1种走法；
如果第一步走2个台阶，由以上规律可以发现剩下的台阶有n-2种走法；
则一共有fn(n-1) + fn(n-2) 种走法
function steps(n) {
 if(n <= 1) {
  return 1
 }
 return steps(n-1) + steps(n-2)
}


7. 对象数据格式化


这道题是本人曾经面试阿里的一道笔试题，问题是如果服务器返回了嵌套的对象，对象键名大小写不确定，如果统一让键名小写。




let obj = {
 a: '1',
 b: {
  c: '2',
  D: {
   E: '3'
  }
 }
}
转化为如下：
let obj = {
 a: '1',
 b: {
  c: '2',
  d: {
   e: '3'
  }
 }
}

// 代码实现
function keysLower(obj) {
 let reg = new RegExp("([A-Z]+)", "g");
 for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
   let temp = obj[key];
   if (reg.test(key.toString())) {
    // 将修改后的属性名重新赋值给temp，并在对象obj内添加一个转换后的属性
    temp = obj[key.replace(reg, function (result) {
     return result.toLowerCase()
    })] = obj[key];
    // 将之前大写的键属性删除
    delete obj[key];
   }
   // 如果属性是对象或者数组，重新执行函数
   if (typeof temp === 'object' || Object.prototype.toString.call(temp) === '[object Array]') {
    keysLower(temp);
   }
  }
 }
 return obj;
};


具体过程和思路在代码中已经写出了注释，感兴趣可以自己研究一下。


8. 遍历目录/删除目录


我们这里使用node来实现删除一个目录，用现有的node API确实有删除目录的功能，但是目录下如果有文件或者子目录，fs.rmdir && fs.rmdirSync 是不能将其删除的，所以要先删除目录下的文件，最后再删除文件夹。




function deleteFolder(path) {
 var files = [];
 if(fs.existsSync(path)) { // 如果目录存在
  files = fs.readdirSync(path);
  files.forEach(function(file,index){
   var curPath = path + "/" + file;
   if(fs.statSync(curPath).isDirectory()) { // 如果是目录，则递归
    deleteFolder(curPath);
   } else { // 删除文件
    fs.unlinkSync(curPath);
   }
  });
  fs.rmdirSync(path);
 }
}


9. 绘制分形图形


通过递归，我们可以在图形学上有更大的自由度，但是请记住，并不是最好的选择。




我们可以借助一些工具和递归的思想，实现如上的分形图案。


10. 扁平化数组Flat


数组拍平实际上就是把一个嵌套的数组，展开成一个数组，如下案例：




let a = [1,2,3, [1,2,3, [1,2,3]]]
// 变成
let a = [1,2,3,1,2,3,1,2,3]
// 具体实现
function flat(arr = [], result = []) {
  arr.forEach(v => {
    if(Array.isArray(v)) {
      result = result.concat(flat(v, []))
    }else {
      result.push(v)
    }
  })
  return result
}

flat(a)


当然这只是笔者实现的一种方式，更多实现方式等着你去探索。


用递归画一棵自定义风格的结构树


通过上面的介绍，我想大家对递归及其应用已经有一个基本的概念，接下来我将一步步的带大家用递归画一棵结构树。


效果图：




该图形是根据目录结构生成的目录树图，在很多应用场景中被广泛使用，接下来我们就来看看他的实现过程吧：




const fs = require('fs')
const path = require('path')
// 遍历目录/生成目录树
function treeFolder(path, flag = '|_') {
  var files = [];
  
  if(fs.existsSync(path)) {
    files = fs.readdirSync(path);
    files.forEach(function(file,index){
      var curPath = path + "/" + file;
      if(fs.statSync(curPath).isDirectory()) { // recurse
        // obj[file] = treeFolder(curPath, {});
        console.log(flag, file)
        treeFolder(curPath, '  ' + flag)
      } else {
        // obj['--'] = file
        console.log(flag, file)
      }
    })
    // return obj
  }
}

treeFolder(path.resolve(__dirname, './test'))


test为我们建的测试目录，如下：

我们通过短短10几行代码就实现了一个生成结构树的小应用，是不是感觉递归有点意思呢？在这个函数中，第一个参数是目录的绝对路径，第二个是标示符，标示符决定我们生成的树枝的样式，我们可以自定义不同的样式。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。