递归的优化写法

——《JavaScript高级程序设计》第3版 P177

求阶乘的递归函数:

function fn(num){
  if(num<=1){
    return 1;
  }else{
    return num*fn(num-1);
  }
}

将该函数赋值给另一个变量时:

var anotherFn = fn;
fn = null;
console.log(anotherFn(4)); // error:fn is not defined

改写:但严格模式会报错

function fn(num){
  if(num<=1){
    return 1;
  }else{
    return num*arguments.callee(num-1);
  }
}

命名函数表达式:这样就没有问题了

var fn = (function f(num){
  if(num<=1){
    return 1;
  }else{
    return num*f(num-1);
  }
});

为了便于理解,最好把整个命名函数用括号包起来。

### Vue.js 递归组件 实现方法 Vue.js 支持创建递归组件,这使得开发者可以轻松处理具有层次结构的数据。为了使一个组件能够递归调用自身,在定义该组件时需设置 `name` 属性以便于自我引用[^2]。 下面是一个简单的例子,展示了如何利用 Vue.js 创建用于显示多级菜单的递归组件: ```html <template> <ul> <!-- 遍历每一项节点 --> <li v-for="item in items" :key="item.id"> {{ item.name }} <!-- 如果当前节点有子节点,则再次渲染 Menu 组件 --> <menu-component v-if="item.children && item.children.length" :items="item.children"></menu-component> </li> </ul> </template> <script> export default { name: 'MenuComponent', // 设置名称属性允许组件自引用 props: ['items'] // 接收父组件传递过来的数据 } </script> ``` 此代码片段展示了一个名为 `MenuComponent` 的递归组件,其接收一个对象数组作为 prop 参数 `items` 。每当遇到含有 children 属性的对象时,就会重新渲染一次相同的 `<menu-component>` 来表示下一层级的内容[^3]。 当涉及到更复杂的交互逻辑时,比如点击某个菜单项展开/折叠对应的子菜单列表,可以通过事件绑定机制配合 `$emit()` 方法通知父组件执行相应操作[^4]。 #### 注意事项 - 使用递归组件时要特别注意终止条件的设计,防止无限循环。 - 对性能敏感的应用场景应考虑虚拟滚动或其他优化措施减少 DOM 渲染量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值