javascript - Verschachtelte Durchquerung von Map und ForEach, wie kann ich ein Array zurückgeben?

Question

Anwendungsszenarien

Das Filtern einer Tabelle kann mehrere Filterbedingungen umfassen. this.filter里面存的是所有筛选条件的v-model状态的一个对象，this.tableData是从后端获取的所有原始表格数据的数组，this.filteredTableDataist ein Array gefilterter Tabellendaten.

Code

    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()
    },

Frage

Wenn Sie so schreiben, wird das zweite console.log(this.filteredTableData)拿到一个全部是undefined-Array erstellt. Dieser Fehler sollte darauf zurückzuführen sein, dass forEach die Schleife nicht mit „return“ verlassen kann.
Also ich möchte es wissen:

• Wie implementiert man diese Funktion, wenn man eine Karte verwendet und es am besten ist, keine Variablen innerhalb der Karte zu verwenden (Sie können sie verwenden, aber Sie machen sich nur Sorgen um die Leistung)?

• Wenn die Datenmenge this.filteredTableData besonders groß ist, gibt es einen besseren Weg?

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()
}