前言

最近接 API 的時候,發現後端是使用物件格式,讓我沒辦法使用 .length 來取得該筆資料的長度,進而將這個資訊拿來做使用。
不過這也是正常的,畢竟 Object 本來就沒有 length 這個屬性可以存取,只有 String 與 Array 可以使用 .length 取得長度。

const object = { one: 'apple', two: 'banana' };
const string = 'get banana';
const array = [1, 2, 3];

object.length; // undefined
object.hasOwnProperty('length'); // false

string.hasOwnProperty('length'); // true
array.hasOwnProperty('length'); // true

那麼,如果我們的資料是物件格式,我們到底該怎麼取得它的長度呢?

使用 Object.keys() 取得物件長度

Object.keys() 方法會回傳一個由指定的物件中,所有可列舉之屬性所組成的陣列,而且該陣列中的的排列順序與使用 for 取得的順序相同。
換言之,這個屬性等同於幫我們把物件的各個屬性換成陣列的形式,這時候再通過 .length 就能取得物件的長度哩。

舉例來說,我們的資料是物件中包著物件的格式,我們先透過 Object.keys() 取得鍵值 (key) 的陣列,接著再透過 .length 取得陣列的長度大小。

books: {
  111: {
    ISBN: 111,
    title: '海賊王',
    author: '尾田榮一郎',
  },
  222: {
    ISBN: 222,
    title: '獵人',
    author: '冨樫義博',
  },
  333: {
    ISBN: 333,
    title: '灌籃高手',
    author: '井上雄彥',
  },
},

let booksLen = Object.keys(books).length;
console.log(booksLen); // 3

參考資料

  1. How to Get an Object Length - DEV Community 👩‍💻👨‍💻

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫