一道优雅面试题分析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 相关文章推荐
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
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
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
php图片裁剪函数
2018/10/31 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
js indexOf()定义和用法
2012/10/21 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
Vue的Options用法说明
2020/08/14 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python线程池threadpool使用篇
2018/04/27 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python中p-value的实现方式
2019/12/16 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
运动会广播稿80字
2014/01/23 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
团员自我评价范文
2015/03/10 职场文书
论文评审意见
2015/06/05 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python