摘要：一個(gè)詭異的結(jié)果在前端開(kāi)發(fā)中，我們都少不了用來(lái)輸出變量和調(diào)試。再看下面一個(gè)例子圖中的結(jié)果，我是在執(zhí)行了這句話(huà)之后才點(diǎn)擊的小三角，然而結(jié)果卻沒(méi)有變成詭異結(jié)果的樣子。
一個(gè)詭異的結(jié)果
在前端開(kāi)發(fā)中，我們都少不了用console.log來(lái)輸出變量和調(diào)試?？墒窃谑褂盟倪^(guò)程中，偶爾也會(huì)出現(xiàn)一些讓我們很費(fèi)解的行為，如下圖：
是不是很詭異：）
這個(gè)詭異的行為是怎么來(lái)的呢？其實(shí)怪我“斷章取義”了?？刂婆_(tái)上我執(zhí)行的代碼其實(shí)是：
注意到展開(kāi)的數(shù)組旁邊有一個(gè)小i，將鼠標(biāo)移動(dòng)上去，會(huì)出現(xiàn)提示文字：
Value below was evaluated just now.
簡(jiǎn)單翻譯一下就是：下面展示的值，是剛剛解釋執(zhí)行（evaluated，或者你可以用你熟悉的eval函數(shù)來(lái)理解這個(gè)單詞）的結(jié)果。
這句話(huà)該怎么理解呢？注意到：小i這個(gè)提示僅在我們展開(kāi)數(shù)組的時(shí)候才會(huì)出現(xiàn)，而展開(kāi)前控制臺(tái)上展示的確實(shí)是一個(gè)空數(shù)組[]。因此我們可以將展開(kāi)前后認(rèn)為是這個(gè)值的兩個(gè)狀態(tài)。
現(xiàn)在，我們定位到了這個(gè)詭異的行為是和展開(kāi)相關(guān)的，那么讓我們來(lái)實(shí)驗(yàn)一下展開(kāi)這個(gè)操作會(huì)對(duì)log出來(lái)的值產(chǎn)生什么影響呢？我們將一行一行地在控制臺(tái)執(zhí)行下面三行js代碼：
var a = []
console.log(a)
a.push(1, 2, 3, 4, 5)
在執(zhí)行a.push(1)之前展開(kāi)[]，會(huì)得到下面的結(jié)果，應(yīng)該算是一個(gè)預(yù)期結(jié)果：
而在執(zhí)行a.push(1)之后再展開(kāi)[]，就會(huì)得到一開(kāi)始我給大家看的“詭異”結(jié)果了。
現(xiàn)在回過(guò)頭來(lái)看 Value below was evaluated just now. 這句話(huà)，其實(shí)說(shuō)的就是，展開(kāi)后的值，其實(shí)是在你點(diǎn)擊展開(kāi)小三角的時(shí)候，才 “eval” 出來(lái)的。
再看下面一個(gè)例子：
圖中的結(jié)果，我是在執(zhí)行了a = [1, 2, 3, 4, 5]這句話(huà)之后才點(diǎn)擊的小三角，然而結(jié)果卻沒(méi)有變成“詭異”結(jié)果的樣子。這是因?yàn)楹竺嫖腋聰?shù)組是直接采用變量賦值的方法，相當(dāng)于修改了變量a的引用，就和變量的引用賦值一樣，是影響不了a之前所引用的數(shù)組的。
也就是說(shuō)，console.log()在展開(kāi)時(shí)用于eval的，是變量指向的引用而不是變量本身。
試試其他瀏覽器
console.log的這個(gè)行為并不是chrome限定，在Firefox和Safari中你都能得到同樣的行為。
Firefox：
Safari中由于console.log展不開(kāi)，因此使用console.dir來(lái)展開(kāi)：
Edge下就不是這樣子了233：
所以如果你不想要這個(gè)“詭異”的結(jié)果的話(huà)，可以用 Edge 調(diào)試哦：）
如果不用Edge呢？
一個(gè)正常的思路是，如果能夠讓console.log直接輸出就是展開(kāi)的，那么這個(gè)行為就不會(huì)詭異了。
不過(guò)很不幸，我沒(méi)有找到能夠做這件事情的API。不過(guò)，我們可以借助console.group這個(gè)方法，自己造一個(gè)展開(kāi)的結(jié)構(gòu)出來(lái)。
/**
* expandLog
*
* @desc 自動(dòng)展開(kāi)的 console.log，實(shí)現(xiàn)參考：
* https://stackoverflow.com/questions/10464844/is-there-a-way-to-auto-expand-objects-in-chrome-dev-tools#27610197
* @author leuisken
* @param {Object} obj 需要 log 的對(duì)象
*/
function expandLog(obj) {
if (Array.isArray(obj)) {
obj.forEach((value, index) => {
console.group(`${index} : ${type(value)}`);
expandLog(value);
console.groupEnd();
});
}
else if (isPlainObject(obj)) {
Object.keys(obj)
.forEach(key => {
const value = obj[key];
console.group(`${key} : ${type(value)}`);
expandLog(value);
console.groupEnd();
});
}
else {
console.log(obj);
}
return;
/**
* type
*
* @desc 針對(duì)部分常見(jiàn)類(lèi)型給予更好的輸出方式
* @param {Object} obj 傳入的對(duì)象
* @return {string} 類(lèi)型字符串
*/
function type(obj) {
const typeofResult = typeof obj;
if (typeofResult !== "object") {
return typeofResult;
}
else if (obj === null) {
return "null";
}
else if (Array.isArray(obj)) {
return "Array";
}
else if (obj instanceof RegExp) {
return "RegExp";
}
else if (obj instanceof Date) {
return "Date";
}
return "Object";
}
/**
* isPlainObject
*
* @desc 即：jQuery.isPlainObject
* @param {Object} obj 傳入的對(duì)象
* @return {boolean} 是否為 PlainObject
*/
function isPlainObject(obj) {
if (!obj
|| obj.toString() !== "[object Object]"
|| obj.nodeType
|| obj.setInterval
) {
return false;
}
if (obj.constructor
&& !obj.hasOwnProperty("constructor")
&& !obj.constructor.prototype.hasOwnProperty("isPrototypeOf")
) {
return false;
}
let key;
for (key in obj) {}
return key === undefined || obj.hasOwnProperty(key);
}
}
這里寫(xiě)這個(gè)方法只是示個(gè)意，估計(jì)一般也不會(huì)有誰(shuí)這么做。。其實(shí)很無(wú)奈，就和console.log、console.dir沒(méi)有提供默認(rèn)展開(kāi)的API一樣，console.group也沒(méi)有提供默認(rèn)收起的API。。。。
題外話(huà)
在搜索能否默認(rèn)展開(kāi)console.log結(jié)果的時(shí)候，在Stack Overflow上無(wú)意間搜到了這樣一個(gè)結(jié)果。
https://stackoverflow.com/que...
原來(lái) chrome 的 console，也有自己的 console 啊。。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/92175.html
