這個需求是我在做代碼執行器 技術文中直接執行代碼，我實作了時遇到的問題，在代碼執行器中需要把 console.log 輸出到一個自定義的視圖上，做這個需求需要解決兩個問題：
1、能夠接收到 console.log 要輸出的內容，也就是獲取 console.log(args) 的引數 args；
2、不影響原有 console.log 的正常功能；
console 是一個全域物件，它包含了很多方法，比如：
console.log();
console.error();
其實 console.log 就是一個函式，它的用法如下：
// 可以輸出多個物件
console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);
既然是個函式，直接重寫這個函式即可，
const reDefineConsoleLog = function (args) {
const orgLog = console.log;
const calls = [];
console.log = (...args) => {
// 把要列印的引數轉換成字串，顯示到視圖上
let logs = [];
for(let i = 0; i < args.length; i++) {
let aLog = args[i];
let logStr = JSON.stringify(aLog);
if (!logStr) {
if (typeof aLog === 'function') {
// function can not parse to json
logStr = aLog.constructor;
}
}
logs.push(logStr);
}
let retLog = logs.join(' , ');
orgLog(retLog);
};
};但是我想要的效果是能夠把字串、物件、陣列、函式等物件轉換成字串，這樣在 UI 上就能夠把內容顯示出來，這個實作不同于瀏覽器里的實作，
在瀏覽器中列印一個物件時，它會顯示成 Object >，當點擊的時候才真正的獲取這個物件的值，而我想要的效果其實是直接顯示成字串，最后干脆直接使用 JSON.stringfy 函式把一個物件轉換成字串，這樣符合我的預期，效果如下：
這個方案不一定是最完美的，如果你有更好的方案，歡迎留言告訴我，大家加油！
長按關注
素燕《前端小課》
幫助 10W 人入門并進階前端
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/223565.html
標籤：其他
上一篇：學習CSS3這一篇就夠了
下一篇：制作投影：3D 模型法