陣列資料的精簡寫法請教

javascript jquery typescript array

hugo8319 2019-08-14 11:49:10 ‧ 1996 瀏覽

分享至

今天我有一個陣列，我想取某個項目裡面子項目的ID，以下是我的寫法想請教一下是否有更精簡的寫法 (可使用Jquery,Typescript)

目前作法

let result = '';
this.MenuList.forEach(parent => {
  parent.menuSubs.forEach(sub => {
    if (sub.id.toString() === id) {
      result = sub.name;
    }
  });
});
return result;

資料

[{"id":1,"name":"系統設定","sortNo":1,"menuSubs":[{"id":2,"name":"選單管理","sortNo":7,"url":"AdminControl/ug_Edit_Menu.aspx?IT=M__"},{"id":5,"name":"銀行管理","sortNo":1,"url":"AdminControl/ug_Edit_Bank.aspx"},{"id":6,"name":"語系管理","sortNo":2,"url":"AdminControl/ug_Edit_Language.aspx"},{"id":7,"name":"靜態參數管理","sortNo":4,"url":"AdminControl/ug_Edit_Variable.aspx"},{"id":11,"name":"郵遞區號表","sortNo":3,"url":"AdminControl/ug_Zip_List.aspx"},{"id":133,"name":"商店訂單狀態管理","sortNo":8,"url":"AdminControl/ug_Edit_OrderType.aspx?IT=O_1"},{"id":134,"name":"刊物訂單狀態管理","sortNo":9,"url":"AdminControl/ug_Edit_OrderType.aspx?IT=O_2"},{"id":182,"name":"商店金流交易設定","sortNo":10,"url":"AdminControl/ug_Edit_OrderBank.aspx?IT=O_1"},{"id":191,"name":"浮動欄位內容調整","sortNo":11,"url":"AdminControl/ug_Edit_Data.aspx?IT=BATCH"},{"id":207,"name":"欠費訂單狀態管理","sortNo":12,"url":"AdminControl/ug_Edit_OrderType.aspx?IT=O_3"},{"id":210,"name":"欠費金流交易設定","sortNo":13,"url":"AdminControl/ug_Edit_OrderBank.aspx?IT=O_3"}]},{"id":57,"name":"廣告管理","sortNo":4,"menuSubs":[{"id":53,"name":"首頁大廣告","sortNo":1,"url":"banner/banner-list?IT=BN00"},{"id":54,"name":"首頁3則小廣告","sortNo":3,"url":"banner/banner-list?IT=BN01"},{"id":59,"name":"內頁大廣告","sortNo":11,"url":"BannerData/ug_Banner_List.aspx?IT=BN10"},{"id":60,"name":"內頁小廣告","sortNo":13,"url":"BannerData/ug_Banner_List.aspx?IT=BN11"},{"id":65,"name":"刊物大廣告","sortNo":14,"url":"BannerData/ug_Banner_List.aspx?IT=BN21"},{"id":76,"name":"商店大廣告","sortNo":17,"url":"BannerData/ug_Banner_List.aspx?IT=BN31"},{"id":124,"name":"首頁5則小廣告-A","sortNo":4,"url":"BannerData/ug_Banner_List.aspx?IT=BN02"},{"id":170,"name":"首頁大廣告-手機板","sortNo":2,"url":"BannerData/ug_Banner_List.aspx?IT=BN00S"},{"id":171,"name":"內頁大廣告-手機板","sortNo":12,"url":"BannerData/ug_Banner_List.aspx?IT=BN10S"},{"id":172,"name":"刊物大廣告-手機板","sortNo":15,"url":"BannerData/ug_Banner_List.aspx?IT=BN21S"},{"id":173,"name":"達人愛分享大廣告-手機板","sortNo":20,"url":"BannerData/ug_Banner_List.aspx?IT=BN41S"},{"id":174,"name":"商店大廣告-手機板","sortNo":18,"url":"BannerData/ug_Banner_List.aspx?IT=BN31S"},{"id":175,"name":"達人愛分享大廣告","sortNo":19,"url":"BannerData/ug_Banner_List.aspx?IT=BN41"},{"id":176,"name":"側邊廣告","sortNo":9,"url":"BannerData/ug_Banner_List.aspx?IT=BN03"},{"id":187,"name":"首頁5則小廣告-B","sortNo":5,"url":"BannerData/ug_Banner_List.aspx?IT=BN02B"},{"id":188,"name":"首頁5則小廣告-C","sortNo":6,"url":"BannerData/ug_Banner_List.aspx?IT=BN02C"},{"id":189,"name":"首頁5則小廣告-D","sortNo":7,"url":"BannerData/ug_Banner_List.aspx?IT=BN02D"},{"id":190,"name":"首頁5則小廣告-E","sortNo":8,"url":"BannerData/ug_Banner_List.aspx?IT=BN02E"},{"id":242,"name":"閒置廣告","sortNo":10,"url":"BannerData/ug_Banner_List.aspx?IT=BN71"},{"id":277,"name":"新官網首頁大廣告","sortNo":21,"url":"BannerData/ug_Banner_List.aspx?IT=BN80"},{"id":278,"name":"新官網首頁大廣告-手機板","sortNo":22,"url":"BannerData/ug_Banner_List.aspx?IT=BN80S"},{"id":279,"name":"新官網首頁浮動廣告","sortNo":23,"url":"BannerData/ug_Banner_List.aspx?IT=BN81"},{"id":280,"name":"新官網首頁浮動廣告-手機板","sortNo":24,"url":"BannerData/ug_Banner_List.aspx?IT=BN81S"}]}]

登入發表討論

直播研討會

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

直播中

1 個回答

dragonH

iT邦超人 5 級 ‧ 2019-08-14 12:10:25

最佳解答

codepen

在不改變資料結構的情況下

我猜應該是沒了

然後

可以改用 for loop

用 forEach

就算 return 也會繼續跑到完

for (let i = 0; i < MenuList.length; i += 1) {
  const menuSubs = MenuList[i].menuSubs;
  for (let j = 0; j < menuSubs.length; j += 1) {
    console.log(menuSubs[j].name);
    if (menuSubs[j].id.toString() === id) {
      return menuSubs[j].name;
    }
  }
}

回應 9
分享
檢舉

看更多先前的回應...收起先前的回應...

小魚 iT邦大師 1 級 ‧ 2019-08-14 12:30:50 檢舉

所以你前面那個result是裝飾嗎 XD

froce iT邦大師 1 級 ‧ 2019-08-14 12:49:12 檢舉

我是覺得他要的不是他寫的code...
我猜他其實要的是filter。

let test = data.filter(
  item => {
    return item.menuSubs.filter(sub => sub.id == 2).length > 0
  }
)

dragonH iT邦超人 5 級 ‧ 2019-08-14 13:02:49 檢舉

result 忘記拿掉了 XD

我都忘了還有 filter...

我看到他的 forEach

就一直 focus在他不會 break 的這件事XD

hugo8319 iT邦新手 4 級 ‧ 2019-08-14 13:55:22 檢舉

感謝大大提供的方法
另外想問一下如果上面提供的filter寫法如果我只想吐回項目對應的name，要怎麼寫呢

dragonH iT邦超人 5 級 ‧ 2019-08-14 14:02:22 檢舉

我有更新在 codepen 了

const func3 = (id) => {
  return MenuList.filter(el => el.menuSubs.filter(sub => sub.id.toString() === id).length)
}

console.log(func3Result.length ? func3Result[0].name : ''); // 系統設定

hugo8319 iT邦新手 4 級 ‧ 2019-08-14 14:11:42 檢舉

抱歉沒說得很仔細
如果依照func3取出來的會是主目錄的名稱，不知道是否可以和func2取出來的結果一樣(子項目的名稱)

dragonH iT邦超人 5 級 ‧ 2019-08-14 14:42:35 檢舉

只用 filter 應該是沒辦法

因為 filter 會回傳符合條件的物件

froce iT邦大師 1 級 ‧ 2019-08-14 15:22:45 檢舉

https://jsbin.com/mepanojoxi/edit?js,console,output

不過你的要求我實在想不到啥地方好用...
要我一定是filter出來就夠用了。

hugo8319 iT邦新手 4 級 ‧ 2019-08-14 15:57:55 檢舉

感謝各位大大

最後參考各位的意見採用

let parentMenu = this.MenuList.filter(item => item.menuSubs.filter(sub => sub.id == id).length > 0);
return parentMenu[0].menuSubs.find(sub => sub.id == id).name;

登入發表回應