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


Posted in Javascript onJuly 05, 2016

在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 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
javascript 节点排序 2
Jan 31 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 #Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 #Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 #Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 #Javascript
Node.js实现文件上传
Jul 05 #Javascript
JavaScript数组方法大全(推荐)
Jul 05 #Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 #Javascript
You might like
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
PHP 采集心得技巧
2009/05/15 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP中session变量的销毁
2014/02/27 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP中header用法小结
2016/05/23 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
javascript来定义类的规范小结
2010/11/19 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
react的hooks的用法详解
2020/10/12 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
python列表操作使用示例分享
2014/02/21 Python
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python 如何展开嵌套的序列
2020/08/01 Python
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
幸福家庭事迹材料
2014/02/03 职场文书
策划总监岗位职责
2014/02/16 职场文书
老龄工作先进事迹
2014/08/15 职场文书
个人作风建设自查报告
2014/10/22 职场文书
技术员岗位职责
2015/02/04 职场文书
幼儿园大班个人总结
2015/02/28 职场文书