javascript - Traversal bersarang peta dan forEach, bagaimana untuk mengembalikan tatasusunan?

Question

Senario aplikasi

Menapis jadual mungkin melibatkan berbilang keadaan penapisan, this.filter里面存的是所有筛选条件的v-model状态的一个对象，this.tableData是从后端获取的所有原始表格数据的数组，this.filteredTableData ialah susunan data jadual yang ditapis.

Kod

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

Soalan

Menulis seperti ini akan membuat susunan console.log(this.filteredTableData)拿到一个全部是undefined kedua. Ralat ini sepatutnya kerana forEach tidak boleh menggunakan return untuk keluar dari gelung.
Jadi saya nak tahu:

• Bagaimana untuk melaksanakan fungsi ini apabila menggunakan peta dan sebaiknya jangan gunakan pembolehubah di dalam peta (anda boleh menggunakannya, tetapi anda hanya bimbang tentang prestasi)?

• Jika jumlah data this.filteredTableData sangat besar, adakah cara yang lebih baik?

Answer 1

Gunakan [].tapis terus...

Answer 2

Soalannya agak sukar untuk difahami
Jika anda ingin menukar peta kepada tatasusunan
masukkan sahaja [...map] dan itu sahaja

Answer 3

penapis lebih sesuai.

Selain itu, dari mana datangnya idea bahawa penambahan pembolehubah mempengaruhi prestasi. Jangan bergantung pada meneka bahawa ia akan mengalami masalah prestasi sebelum sebarang masalah prestasi berlaku.

Sama ada anda menggunakan gelung for biasa sebaliknya, atau anda perlu mentakrifkan nilai bool di luar untukEach menilai.

Answer 4

Saya pernah menghadapi masalah yang disebabkan oleh menggunakan map dan forEach sebelum ini, dan kemudian menyelesaikannya dengan menggunakan untuk...dalam dan untuk...secara munasabah Bolehkah anda mengubah pemikiran anda dan tidak semestinya menggunakan map dan forEach untuk menyelesaikannya.

Answer 5

Jangan gunakan ini dalam 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

Izinkan saya menjawab soalan anda tentang tatasusunan yang mengandungi undefined. undefined的问题吧。

你在map函数里 没有return

Jika tiada return dalam fungsi peta, sudah tentu tiada nilai pulangan yang tidak dipaparkan sudah tentu tidak ditentukan.

Ia sama dengan tidak mengembalikan hasil perjalanan anda dan melakukan kerja yang sia-sia.

Bukankah fungsi panggil balik peta harus ditulis seperti ini?

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

Cukup berpura-pura saya tidak menjawab dan membacanya lagi Anda tahu soalan ini. kembalikan Object.keys(this.filter) tidak masuk akal untuk anda.

Anda masih perlu menggunakan pembolehubah perantaraan, seperti: 🎜

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

Saya tidak tahu sama ada itu yang anda maksudkan.

---

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