专业汉语词典知识平台,分享汉字词语知识、历史文学知识解答!

励北网
励北网

js递归函数详解,js编写递归函数

来源:小易整编  作者:小易  发布时间:2023-02-23 05:04
摘要:js递归函数详解,js编写递归函数,在这篇文章中,你都能收获到如何用JavaScript编写递归函数!本文旨在通过分解和单步执行递归JavaScript函数来学习和理解它的工作原理。根据您的JavaScript水平,您可以随意跳过本文。如果...

首先,关于该Array.prototype.reduce()方法的一些注意事项。这不是该解决方案的主要功能,但对于初学者来说可能很少,所以我宁愿简单地介绍一下。

简而言之,reduce 方法将原始数组合并为一个值——它实际上可以是任何东西,从一个string或number到一个全新的数组或一个对象。为此,它遍历其子项并使用自定义函数(reducer 回调函数)处理每个子项。reducer 将始终接收有关当前迭代的数据作为参数,最重要的是:

  1. 将扩展的合并(或“累积”)值,然后传递到下一次迭代;

  2. 在此迭代中正在处理的当前子项。

因此,reduce 方法本身需要:

  1. reducer 回调函数,如上所述;

  2. 合并值的初始状态。

有关实际操作的解释,您可以参考Mosh 的这个非常好的视频。

现在是递归的实际使用。

简单的说,递归就是一个调用自身的函数。这可以概括它,但它的适用性对于初学者来说可能有点难以捉摸。

让我们从解决问题开始:递归 !== 循环。它不是,如果您将它用于此目的,那么您只是在构建令人困惑的代码。

当我们需要迭代一个相互连接的元素(称为节点)的结构时,递归真的很闪耀,你需要处理、排序或在其中查找某些东西,而以前不知道它的大小或深度。诸如树遍历、路径查找和排序算法之类的东西是需要递归的常见场景。

那么为什么它适用于我们当前的场景呢?假设您要使用for循环展平数组:

function flatten(arr) {
  const newArray = [];
  for (const item of array) {
    if (Array.isArray(item)) newArray.push(...item);
    else newArray.push(item);
  }
  return newArray;
}
const array = [1, 2, [3, 4]];
// [1, 2, 3, 4];
console.log(flatten(array));

当然,这行得通,但请尝试不同的、更精细的数组结构。比方说:

const ohnoes = [1, 2, [3, [4, 5]]];
// [1, 2, 3, [4, 5]]
console.log(flatten(ohnoes));

您可能意识到,n for在代码中嵌套循环以考虑n可能的层是完全不可持续的。

然而,递归思考通常是一项艰巨的任务。让我们仔细看看这个问题:

  • 我们想要展平一个可能有子数组的数组;

  • 但是,不能保证子数组自身会被展平。

您可能猜到我们现在也需要调用相同的函数来对数组的每个子项进行微观管理。考虑到:

  • 该函数应该只return用扁平化的数组到达它的表达式;

  • 递归路径最终会到达结构的底部节点——一个没有子数组的数组——然后返回它。

所有这些堆栈函数调用都被恰当地称为调用堆栈。当我们当前的堆栈最终自行解决时,我们必须期望得到的数组是——哒哒!像 1 周大的苏打水一样平淡。

现在剩下的就是将我们的递归函数放在一起:

function flattenRecursive(arr) {
    // loop through the children to see which requires flattening
    return arr.reduce(
        (consolidated, child) => {
            // check if the child is an array itself
            if (Array.isArray(child)) {
                // we need to flatten the array before including its elements in
                // our consolidated array, so we call flattenRecursive recursively
                consolidated.push(...flattenRecursive(child));
            } else {
                // not an array, so just include it in the final array
                consolidated.push(child);
            }
            // return the consolidated array
            return consolidated;
        },
        [], // the initial, empty array
    );
}

现在我们得到:

const yay = [1, 2, [3, [4, [5, [6, [[[[[7], [8, 9]]]]]]], 10]]];
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(flattenRecursive(yay));

仅此而已!


本文地址:百科问答频道 https://www.neebe.cn/wenda/903307_3.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!

共3页 1 2 3 当前是最后一页

百科问答
小编:小易整编
相关文章相关阅读
  • JS 字符串转数组

    JS 字符串转数组

    JS中,将一个字符串转置为数组,使用到的方法是split(),通过使用split()方法,可以轻松的将一个字符串转换为数组操作方法01新建一个HTML文档,用于承载JS02...

  • doT.js是什么

    doT.js是什么

    doT.js是一个JavaScript模板框架,在web前端使用dot.js作为模板引擎,主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码。doT.js是一个JavaScript模板框架,在web前端使用do...

  • JsRender是什么

    JsRender是什么

    JsRender是jQuery模板,专为高性能的纯字符串渲染而优化,无需DOM和其他jQuery依赖。允许定义一次样板结构并重复使用它来动态生成HTML。JsRender是jQuery模板,专为高性能的纯字符串渲染而优...

  • js代码大全,常用js代码代码示例

    js代码大全,常用js代码代码示例

    js代码大全,常用js代码代码示例做为开发过React/ReactNative的工程师,在刚开始接触Flutter开发的时候,一定会遇到这种情况,对于某个功能你能很熟练使用特定Javascript语法去完成,但是对于Flutter开发,对应...

  • jstl是什么,JSP标准标签库jstl

    jstl是什么,JSP标准标签库jstl

    jstl是什么,JSP标准标签库jstlJSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能。JSTL支持通用的、结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签。除了这些,它还提供了一...

  • js教程,JavaScript学习入门教程

    js教程,JavaScript学习入门教程

    js教程,JavaScript学习入门教程JavaScript(通常缩写为JS)是一种解释型、面向对象、多范式的高级编程语言。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)...

  • jscript和javascript的区别

    jscript和javascript的区别

    JavaScript与JScript的区别JScript是Microsoft公司开发的,Javascript是Netscape公司开发的,虽然他们是死对头,但是在现在的浏览器中,无论你把语言指定为Javascript还是Jscript,浏览...

  • php递归函数的例子,php递归函数用法详解

    php递归函数的例子,php递归函数用法详解

    php递归函数的例子,php递归函数用法详解,有关php递归函数的用法,分享几个php递归函数的例子,在php编程中,使用递归进行函数调用很常见,递归函数用的好,可以提高代码效率,通过例子学习php递归函数的使用。...

  • 周排行
  • 月排行
  • 年排行

精彩推荐