forEach,map,filter,find,some,every区别

<template>

  <card :filter="false">

    <template #header>

      <el-button type="primary" icon="el-icon-search" @click="inactiveFn">启用状态</el-button>

      <el-button type="primary" icon="el-icon-search" @click="namesFn">所有职称</el-button>

      <el-button type="primary" icon="el-icon-search" @click="idsFn">键值对id</el-button>

      <el-button type="primary" icon="el-icon-search" @click="strprofessnameFn">1006的职称</el-button>

      <el-button type="primary" icon="el-icon-search" @click="strprofessnameOneFn">第一个1006的职称</el-button>

      <el-button type="primary" icon="el-icon-search" @click="isHaveFn">是否存在1009</el-button>

    </template>

    <el-table

      ref="table"

      :header-cell-style="{background:'#F5F4F7'}"

      :data="tableData"

      border

      fit

      stripe

      highlight-current-row

      style=" 100%;"

    >

      <el-table-column

        type="index"

        width="60"

        label="序号"

        align="center"

      />

      <el-table-column

        prop="strprofesscode"

        label="职称编码"

        width="180"

      />

      <el-table-column

        prop="strprofessname"

        label="职称名称"

        width="180"

      />

      <el-table-column

        prop="strprofess"

        label="上级"

        width="180"

      />

      <el-table-column

        prop="blnisdetail"

        label="是否末级"

        align="center"

        width="100"

      >

        <template v-slot="scope">

          {{ scope.row.blnisdetail|isDetail }}

        </template>

      </el-table-column>

      <el-table-column

        prop="strnote"

        label="备注"

        min-width="180"

      />

      <el-table-column

        prop="blnisinactive"

        label="状态"

        align="center"

        width="100"

      >

        <template v-slot="scope">

          {{ scope.row.blnisinactive|State }}

        </template>

      </el-table-column>

    </el-table>

    所有职称:{{ names }}

    <br>

    键值对id:{{ ids }}

    <br>

    1006的职称:{{ strprofessname }}

    <br>

    第一个1006的职称:{{ strprofessnameOne.strprofessname }}

    <br>

    是否存在1009:{{ code1009 }}

  </card>

</template>

<script>

import { res } from './data.js'

export default {

  name: 'TableArea',

  data() {

    return {

      res: res,

      tableData: [],

      names: [],

      ids: [],

      strprofessname: [],

      strprofessnameOne: [],

      code1009: ''

    }

  },

  created() {

    this.tableData = this.res.data.rows

  },

  methods: {

    // filter()与find()使用方法也相同。同样都接收三个参数。不同的地方在于返回值。filter()返回的是数组，数组内是所有满足条件的元素，而find()只返回第一个满足条件的元素。如果条件不满足，filter()返回的是一个空数组，而find()返回的是undefined

    // const myArr=[1,2,3,4,5,6];

    // var v=myArr.find(value=>value>4);

    // console.log(v);// 5

    // 1.filter用法：过滤状态为'启用'的数据

    inactiveFn() {

      this.tableData = this.tableData.filter(item => {

        return item.blnisinactive === 0

        // 过滤编码大于'1007'的信息

        // return item.strprofesscode * 1 > 1007

      })

    },

    // 2.map用法：返回所有的职称,不许重复

    namesFn() {

      this.names = this.tableData.map(item => {

        return item.strprofessname

      })

      this.names = this._.uniq(this.names)

    },

    // 3.map用法：返回所有键值对id

    idsFn() {

      this.ids = this.tableData.map(item => {

        return { lngprofessid: item.lngprofessid }

      })

    },

    // 4.forEach用法：找到编码为'1006'职称,---注意 filter,some,find,map 结果一样

    strprofessnameFn() {

      this.tableData.forEach(item => {

        if (item.strprofesscode === '1006') {

          this.strprofessname.push(item.strprofessname) // 正厅级 院长

          // this.strprofessname = item.strprofessname// 显示的是最后一个

        }

      })

    },

    // 5.找到第一个编码为'1006'职称 filter过滤出所有,find找到第一个

    strprofessnameOneFn() {

      this.strprofessnameOne = this.tableData.find(item => {

        return item.strprofesscode === '1006'

      })

    },

    // 6.some用法：一个true则为true,every用法：所有true才为true

    // 做判断用，是否存在编码1009  some：返回true,every:返回false

    isHaveFn() {

      this.code1009 = this.tableData.some(item => {

        return item.strprofesscode === '1009'

      })

    }

    // some用法：

    // let arr = [1,2,3,4];

    // let res = arr.some(item => item > 4)

    // console.log(res);   // false

    // every用法：

    // let arr = [1,2,3,4];

    // let res = arr.every(item => item > 0)

    // console.log(res);   // true

  }

}

</script>