javascript - Traversée imbriquée de Map et forEach, comment renvoyer un tableau?

Question

Scénarios d'application

Le filtrage d'une table peut impliquer plusieurs conditions de filtrage, this.filter里面存的是所有筛选条件的v-model状态的一个对象，this.tableData是从后端获取的所有原始表格数据的数组，this.filteredTableDataest un tableau de données de table filtrées.

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

Question

Écrire ainsi fera le deuxième console.log(this.filteredTableData)拿到一个全部是undefined tableau. Cette erreur devrait être due au fait que forEach ne peut pas utiliser return pour sortir de la boucle.
Alors je veux savoir :

• Comment implémenter cette fonction lors de l'utilisation de la carte et il est préférable de ne pas utiliser de variables à l'intérieur de la carte (vous pouvez l'utiliser, mais vous vous inquiétez simplement des performances) ?

• Si la quantité de données this.filteredTableData est particulièrement importante, existe-t-il un meilleur moyen ?

Answer 1

Utilisez [].filter directement...

Answer 2

La question est un peu difficile à comprendre
Si vous souhaitez convertir la carte en tableau
entrez simplement [...map] et c'est tout

Answer 3

le filtre est plus approprié.

De plus, d'où vient l'idée selon laquelle l'ajout d'une variable affecte les performances. Ne vous fiez pas à deviner qu'il y aura des problèmes de performances avant que des problèmes de performances ne surviennent.

Soit vous utilisez une boucle for ordinaire à la place, soit vous devez définir une valeur booléenne en dehors de forEach pour juger.

Answer 4

J'ai déjà rencontré des problèmes causés par l'utilisation de map et forEach, et je les ai résolus plus tard en utilisant for...in et for...of raisonnablement. Pouvez-vous changer votre façon de penser et ne pas nécessairement utiliser map et forEach pour le résoudre.

Answer 5

Ne l'utilisez pas dans forEach

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

Permettez-moi de répondre à votre question sur le tableau contenant undefined. undefined的问题吧。

你在map函数里 没有return

S'il n'y a pas de return dans la fonction map, bien sûr il n'y aura pas de valeur de retour. La valeur de retour qui n'est pas affichée est bien sûr indéfinie.

Cela équivaut au résultat de votre parcours qui n'est pas renvoyé, ce qui est un effort inutile.

La fonction de rappel de map ne devrait-elle pas être écrite comme ceci ?

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

Faites simplement comme si je n’avais pas répondu et relisez-la. Vous connaissez cette question. return Object.keys(this.filter) n'a aucun sens pour vous.

Vous devez toujours utiliser une variable intermédiaire, telle que : 🎜

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

Je ne sais pas si tu penses ça.

---

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