JavaScript:使用 Array.map、Object.values 和 Object.keys 處理一連串的資料

使用 Array.mapObject.valuesObject.keys 處理「物件中有物件」和「陣列中有物件」的情況。

物件中有物件

一個物件包含了一串物件。

範例如下,這裡有一串 ID 與名字。

{
  "1234567890": {
    id: "1234567890",
    name: "Nina Ricci",
  },
  "2345678901": {
    id: "2345678901",
    name: "Hello Kitty",
  },
  "3456789012": {
    id: "3456789012",
    name: "Pusheen the cat",
  },
}

取得 key 的陣列

在這一連串資料下取得 key 的陣列。

const idList = Object.keys(list);

idList // ["1234567890", "2345678901", "3456789012"]

取得 value 的陣列

在這一連串資料下取得 value 之特性屬性的陣列。

const nameList = Object.values(list).map(item => item.name);

nameList // ["Nina Ricci", "Hello Kitty", "Pusheen the cat"]

陣列中有物件 1

一個陣列包含了一串物件。

範例如下,這裡有一串 ID 與名字。

const list = [
  {
    id: "1234567890",
    name: "Nina Ricci",
  },
  {
    id: "2345678901",
    name: "Hello Kitty",
  },
  {
    id: "3456789012",
    name: "Pusheen the cat",
  },
];

取得特性屬性值的陣列

取得 id。

const idList = list.map(item => Object.values(item)[0]); // 0 表示第一個屬性值

idList // ["1234567890", "2345678901", "3456789012"]

取得 name。

const nameList = list.map(item => Object.values(item)[1]); // 1 表示第二個屬性值

nameList // ["Nina Ricci", "Hello Kitty", "Pusheen the cat"]

陣列中有物件 2

一個陣列包含了一串物件。

範例如下,這裡有一串 ID 與名字,key 是 ID,value 是名字。

[
  {
    "1234567890": "Nina Ricci",
  },
  {
    "2345678901": "Hello Kitty",
  },
  {
    "3456789012": "Pusheen the cat",
  },
]

取得 key 的陣列

const idList = list.map(item => Object.keys(item)[0]);

idList // ["1234567890", "2345678901", "3456789012"]

取得 value 的陣列

const nameList = list.map(item => Object.values(item)[0]);

nameList // ["Nina Ricci", "Hello Kitty", "Pusheen the cat"]

More


comments powered by Disqus