一道优雅面试题分析js中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,不会继续下一次递归。

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

(0)

相关推荐

  • 浅谈javascript中return语句

    return语句在js中非常的重要,不仅仅具有返回函数值的功能,还具有一些特殊的用法,有个清晰的把握是非常有必要的.下面就结合实例简单介绍一下return语句的作用. 一.用来返回控制和函数结果: 通常情况,return语句对于一个函数是很有必要的,因为往往需要函数在一系列的代码执行后会得到一个期望的返回值,而此值就是通过return语句返回,并且将控制权返回给主调函数. 语法格式: return 表达式 代码实例如下: function add(){ var a=1; var b=2; ret

  • JavaScript中的return语句简单介绍

    return语句在js中非常的重要,不仅仅具有返回函数值的功能,还具有一些特殊的用法,下面就结合实例简单介绍一下return语句的作用. 一.用来返回控制和函数结果: 通常情况,return语句对于一个函数是很有必要的,因为往往需要函数在一系列的代码执行后会得到一个期望的返回值,而此值就是通过return语句返回,并且将控制权返回给主调函数. 语法格式: return 表达式 代码实例如下: function add(){ var a=1; var b=2; return a+b; } func

  • JavaScript中return用法示例

    本文实例讲述了JavaScript中return用法.分享给大家供大家参考,具体如下: return可以接受函数中的返回值,前提是函数中要有return语句. 下面是一个应用小示例: <html> <head> <script type='text/javascript'> function linkPage(){ alert('You Clicked??'); return false; } </script> </head> <body

  • 深入理解javascript中return的作用

    这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置. 而该值决定了当前操作是否继续.当返回的是true时,将继续操作.当返回是false时,将中断操作. 而直接执行时(不用return).将不会对window.event.returnvalue进行设置所以会默认

  • JavaScript中return false的用法

    在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为. 例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页. Return False 就相当于终止符,Return True 就相当于执行符.在js中return false的作用一般是用来取消默认动作的.比如你单击一个链接除了触发你的onclick事件(如果你指定的话)以外还要触发一个默认事件就是执行页面的跳转.所以如果你想取消对象的默认动作就可以return false. 同样的,return fal

  • Javascript中的return作用及javascript return关键字用法详解

    javascript 中的return一直用的都比较火,关于javascript中的return作用大家了解吗,下面通过本文给大家详细介绍,具体内容如下所示: return 语句从当前函数退出,并从那个函数返回一个值. 语法: return[()[expression][]]; 可选项 expression 参数是要从函数返回的值.如果省略,则该函数不返回值. 用 return 语句来终止一个函数的执行,并返回 expression 的值.如果 expression 被省略,或在函数内没有 re

  • js中return false(阻止)的用法

    return false 阻止表单提交不起今天这个问题困扰了我很久,在网上找了很多资料,基本上关于onsubmit=return false有以下几点要注意的地方: 1. return 的返回值问题,函数中return一旦有返回值,就不在执行下面的语句,直接跳到函数调用的地方.如下PHP函数代码,第一个if条件符合则函数值返回布尔型false,可以返回一个函数的值,并且跳出这个函数:只要遇到return语句,程序就在那一行代码停止执行,执行控制将立刻返回到调用该程序的代码处. 复制代码 代码如下

  • javascript中break,continue和return语句用法小结

    由于最近一直在看javascript,下面简要说一下它们三个在javascript的一些用法 break语句: break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句.由于它是用来退出循环或者switch语句,所以只有当它出现在这些语句时,这种形式的break语句才是合法的. 如果一个循环的终止条件非常复杂,那么使用break语句来实现某些条件比用一个循环表达式来表达所有的条件容易得多. for(var i=1;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能

  • javascript中的return和闭包函数浅析

    高手绕道!这跟闭包本身没什么大的关系,也不知道怎么取标题,随便凑了个数,望见谅! 今天一个刚学js的朋友给了我一段代码问为什么方法不执行,代码如下: 复制代码 代码如下: function makefunc(x) { return function (){  return x; }}alert(makefunc(0)); 其实不是不执行,只是朋友的意思这里alert出来的应该是"0",而不是function (){return x;}.不是脚本写错了,只是没搞懂return,从当前函数

  • javascript中return,return true,return false三者的用法及区别

    1.语法及返回方式 ①返回控制与函数结果 语法为:return 表达式; 语句结果函数的执行,返回调用函数,而且把表达式的值作为函数结果返回出去 ②返回控制无函数结果 语法为:return; 在大多数情况下,为事件处理函数如果让其返回false,可以防止默认的事件行为.例如,默认情况下,点击一个<a>标签元素,页面会跳转到该元素href属性指定的页. 而return false就相当于终止符,return true就相当于执行符. 在js中return false的作用一般是用来取消默认动作的

  • js怎么终止程序return不行换jfslk

    alert(3) 就这么段程序,没有写在function中,想啊想,怎么终止js呢 alert(3) return; alert(3) 这么写,失败,return只能终止函数 网上也找不到解决办法,问朋友吧,一个说不能,一个告诉我试试die alert(3) die; alert(3) 哇塞,我佩服啊,居然成功了 alert(typeof die) 怎么回事:undefined,未定义,控制台还报错了 alert(3) jfslk; alert(3) 啊,原来如此,这个jfslk也能达到一样的效

随机推荐