脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js中fn()和return fn()的区别

一道优雅面试题分析js中fn()和return fn()的区别

 更新时间：2016年07月05日 16:22:30   作者：饶总真坏  
这篇文章主要带领大家深入理解JavaScript中 fn() 和 return fn() 的区别，感兴趣的小伙伴们可以参考一下

在js中，经常会遇到在函数里调用其它函数的情况，这时候会有 fn() 这种调用方式，还有一种是 return fn() 这种调用方式，一些初学者经常会被这两种方式给绕晕了。这里用一个优雅的面试题来分析一下两种方式的不同之处。 

var i = 0;
function fn(){
 i++;
 if(i < 10){
 fn();
 }else{
 return i;
 }
}

var result = fn();
console.log(result);

这是一道隐藏了坑的面试题，看似很简单，大部分人可能想都不想就答出了10。而实际上运行可知打印出来的是 undefined。这道陷阱题很直观的体现出了前面所说的问题，当我们将执行fn的那一行修改为： 

var i = 0;
function fn(){
 i++;
 if(i < 10){
 return fn();
 }else{
 return i;
 }
}

var result = fn();
console.log(result);

这时，会发现打印出来的结果终于不负众望的是 10 了。

为什么这里加不加return区别会这么大？ 

这里的主要原因很简单，JavaScript的函数都是有默认返回值的，如果函数结尾不写return，会默认返回undefined，这就是为什么在chrome的console控制台里，写代码经常下面会出现一行undefined的原因。 

再仔细看看这个例子，当i自增到9的时候，也就是倒数第二次递归调用fn的那一次，如果没有return，这一次执行完fn，会默认return undefined，而不会继续下一次递归了。当加上了 return，在这里则会继续最后一次递归，即i=10的时候，跳入else里面返回得到正确的10。 

说到这里，可以引申出一个更为经典的例子，著名的二分查找法： 

var mid = Math.floor((arr.length - 1) / 2);

function search(n, mid) {
 if (n > arr[mid]) {
 mid = Math.floor((mid + arr.length) / 2);
 return search(n, mid);
 } else if (n < arr[mid]) {
 mid = Math.floor((mid - 1) / 2);
 return search(n, mid);
 } else {
 return mid;
 }
}

var index = search(n, mid);
console.log(index);

二分查找法也是需要多次递归调用，很多新手在第一次实现这个算法的时候经常会犯的一个错误就是忘记在递归的函数前加上return，最后导致返回结果是undefined，这里的道理也和前面是类似的，不加return，会导致递归后，直接返回undefined,不会继续下一次递归。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript中关于base64的一些事

    JavaScript中关于base64的一些事

    base64 其实是一种编码转换方式, 将 ASCII 字符转换成普通文本, 是网络上最常见的用于传输8Bit字节代码的编码方式之一。这篇文章重点给大家介绍JavaScript中关于base64的一些事，感兴趣的朋友跟随小编一起看看吧
    2019-05-05
  • 微信小程序中做用户登录与登录态维护的实现详解

    微信小程序中做用户登录与登录态维护的实现详解

    微信小程序的运行环境不是在浏览器下运行的。所以不能以cookie来维护登录态。下面这篇文章主要给大家介绍了微信小程序中如何做用户登录与登录态维护的相关资料，文中介绍的非常详细，需要的朋友可以参考学习。
    2017-05-05
  • JavaScript实现简单MD5加密的脚本分享

    JavaScript实现简单MD5加密的脚本分享

    MD5信息摘要算法是一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。本文将用JavaScript实现简单MD5加密，感兴趣的可以了解一下
    2022-10-10
  • 浅谈javascript函数劫持[转自xfocus]

    浅谈javascript函数劫持[转自xfocus]

    javascript函数劫持，也就是老外提到的javascript hijacking技术。最早还是和剑心同学讨论问题时偶然看到的一段代码
    2008-02-02
  • 小程序如何写动态标签的实现方法

    小程序如何写动态标签的实现方法

    这篇文章主要介绍了小程序如何写动态标签的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 如何用JS解析剪切板里的excel内容

    如何用JS解析剪切板里的excel内容

    这篇文章主要介绍了如何用JS解析剪切板里的excel内容，对解析excel感兴趣的同学，可以参考下
    2021-04-04
  • JavaScript实现小程序图片裁剪功能的示例代码

    JavaScript实现小程序图片裁剪功能的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript实现小程序图片裁剪功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下
    2023-03-03
  • layUI实现三级导航菜单效果

    layUI实现三级导航菜单效果

    这篇文章主要为大家详细介绍了layUI实现三级导航菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • js实现贪吃蛇游戏含注释

    js实现贪吃蛇游戏含注释

    这篇文章主要为大家详细介绍了js实现贪吃蛇游戏含注释，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • JavaScript实现获取URL中参数值的4种方法

    JavaScript实现获取URL中参数值的4种方法

    这篇文章主要为大家详细介绍了如何使用JavaScript实现获取URL中参数值的4种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2025-02-02

最新评论