search

Home  >  Q&A  >  body text

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

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:

曾经蜡笔没有小新曾经蜡笔没有小新2737 days ago1016

reply all(7)I'll reply

  • 漂亮男人

    漂亮男人2017-05-19 10:23:54

    Use [].filter directly...

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-19 10:23:54

    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

    reply
    0
  • PHP中文网

    PHP中文网2017-05-19 10:23:54

    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.

    reply
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:23:54

    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.

    reply
    0
  • 習慣沉默

    習慣沉默2017-05-19 10:23:54

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

    reply
    0
  • 巴扎黑

    巴扎黑2017-05-19 10:23:54

    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

    reply
    0
  • 漂亮男人

    漂亮男人2017-05-19 10:23:54

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

    reply
    0
  • Cancelreply