javascript - Nested traversal of map and forEach, how to return an array?

Question

Application Scenario

Filtering of a table may involve multiple filtering conditions, this.filter stores an object of the v-model status of all filtering conditions, this.tableData is an array of all original table data obtained from the backend, this.filteredTableData is an array of filtered table data.

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

Writing like this will make the second console.log(this.filteredTableData) get an array that is all undefined. This error should be because forEach cannot use return to break out of the loop.
So I want to know:

• How to implement this function when using map and it is best not to use variables inside the map (you can use it, but you are just worried about performance)?

• If the amount of data in this.filteredTableData is particularly large, is there any better way?

Answer 1

Use [].filter directly...

Answer 2

The question is a bit difficult to understand
If you want to convert the map into an array
just enter [...map] and that’s it

Answer 3

filter is more appropriate.

Also, where does the idea that adding a variable affect performance come from. Don't rely on guessing that it will have performance problems before any performance problems occur.

Either you use an ordinary for loop instead, or you have to define a bool value outside forEach to judge.

Answer 4

I have encountered problems caused by using map and forEach before, and later solved them by using for...in and for...of reasonably. Can you change your mind and not necessarily use map and forEach to solve it.

Answer 5

Don’t use this in 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

Let me answer your question where the array is filled with undefined.

If you don’t have return in the map function, of course there will be no return value. The return value that is not displayed is of course undefined.

It is equivalent to the result of your traversal not being returned, which is a useless effort.

Shouldn’t the callback function of map be written like this?

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

Just pretend I didn’t answer and read it again. You know this question. return Object.keys(this.filter) makes no sense to you.

You still need to use an intermediate variable, such as:

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

I don’t know if that’s what you mean.

---

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