DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 一道優雅面試題分析js中fn()和return fn()的區別
一道優雅面試題分析js中fn()和return fn()的區別
編輯:關於JavaScript     

在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,不會繼續下一次遞歸。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved