使用Chrome瀏覽器控制臺調(diào)試程序時，經(jīng)常看到在運行結(jié)果后有一行“undefined”，一開始我還以為是程序問題，最后發(fā)現(xiàn)并不是。那么這個“undefined”是從哪里來的呢？

本篇屬于不知道也不會怎樣的冷知識，但如果了解，你則會更清楚 JS 中的表達式概念。

Console 回傳的結(jié)果與表達式有關(guān)

如果要清楚的預(yù)測Chrome Console 中所出現(xiàn)的值，就一定要搞清楚「表達式」的概念，表達式的特征就是“一定會回傳值”，Chrome Console 中輸入程序代碼后的下一行呈現(xiàn)的正是回傳結(jié)果。

純值

任何的純值都可以視為「表達式」，因此輸入純值運行后的下一行回傳的結(jié)果就是該值。

1 // 這行只有數(shù)字 1

陳述式

與表達式不同的「陳述式」最大的特征是“不會回傳值”，因此陳述式輸入在Chrome Console 后會帶出的是 undefined 的結(jié)果。

var屬于聲明陳述式，因此不會回傳任何的結(jié)果。 

var a = 1;

一樣的概念，if是屬于陳述式，因此執(zhí)行結(jié)果為undefined。

if (a === 1) { }

=是屬于運算符，運算符同樣屬于表達式，因此會回傳一個值，結(jié)果會不同于上方的 var 的聲明陳述式。 

a = 1;

多行代碼

當(dāng)Chrome Console 中輸入多行的代碼時，回傳的值會是以代碼中「排列最后的表達式」為主，因此：

• 當(dāng)有多個表達式，會回傳最后一個表達式
• 如果最后一個是陳述式，則會跳過僅回傳表達式 

a === 1;
a = 2; // 回傳此表達式結(jié)果
var a = 1; // 此為陳述式，因此跳過

函數(shù)式

函數(shù)式運行是屬于表達式的一種，因此 <· 會帶出函數(shù)式中return 的值。

function fn() {
  return 'function';
}
fn();

如果函數(shù)式中沒有 return 一個指定的結(jié)果，函數(shù)式運行依然是屬于表達式，它則會帶入undefined的值。

function fn1() {
}
fn1(); 

console

console.log語法會直接在Chrome Console 中印出指定表達式的結(jié)果，與直接輸入在Chrome Console 中的回傳不同，在呈現(xiàn)的結(jié)果前方不會有 <· 符號，僅會以空白的方式呈現(xiàn)。

console.log(1)

總結(jié)

本文介紹了Chrome Console 中的undefined出現(xiàn)的原因，了解這個，你可能會更進一步了解JS中的陳述式和表達式的概念。

相關(guān)文章

• 網(wǎng)站被Chrome瀏覽器攔截：NET::ERR_CERT_DATE_INVALID
• 如何用firefox或chrome瀏覽器調(diào)試js和jquery程序

標(biāo)簽: Console  Chrome  undefined