成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

console.log打印對(duì)象時(shí)屬性缺失的解決方法

Michael_Ding / 1634人閱讀

摘要：輸出對(duì)象屬性缺失首先，定義了一個(gè)對(duì)象，其擁有四個(gè)屬性。調(diào)用函數(shù)時(shí)，我們想知道傳入函數(shù)的參數(shù)是怎樣的，會(huì)先調(diào)用將傳入的對(duì)象打印出來(lái)，最后在函數(shù)內(nèi)的某處刪除傳入對(duì)象的屬性。方法對(duì)象展開喵喵月號(hào)使用的對(duì)象展開符操作，獲取到的副本。

1. 序

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

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

首先，定義了一個(gè)cat對(duì)象，其擁有name, age, color, birthday四個(gè)屬性。

接著，我們又定義了一個(gè)函數(shù)test，它接收一個(gè)對(duì)象作為參數(shù)。調(diào)用test函數(shù)時(shí)，我們想知道傳入test函數(shù)的參數(shù)是怎樣的，會(huì)先調(diào)用console.log(obj)將傳入的對(duì)象打印出來(lái)，最后在函數(shù)內(nèi)的某處刪除傳入對(duì)象的name屬性。

那么，此時(shí)將cat對(duì)象作為參數(shù)調(diào)用test函數(shù)，控制臺(tái)打印出來(lái)的信息將會(huì)是什么呢？會(huì)是我們預(yù)想的傳入時(shí)參數(shù)的樣子嗎？

const cat = {
    name: "喵喵",
    age: "2",
    color: "white",
    birthday: "1月1號(hào)"
}

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

test(cat)

控制臺(tái)輸出信息：

咋一看，沒問題，輸出的結(jié)果的確是我們傳入時(shí)的樣子。但實(shí)際中，傳入的對(duì)象可能具有很多屬性，那么我們想要看完整的信息就必須將輸出結(jié)果展開。如下：
展開的信息中，我們可以看到結(jié)果少了name屬性，細(xì)心的小伙伴可以發(fā)現(xiàn)還多了一個(gè)感嘆號(hào)的標(biāo)志（鼠標(biāo)懸浮的文字：Value below was evaluated just now.）。咦，奇怪了，我們不是在test函數(shù)內(nèi)的第一行代碼就輸出參數(shù)的信息的嗎，怎么會(huì)少了name屬性？ 其實(shí)感嘆號(hào)的內(nèi)容已經(jīng)說(shuō)明了，我們展開的信息其實(shí)是剛剛獲取到的結(jié)果，也就是代碼執(zhí)行后的結(jié)果，test函數(shù)中有一段delete obj.name的代碼，執(zhí)行完后，obj對(duì)象當(dāng)然就沒有name屬性啦。在復(fù)雜的項(xiàng)目中，對(duì)象屬性會(huì)很多，代碼中的不知哪一處也可能會(huì)刪除了對(duì)象的某些屬性，這時(shí)我們打印出來(lái)的結(jié)果可能就會(huì)跟傳入時(shí)的不一樣，這種情況下我們可能就會(huì)一頭霧水了。那么如何獲取正確的結(jié)果呢？

3. 獲取正確的結(jié)果

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

3.1 方法1：對(duì)象展開 
const cat = {
    name: "喵喵",
    age: "2",
    color: "white",
    birthday: "1月1號(hào)"
}

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

test(cat)

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

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

const cat = {
    name: "喵喵",
    age: "2",
    color: "white",
    birthday: "1月1號(hào)"
}

function test(obj) {
    console.log(JSON.stringify(obj))  //調(diào)用JSON.stringify()方法將對(duì)象轉(zhuǎn)化為字符串
    //這里有段很長(zhǎng)的代碼...
    delete obj.name
}

test(cat)

同樣，此時(shí)我們也可以得到代碼運(yùn)行時(shí)間點(diǎn)時(shí)的obj對(duì)象狀態(tài)。

總結(jié)： 以上兩種方法都可以獲取代碼運(yùn)行時(shí)的對(duì)象狀態(tài)，但是比較推薦第一種方法，因?yàn)楫?dāng)內(nèi)容非常多時(shí)，第一種方法可以展開數(shù)據(jù)，有利于我們更快捷清晰地獲取目標(biāo)信息。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/6981.html

相關(guān)文章

  • 如何使用ES6中的參數(shù)

    摘要：我們可以利用這一點(diǎn)，如果參數(shù)缺失就拋出錯(cuò)誤在中，我們可以更近一步，使用默認(rèn)參數(shù)來(lái)設(shè)置強(qiáng)制參數(shù)對(duì)象在的時(shí)候默認(rèn)參數(shù)就被加入，來(lái)代替對(duì)象，但并沒有實(shí)現(xiàn)。隨著的發(fā)布，現(xiàn)在官方支持了默認(rèn)參數(shù)。 ECMAScript 6（或者叫 ECMAScript 2015）是 ECMAScript 的最新標(biāo)準(zhǔn)，極大的提高了 JavaScript 中處理參數(shù)的能力?，F(xiàn)在我們可以使用 rest 參數(shù)（rest ...

    Hanks10100 評(píng)論0 收藏0

  • ES6：解構(gòu)——JavaScript 從數(shù)組和對(duì)象中提取數(shù)據(jù)的優(yōu)雅方法

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

    GraphQuery 評(píng)論0 收藏0

  • [譯] ES6 中 Arguments 和 Parameters 用法解析

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

    msup 評(píng)論0 收藏0

  • 可定制的 elasticsearch 數(shù)據(jù)導(dǎo)入工具：mysql_2_elasticsearch

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

    chaos_G 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<