iT邦幫忙

1

JS 有趣的陣列處理小題目

JS 有趣的小題目

到處看文章,晃到的一個小題目。
看似簡單,但還是耗了一些時間才想出解法。

  • 題目來源
  • 原作者也有他的解法可以參考參考~
  • 目標是把原始資料的category合併成目標資料~
// 原始資料
const data = [
  { id: 1, content: 'hello', category: 'HTML' },
  { id: 1, content: 'hello', category: 'JS' },
  { id: 1, content: 'hello', category: 'CSS' },
  { id: 2, content: 'hi', category: 'CSS' },
]
// 目標
const target = [
  { id: 1, content: 'hello', category: 'HTML,JS,CSS' },
  { id: 2, content: 'hi', category: 'CSS' },
]

個人解法

  const newData = []
  data.forEach((el) => {
    // 判斷有該id的object 是否存在於 新的陣列中
    // 無則加入,有則找到該物件 並將 category加入其後
    if (!newData.find(elem => elem.id === el.id)) {
      newData.push(el)
    } else {
      const index = newData.findIndex(elem => elem.id === el.id)
      newData[index].category += `,${el.category}`
    }
  })
  console.dir(newData)

1 則留言

2
dragonH
iT邦大師 3 級 ‧ 2019-06-11 09:56:01

挑戰一行寫法/images/emoticon/emoticon01.gif

const target = [...new Set(data.map(el => el.id))]
  .map(id => data
              .filter(el => el.id === id)
              .reduce((pre, cur) => {
                return {
                  id: cur.id,
                  content: pre.content.indexOf(cur.content) < 0
                    ? pre.content.concat(`,${cur.content}`)
                    : pre.content,
                  category: pre.category.indexOf(cur.category) < 0
                    ? pre.category.concat(`,${cur.category}`)
                    : pre.category,
                };
              }));
console.log(target);

我要留言

立即登入留言