javascript - map與forEach的巢狀遍歷，如何回傳一個陣列?

Question

應用場景

一個表格的過濾篩選，可能涉及多個篩選條件，this.filter裡面存的是所有篩選條件的v-model狀態的一個對象，this.tableData是從後端取得的所有原始表格資料的數組，this.filteredTableData是過濾後的表格資料的陣列。

程式碼

    filterTableData() {
      this.filteredTableData = this.tableData.map((item, index) => {
        Object.keys(this.filter).forEach(key => {
          if (this.filter[key] && item[key] && item[key] === this.filter[key]) {
            console.log(item)
            return item
          }
        })
      })
      console.log(this.filteredTableData)
      // this.paginateTableData()
    },

問題

這樣寫，會使得第二個console.log(this.filteredTableData)拿到一個全部是undefined的陣列。這樣的錯誤應該是因為forEach沒辦法用return 跳出迴圈。
所以我想知道：

• 在使用map 且map內部最好不使用變數(使用也行吧，只是擔心效能)的情況下，如何實作這個函數？

• 如果this.filteredTableData的資料量特別大，有沒有什麼更好的辦法？

Answer 1

直接用 [].filter 啊...

Answer 2

題主的問題有點難懂
若想把map轉為陣列
只需要輸入 [...map] 即可

Answer 3

filter較為恰當。

另外，加一個變數就會影響效能的觀點從何而來。不要在還沒出現任何效能問題之時就靠猜測它會有效能問題。

要嘛你就用普通的for迴圈代替，要嘛就得在forEach外面定義一個bool值來判斷。

Answer 4

我之前遇到過使用map 和forEach 帶來的問題，後來都合理的使用for...in 和for...of 來解決掉了，你是不是可以換一下思路，不一定要用map 和forEach 來解決。

Answer 5

不要再forEach裡用this

filterTableData() {
      var that = this;
      this.filteredTableData = this.tableData.map((item, index) => {
        Object.keys(that.filter).forEach(key => {
          if (that.filter[key] && item[key] && item[key] === that.filter[key]) {
            console.log(item)
            return item
          }
        })
      })
      console.log(this.filteredTableData)
      // this.paginateTableData()
    },

Answer 6

我回答你陣列裡都是undefined的問題吧。

你在map函數裡 沒有return 當然就不會有回傳值啊，沒有顯示的回傳值當然是undefined。

相當於你遍歷的結果沒有回傳 做了無用功。

map的回呼函數不該這麼寫麼？

(item, index) => {
    return Object.keys(this.filter).forEach(key => {
        if (this.filter[key] && item[key] && item[key] === this.filter[key]) {
            console.log(item)
            return item
        }
    })
}

當我沒有回答吧，又看了一遍，你是知道這個問題的。 return Object.keys(this.filter) 這對你來說沒有意義。

還是需要使用個中間變數的，如：

this.filteredTableData = this.tableData.map((item, index) => {
    var _item;
    Object.keys(this.filter).forEach(key => {
        if (this.filter[key] && item[key] && item[key] === this.filter[key]) {
            console.log(item)
            _item = item;
            // return item
        }
    })
    return _item
})

// 你要考虑声明变量的性能损失的话 可以在外层声明好 用完 释放掉。

var _item;
this.filteredTableData = this.tableData.map((item, index) => {
    Object.keys(this.filter).forEach(key => {
        if (this.filter[key] && item[key] && item[key] === this.filter[key]) {
            console.log(item)
            _item = item;
            // return item
        }
    })
    return _item
})
_item = null

Answer 7

不知道你是不是這個意思。

---

filterTableData () {
    this.filteredTableData = this.tableData.filter((item, index) => {
      return Object.keys(this.filter).some(key => this.filter[key] && item[key] && item[key] === this.filter[key])
    })
    console.log(this.filteredTableData)
    // this.paginateTableData()
}