<sub id="zgbbs"></sub>

    <sub id="zgbbs"><address id="zgbbs"></address></sub>
    <form id="zgbbs"><th id="zgbbs"><big id="zgbbs"></big></th></form>

    <form id="zgbbs"><legend id="zgbbs"></legend></form>

  1. <strike id="zgbbs"><pre id="zgbbs"></pre></strike>

    探秘 JavaScript 對象長度的那些事兒

    2024-12-17 09:12:24

    一、引言

    圖片5.jpg

    簡述

    在 JavaScript 的世界里呀,大家都知道獲取數組或者字符串的長度挺簡單的,直接用 .length 屬性就行啦,比如對于數組 let arr = [1, 2, 3];,那 arr.length 就能輕松得到它的長度為 3;字符串 let str = 'hello';,str.length 也能馬上知曉字符個數是 5??墒悄?,一涉及到對象長度的獲取,就沒那么直觀了呀。對象可不像數組那樣有個現成的屬性可以直接調用獲取長度呢。那到底該怎么去知曉一個 JavaScript 對象里包含了多少屬性,也就是它的 “長度” 呢?其實呀,這里面有多種方法可供選擇,而且不同的方法在面對諸如可枚舉屬性、不可枚舉屬性以及 Symbol 類型屬性等情況時,各有各的特點和適用場景呢。接下來,咱們就詳細地探討一下獲取 JavaScript 對象長度的這些方法以及相關的應用場景,相信這會讓你對 JavaScript 對象的操作有更深的理解哦,一起往下看吧。

    二、js 對象長度的基本概念

    普通對象與有序集合的差異

    在 JavaScript 里呀,普通對象不能像數組或者字符串那樣直接用 length 屬性來獲取它所謂的 “長度” 哦。這是為啥呢?因為普通對象它并不是有序集合呀。像數組,里面的元素是按照特定的順序依次排列的,比如 let arr = [1, 2, 3];,每個元素都有對應的索引位置,所以通過 arr.length 就能很明確地知道元素的個數是 3 個。字符串也是同理呀,let str = 'hello';,字符按照先后順序組成了這個字符串,用 str.length 就能知曉字符個數是 5 個呢??善胀▽ο竽兀锩娴膶傩允且枣I值對的形式存在的,并沒有像數組那樣嚴格的順序概念,屬性之間不存在像數組元素那種先后順序的關聯性,所以沒辦法直接用 length 去獲取它包含屬性的數量啦,這就是普通對象和有序集合在長度概念上的本質區別哦。

    不同類型對象獲取長度的方法

    使用 Object.keys ()

    Object.keys() 這個方法在獲取對象長度方面挺常用的呢。它的作用呀,是返回一個對象自身(也就是不包括繼承屬性哦)可枚舉自有屬性的鍵的數組。拿到這個數組后,我們就可以借助數組本身的 length 屬性來得到對象的長度啦。給大家舉個例子吧,比如說有這樣一個對象 let obj = {name: 'John', age: 30, city: 'New York'};,我們使用 Object.keys(obj) ,它就會返回 ["name", "age", "city"] 這樣一個數組,這個數組里的元素就是對象 obj 的可枚舉自有屬性的鍵啦。然后再通過 Object.keys(obj).length 來獲取這個數組的長度,在這里返回的結果就是 3,也就意味著對象 obj 包含了 3 個可枚舉的自有屬性哦,是不是挺方便的呀。

    使用 for...in 循環

    還有一種獲取對象長度的辦法就是利用 for...in 循環啦。這個循環可以用來遍歷對象所有的鍵哦,我們可以在遍歷的過程中進行計數,從而得到對象的長度呢。不過這里有個要點要注意哦,那就是為了確保只遍歷對象自身的自有屬性,我們得使用 hasOwnProperty 這個方法來進行判斷呀,不然可能連繼承來的屬性也一起遍歷進去了,那就不準確啦。在這個例子里呀,for...in 循環會逐個去訪問對象 myObj 的鍵,通過 hasOwnProperty 判斷是自有屬性后,計數器 count 就加 1,最后就能得到對象自有屬性的個數啦,在這里輸出的結果就是 2 哦。這種方式在一些需要全面考慮對象自有屬性情況的場景中就挺適用的呢。

    使用 Object.getOwnPropertyNames ()

    Object.getOwnPropertyNames() 這個方法也可以用來獲取對象的長度哦。它會返回一個包含對象所有鍵名的數組(不過這里要注意啦,是除了 Symbol 屬性外的所有自有屬性哦),然后我們再用這個數組的 length 屬性去獲取對象的長度就好啦。它和 Object.keys() 是有不同之處的哦,Object.keys() 只返回可枚舉的自有屬性的鍵組成的數組,而 Object.getOwnPropertyNames() 除了可枚舉的自有屬性鍵之外,還會把不可枚舉的自有屬性鍵也包含進來(只要不是 Symbol 屬性就行)。在這個例子里呀,通過 Object.keys(exampleObj).length 得到的結果是 1,因為它只統計可枚舉的屬性 visibleProp ;而通過 Object.getOwnPropertyNames(exampleObj).length 得到的結果是 2,因為它把不可枚舉的 hiddenProp 也包含進去統計了哦。所以大家可以根據實際需求,來選擇使用 Object.keys() 還是 Object.getOwnPropertyNames() 去獲取對象的長度啦。

    三、ES6 相關方法與特殊情況

    Object.keys () 與 Object.values () 在 ES6 中的特點

    在 ES6 里呀,Object.keys() 和 Object.values() 這兩個方法在遍歷對象的時候,會忽略繼承屬性哦。這一點和之前一些操作對象屬性的情況是有所不同的呢。比如說我們有一個對象,它可能繼承了其他對象的一些屬性,但是使用 Object.keys() 去獲取它的鍵組成的數組時,只會包含它自身的可枚舉自有屬性對應的鍵哦,繼承來的那些屬性就不會出現在這個數組當中啦。同樣的,Object.values() 在獲取對象自身可遍歷屬性的鍵值組成的數組時,也會把繼承屬性排除在外呢。那這樣的特點對于我們獲取對象長度來說,操作上就會有相應的變化啦。以往在考慮繼承屬性干擾的情況下,我們可能還得通過像 hasOwnProperty 這類方法去進行額外的判斷和篩選,才能準確統計出對象自身屬性的個數,也就是對象的長度呀。但在 ES6 里,利用 Object.keys() 得到的數組,我們可以直接通過這個數組的 length 屬性去獲取對象自身可枚舉屬性的數量,也就是對象長度啦,變得更加方便簡潔了呢。在這個例子中,childObj 繼承了 parentObj 的屬性,可通過 Object.keys(childObj) 得到的數組里就只有 ["childProp1", "childProp2"] ,其長度為 2,也就準確地反映了 childObj 自身可枚舉屬性的個數啦,是不是很容易就能獲取到對象長度了呀,這就是 ES6 里這些方法給我們帶來的便利之處哦,大家要好好掌握呢。

    涉及 Symbol 屬性的對象長度獲取

    當對象包含 Symbol 屬性時呀,像 Object.keys() 和 Object.getOwnPropertyNames() 這兩個方法就存在一定的局限性啦。因為 Object.keys() 它只返回對象自身可枚舉的自有屬性的鍵組成的數組,本身就不包含 Symbol 屬性相關的內容呢;而 Object.getOwnPropertyNames() 雖然會返回對象除了 Symbol 屬性外的所有自有屬性鍵組成的數組,也就是它也沒法把 Symbol 屬性考慮進去統計對象長度哦。這時候呢,就需要用到 Object.getOwnPropertySymbols() 這個方法啦。它的作用就是返回一個包含對象所有 Symbol 類型自有屬性名的數組哦。那我們如果要獲取包含 Symbol 屬性在內的對象的完整長度,就可以先通過 Object.getOwnPropertyNames() 獲取普通自有屬性鍵組成的數組,再通過 Object.getOwnPropertySymbols() 獲取 Symbol 屬性名組成的數組,然后把這兩個數組的長度相加,就能得到這個對象完整的屬性個數,也就是對象的長度啦。在這個例子中呀,對象 symbolObj 既有普通的自有屬性 normalProp ,又有 Symbol 類型的屬性 sym1 和 sym2 。通過 Object.getOwnPropertyNames(symbolObj) 得到普通屬性鍵數組長度為 1,通過 Object.getOwnPropertySymbols(symbolObj) 得到 Symbol 屬性名數組長度為 2,兩者相加得到總長度為 3,這樣就準確獲取到了包含特殊 Symbol 屬性的這個對象的完整長度啦。所以呀,大家在遇到對象有 Symbol 屬性這種特殊情況時,可別忘了用 Object.getOwnPropertySymbols() 這個方法來準確獲取對象長度哦。

    四、js 對象長度在實際開發中的應用

    控制對象元素數量

    在實際開發中呀,js 對象長度的應用場景可不少呢,就比如說控制對象元素數量這一點吧。咱們可以想象一個生活中的場景,比如控制書包裝書本的數量。假設我們用一個對象來代表書包,對象的屬性就是每一本書那怎么知道書包里已經裝了幾本書,也就是這個對象包含了幾個屬性呢?這時候就可以用上咱們前面講過的獲取對象長度的方法啦,比如通過 Object.keys(schoolBag).length 就能得到書包里書本屬性的個數,在這里返回的就是 3,代表裝了 3 本書呢。通過這樣的方式,就能很方便地基于對象長度來進行邏輯判斷,決定是否可以添加新的元素啦。其實呀,在很多類似的場景中,只要涉及到對對象元素數量有一定限制,需要判斷是否滿足條件的情況,都可以利用獲取對象長度的方法來巧妙地處理哦,大家可以聯想一下自己開發過程中遇到的類似場景呀。

    為對象添加長度屬性

    除了上面說的利用現有方法去獲取對象長度用于判斷等操作外,我們還可以主動為對象添加長度屬性哦,這在某些情況下也是很實用的呢。在 JavaScript 中,我們可以通過 Object.defineProperty 方法來為對象添加長度屬性呀。通過這樣的設置,我們就給 myObject 添加了一個名為 length 的屬性啦,而且可以通過 myObject.length 來獲取它的長度值,在這里就是 2 哦。不過要注意呀,為對象添加的這個長度屬性并不會自動更新哦。什么意思呢?就是說如果之后對象的屬性發生了變化,比如又新增或者刪除了某個屬性,那這個長度屬性的值不會跟著自動改變的,還是需要我們手動去更新它的值呢所以呀,在使用為對象添加長度屬性這個操作時,要時刻記得它不能自動更新這一特點,根據實際情況適時手動去維護長度屬性的值,這樣才能保證它的準確性,讓它在我們的開發中發揮出應有的作用,比如方便地知曉對象當前屬性的數量等情況呢。

    五、總結

    回顧重點方法

    在前面的內容中,我們詳細介紹了多種獲取 JavaScript 對象長度的方法呢。首先是 Object.keys() 方法,它能夠返回一個對象自身可枚舉自有屬性的鍵的數組,我們再借助這個數組的 length 屬性,就能知曉對象的長度啦,像對于 let obj = {name: 'John', age: 30, city: 'New York'}; 這樣的對象,通過 Object.keys(obj).length 就能得到其長度為 3 哦。還有 for...in 循環的方式呀,利用它來遍歷對象所有的鍵,不過要配合 hasOwnProperty 方法進行判斷,確保只統計對象自身的自有屬性,通過在遍歷過程中計數,從而得到對象的長度呢,例如特定的對象示例中可以通過這種方式準確算出自有屬性的個數。Object.getOwnPropertyNames() 這個方法也不容忽視呀,它會返回包含對象所有鍵名(除了 Symbol 屬性外的所有自有屬性)的數組,接著利用該數組的 length 屬性獲取對象長度,而且它和 Object.keys() 的區別在于,它除了可枚舉的自有屬性鍵之外,還會把不可枚舉的自有屬性鍵也包含進來哦,不同場景下可以按需選用呢。在 ES6 相關情況里,Object.keys() 和 Object.values() 在遍歷對象時會忽略繼承屬性,讓獲取對象自身可枚舉屬性的長度變得更加便捷啦。而當對象包含 Symbol 屬性時,就得用上 Object.getOwnPropertySymbols() 方法啦,它可以返回包含對象所有 Symbol 類型自有屬性名的數組,結合 Object.getOwnPropertyNames() 獲取的普通自有屬性鍵組成的數組,將二者長度相加,就能得到包含 Symbol 屬性對象的完整長度了哦。

    強調適用場景

    不同的獲取 JavaScript 對象長度的方法,有著各自適合的應用場景呢。如果只是想獲取對象自身可枚舉的自有屬性長度,那 Object.keys() 方法就是個不錯的選擇呀,它簡潔高效,像在很多常規的對象屬性統計場景中,只要不涉及不可枚舉屬性和 Symbol 屬性的情況,用它就挺合適的。要是需要把對象除 Symbol 屬性外的所有自有屬性都統計進來,包括那些不可枚舉的自有屬性,這時候 Object.getOwnPropertyNames() 方法就能派上用場了哦,例如在一些需要全面了解對象自有屬性個數,不管其是否可枚舉的業務邏輯處理中就可以考慮使用它呢。而對于 for...in 循環獲取對象長度的方式,由于它可以遍歷到對象及其原型鏈中所有可枚舉的屬性(當然配合 hasOwnProperty 能精準到自有屬性),所以在需要綜合考慮各類可枚舉屬性情況,比如排查繼承屬性干擾等場景下可以使用哦,不過相對來說代碼邏輯會稍微復雜一點啦。在 ES6 環境下,當要處理繼承屬性并且只需關注對象自身可枚舉屬性長度時,Object.keys() 和 Object.values() 的便利性就體現出來了,能讓我們更輕松地獲取相應長度呢。最后,一旦對象包含了 Symbol 屬性,要想得到完整準確的對象長度,可別忘了使用 Object.getOwnPropertySymbols() 配合 Object.getOwnPropertyNames() 的方式呀,在涉及這種特殊數據類型屬性的對象長度統計時,它就是準確獲取長度的關鍵啦,比如在一些復雜的數據結構或者特定的


    聲明:此篇為墨韻科技原創文章,轉載請標明出處鏈接: http://www.26333com.com/news/4526.html
    • 網站建設
    • SEO
    • 信息流
    • 短視頻
    合作伙伴
    在線留言
    服務熱線

    服務熱線

    15879069746

    微信咨詢
    返回頂部
    在線留言
    精品国产污网站在线观看15