console.log打印對象時屬性缺失的解決方法

Michael_Ding 發(fā)布于2019-05-23 13:54 / 1624人閱讀

摘要：輸出對象屬性缺失首先，定義了一個對象，其擁有四個屬性。調用函數時，我們想知道傳入函數的參數是怎樣的，會先調用將傳入的對象打印出來，最后在函數內的某處刪除傳入對象的屬性。方法對象展開喵喵月號使用的對象展開符操作，獲取到的副本。

1. 序

在編寫代碼時，我們常常用console.log()的方式將信息在控制臺中打印出來以幫助我們進行前端調試。一般情況下，我們打印普通值都沒有問題，但在打印對象類型時，我們就需要注意點了，要不然可能會出現不符合期望的結果。

2. console.log()輸出對象屬性缺失

首先，定義了一個cat對象，其擁有name, age, color, birthday四個屬性。

接著，我們又定義了一個函數test，它接收一個對象作為參數。調用test函數時，我們想知道傳入test函數的參數是怎樣的，會先調用console.log(obj)將傳入的對象打印出來，最后在函數內的某處刪除傳入對象的name屬性。

那么，此時將cat對象作為參數調用test函數，控制臺打印出來的信息將會是什么呢？會是我們預想的傳入時參數的樣子嗎？

const cat = {
    name: "喵喵",
    age: "2",
    color: "white",
    birthday: "1月1號"
}

function test(obj) {
    console.log(obj)
    //這里有段很長的代碼...
    delete obj.name
}

test(cat)

控制臺輸出信息：

咋一看，沒問題，輸出的結果的確是我們傳入時的樣子。但實際中，傳入的對象可能具有很多屬性，那么我們想要看完整的信息就必須將輸出結果展開。如下：

展開的信息中，我們可以看到結果少了name屬性，細心的小伙伴可以發(fā)現還多了一個感嘆號的標志（鼠標懸浮的文字：Value below was evaluated just now.）。咦，奇怪了，我們不是在test函數內的第一行代碼就輸出參數的信息的嗎，怎么會少了name屬性？其實感嘆號的內容已經說明了，我們展開的信息其實是剛剛獲取到的結果，也就是代碼執(zhí)行后的結果，test函數中有一段delete obj.name的代碼，執(zhí)行完后，obj對象當然就沒有name屬性啦。在復雜的項目中，對象屬性會很多，代碼中的不知哪一處也可能會刪除了對象的某些屬性，這時我們打印出來的結果可能就會跟傳入時的不一樣，這種情況下我們可能就會一頭霧水了。那么如何獲取正確的結果呢？

3. 獲取正確的結果

由于展開console.log()的結果并不是我們代碼所處位置那個時間點的對象的拷貝，故我們想要在代碼執(zhí)行到那個位置時的那個時間點對應的對象狀態(tài)，只要在那時輸出對象的副本即可。

3.1 方法1：對象展開

const cat = {
    name: "喵喵",
    age: "2",
    color: "white",
    birthday: "1月1號"
}

function test(obj) {
    console.log({...obj})  //使用ES6的對象展開符操作，獲取到obj的副本。
    //這里有段很長的代碼...
    delete obj.name
}

test(cat)

這時，我們得到的就是console.log()執(zhí)行時間點時obj的狀態(tài)啦。

3.2 方法2： JSON.stringfy()看字符串

const cat = {
    name: "喵喵",
    age: "2",
    color: "white",
    birthday: "1月1號"
}

function test(obj) {
    console.log(JSON.stringify(obj))  //調用JSON.stringify()方法將對象轉化為字符串
    //這里有段很長的代碼...
    delete obj.name
}

test(cat)

同樣，此時我們也可以得到代碼運行時間點時的obj對象狀態(tài)。

總結：以上兩種方法都可以獲取代碼運行時的對象狀態(tài)，但是比較推薦第一種方法，因為當內容非常多時，第一種方法可以展開數據，有利于我們更快捷清晰地獲取目標信息。

GPU云服務器云服務器 console.log console.log() 對象不支持屬性或方法屬性缺失

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6981.html

如何使用ES6中的參數

摘要：我們可以利用這一點，如果參數缺失就拋出錯誤在中，我們可以更近一步，使用默認參數來設置強制參數對象在的時候默認參數就被加入，來代替對象，但并沒有實現。隨著的發(fā)布，現在官方支持了默認參數。 ECMAScript 6（或者叫 ECMAScript 2015）是 ECMAScript 的最新標準，極大的提高了 JavaScript 中處理參數的能力。現在我們可以使用 rest 參數（rest ...

Hanks10100 2019-08-20 14:50 評論0 收藏0
ES6：解構——JavaScript 從數組和對象中提取數據的優(yōu)雅方法

摘要：跳過數組中的元素學會了如何按順序從數組中提取數據。解構方法中提供了很好的解決方案。從對象中提取數據依然從最基本的開始，提取從中提取和。本文編譯：胡子大哈翻譯原文：http://huziketang.com/blog/posts/detail?postId=58f41a06a58c240ae35bb8e6 英文連接：ES6: Destructuring — an elegant...

GraphQuery 2019-08-20 16:02 評論0 收藏0
[譯] ES6 中 Arguments 和 Parameters 用法解析

摘要：默認參數有了我們不需要再去檢測哪些值為并且給它們設定默認值了。我們甚至可以使用函數去找回默認參數的值注意這個函數只有在第二個參數省略時才會被調用。瀏覽器對默認參數的支持情況桌面瀏覽器移動端瀏覽器解構賦值解構賦值是的新特性。原文地址：https://www.smashingmagazine.com/2016/07/how-to-use-arguments-and-parameters...

msup 2019-08-21 10:56 評論0 收藏0
可定制的 elasticsearch 數據導入工具：mysql_2_elasticsearch

摘要：最近為了導庫的問題，費了一些周折。可定制的數據導入工具基于的主要功能完全使用實現數據從到的遷移可批量導入多張表可自定義的數據遷移的規(guī)則數據表字段關系字段過濾使用正則進行異常處理可自定義的異步分片導入方式，數據導入效率更高。最近為了es導庫的問題，費了一些周折。于是乎做了一個小工具（用過npm的一些jdbc的導庫工具，感覺還不夠好用），這里拋磚引玉，自薦一下下，歡迎同道兄弟吐槽和參與，...

chaos_G 2019-08-22 10:49 評論0 收藏0