JS 有趣的陣列處理小題目

javascript

RocMark 2019-06-10 19:43:28 ‧ 1755 瀏覽

分享至

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)

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 則留言

dragonH

iT邦超人 5 級 ‧ 2019-06-11 09:56:01

挑戰一行寫法

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);